add functions, create and join room

src/Chat.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Typography, Input, message } from 'antd';
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import { RightCircleFilled } from '@ant-design/icons';
+import Thread from './Thread';
+
+export default class Chat extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      messages: []
+    };
+  }
+  componentDidMount() {
+    firebase.firestore()
+    .collection('rooms')
+    .doc(window.localStorage.getItem('roomId'))
+    .onSnapshot(snap => {
+      this.setState(snap.data());
+    }, err => {
+      this.props.updateLoading(true);
+      if (err.code === 'permission-denied') {
+        message.error('Couldn\'t join old party');
+        this.props.changePage('create');
+        this.props.updateLoading(false);
+      }
+    })
+    firebase.firestore()
+    .collection('rooms')
+    .doc(window.localStorage.getItem('roomId'))
+    .collection('messages')
+    .onSnapshot(snap => {
+      this.setState({messages: snap.docs.map(v => ({ ...v.data(), id: v.id}) )});
+    });
+  }
+  render() {
+    const {messages, name} = this.state;
+    return (
+      <div className="content__wrapper">
+        <div>
+          <Typography.Title level={3}>{name}</Typography.Title>
+          <Typography.Text underline>Watch Party</Typography.Text>
+        </div>
+        <div className="party_chat_container">
+          <Thread messages={messages} />
+        </div>
+        <div className="party_chat_input">
+          <Input.TextArea 
+            autoSize={{
+              maxRows:3,
+              minRows:1,
+            }}
+            id="chat_input" 
+            placeholder="Begin typing..."
+          />
+          <RightCircleFilled id="chat_send" />
+        </div>
+      </div>
+    );
+  }
+}