AHOYAPPS-40: Add Functionality to Join/Leave a Room

[timmydoza]

This PR adds the following features:

• Input for user name and room name
• Area for video preview
• 'Join Room' button
• 'Leave Room' button
• User should be able to connect to a new room after leaving a room
• User should be disconnected from the room if the tab is closed
• Displays a loading indicator as the user connects to the room
• App retrieves token from express.js backend
• Uses Material UI components

Kevin's designs are not yet finished, so the appearance of these features will need to be revisited when the designs are complete. So don't mind how things look or where things are. My main goal was to add the functionality.

Some of the design decisions (use of VideoContext and VideoContextProvider, for instance) were made with the idea that we may some day create a React component library for the video SDK. Let me know if you want to hear my thoughts on that.

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

[timmydoza]

[timmydoza]

After you join a room, the room name is displayed on the screen. This is just temporary until we implement the main speaker area.

[manjeshbhargav]

@timmydoza A note for the future: hopefully twilio-cli will help generate this .env file using a script.

[manjeshbhargav]

@timmydoza Why do we need to create an EventEmitter here?

[timmydoza]

At first I was using const [room, setRoom] = useState<Room>(); and the initial value of room was undefined. This was causing me to use null checks in any component or hook that uses room, which I found to be annoying.

I asked Charlie about this one and we decided that it would be good to use an "empty" room object as an initial value so that we wouldn't have to perform so many null checks all over the place. EventEmitter did the trick since room inherits from that. Someday we may make aclass EmptyRoom extends EventEmitter { ... } if we need to.

For now, I'll assign this to a variable with a descriptive name to make things a little clearer:
const emptyRoom = new EventEmitter() as Room;

[charliesantos]

Did a quick pass. Still wrapping my head around it.
Also, some parts of the PR template are not used?
Please don't forget to rebase later.

[charliesantos]

Nitpick: Can you declare this above as a constant and read from an environment variable with 4000 as default?

const PORT = parseInt(process.env.PORT, 10) || 4000;
...
...
app.listen(PORT, () => console.log(`token server running on${PORT}`));

[timmydoza]

I could but then it wouldn't work with the react dev server. Right now the token comes from the /token endpoint, which is proxied to localhost:4000 per a setting in package.json. I can't set the port in package.json from an environment variable, so I don't think I should do it in server.js.

Plus, since we will end up using a twilio-cli solution for token minting, server.js is just temporary. I only included it so I can develop, and so that other people can start the app.

[charliesantos]

nitpick: can we sort the imports alphabetically? Destructured imports could be last.
It'd be great if we can also add this rule to eslint.

import LocalVideoPreview from './components/LocalVideoPreview/LocalVideoPreview';
import Menu from './components/Menu/Menu';
import useRoomState from './hooks/useRoomState/useRoomState';
import { styled } from '@material-ui/core/styles';
import { useVideoContext } from './hooks/context';

[charliesantos]

Let's do this for other files as well.

[charliesantos]

I like how we're grouping the imports by types. Can we separate the group with newlines, and also sort alphabetically? Something like

import * as React from 'react';
import { useDispatch } from 'react-redux';

import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
import CircularProgress from '@material-ui/core/CircularProgress';
import Toolbar from '@material-ui/core/Toolbar';
import TextField from '@material-ui/core/TextField';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';

import useRoomState from '../../hooks/useRoomState/useRoomState';
import { useVideoContext } from '../../hooks/context';
import { getToken, receiveToken } from '../../store/main/main';

[charliesantos]

Same for other files please

[timmydoza]

I'll make these adjustments by hand. Couldn't get the eslint to work so I'll wait on that for now.