add functions, create and join room

2020-03-28 21:41:21 -04:00
parent d3c19fe4cc
commit 24b2c6a4e0
19 changed files with 4340 additions and 39 deletions
@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import { Button, Input, Divider, Typography, message } from 'antd';
+import { PlusCircleFilled, PlayCircleFilled } from '@ant-design/icons';
+
+const login = async () => firebase.auth().signInAnonymously();
+
+const Create = props => {
+  const [userName, setUserName] = useState(window.localStorage.getItem('watchPartyUserName') || '');
+  const [roomName, setRoomName] = useState('');
+  const [roomCode, setRoomCode] = useState(window.localStorage.getItem('roomId') || '');
+
+  const requestCreateRoom = async () => {
+    props.updateLoading(true);
+    if (userName === '') {
+      message.error('You forgot your name');
+      props.updateLoading(false);
+      return;
+    }
+    if (roomName === '') {
+      message.error('You forgot to give a party name');
+      props.updateLoading(false);
+      return;
+    }
+    if (!props.loggedIn) await login();
+    firebase
+      .auth()
+      .currentUser.getIdToken()
+      .then(idToken => {
+        fetch('http://localhost:5001/watch-party-crx/us-central1/widgets/create', {
+          method: 'POST',
+          headers: {
+            Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
+          },
+          body: JSON.stringify({
+            roomName,
+            userName,
+          }),
+        })
+          .then(res => res.json())
+          .then(res => {
+            res.roomId && window.localStorage.setItem('roomId', res.roomId);
+            window.localStorage.setItem('watchPartyUserName', userName);
+            window.localStorage.setItem('watchPartyUser', firebase.auth().currentUser.uid);
+            props.changePage('chat');
+            props.updateLoading(false);
+          });
+      });
+  };
+
+  const requestJoinRoom = async () => {
+    props.updateLoading(true);
+    if (userName === '') {
+      message.error('You forgot your name');
+      props.updateLoading(false);
+      return;
+    }
+    if (roomCode === '') {
+      message.error('Please enter a party code');
+      props.updateLoading(false);
+      return;
+    }
+    if (!props.loggedIn) await login();
+    firebase
+      .auth()
+      .currentUser.getIdToken()
+      .then(idToken => {
+        fetch(`http://localhost:5001/watch-party-crx/us-central1/widgets/join`, {
+          method: 'POST',
+          headers: {
+            Authorization: `Token ${idToken}:${firebase.auth().currentUser.uid}`,
+          },
+          body: JSON.stringify({
+            roomId: roomCode.trim(),
+            userName,
+          }),
+        })
+          .then(res => {
+            if (res.status === 200) return res.json();
+            if (res.status === 404) message.error("That party doesn't exist");
+            return {};
+          })
+          .then(res => {
+            res.roomId && window.localStorage.setItem('roomId', res.roomId);
+            window.localStorage.setItem('watchPartyUserName', userName);
+            window.localStorage.setItem('watchPartyUser', firebase.auth().currentUser.uid);
+            props.changePage('chat');
+            props.updateLoading(false);
+          });
+      });
+  };
+
+  return (
+    <div
+      style={{
+        padding: 20,
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        position: 'relative',
+      }}
+    >
+      <Typography.Title style={{ position: 'absolute', top: 20, left: 20 }} level={3}>
+        Watch Party
+      </Typography.Title>
+
+      <Input
+        style={{ borderRadius: 23, marginBottom: 15 }}
+        value={userName}
+        onChange={e => setUserName(e.target.value)}
+        placeholder="Your Name"
+        size="large"
+      />
+      <Divider />
+      <Input
+        style={{ borderRadius: 23, marginBottom: 15 }}
+        value={roomName}
+        onChange={e => setRoomName(e.target.value)}
+        placeholder="Room Name"
+        size="large"
+      />
+      <Button onClick={requestCreateRoom} block size="large" type="primary" shape="round">
+        <PlusCircleFilled style={{ color: 'white' }} />
+        Start Watch Party
+      </Button>
+      <Divider />
+      <Input
+        style={{ borderRadius: 23, marginBottom: 15 }}
+        value={roomCode}
+        onChange={e => setRoomCode(e.target.value)}
+        placeholder="Room Code"
+        size="large"
+      />
+      <Button onClick={requestJoinRoom} block size="large" shape="round">
+        <PlayCircleFilled />
+        Join Watch Party
+      </Button>
+    </div>
+  );
+};
+
+export default Create;