v1.2.0-beta/fix file structure

2020-05-21 10:48:37 -04:00
parent c5dc4d756f
commit 9e61fe15ef
38 changed files with 19531 additions and 0 deletions
@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  InputAdornment,
+  TextField,
+  Typography,
+  IconButton,
+  Paper,
+} from '@material-ui/core';
+import Save from '@material-ui/icons/Save';
+import { JoinRoomApi, CreateRoomApi, PLAYER_STATUS, getPlayerSource } from './Api';
+import { goTo } from 'route-lite';
+import Chat from './Chat';
+
+const saveName = (data) => {
+  const { name, notify } = data;
+  window.localStorage.setItem('watchPartyUserName', name);
+  notify('Saved name');
+};
+const getName = () => window.localStorage.getItem('watchPartyUserName');
+
+const saveRoomId = (data) => {
+  const { rid, notify } = data;
+  window.localStorage.setItem('watchPartyRoomId', rid);
+  notify('Saved room');
+};
+const getRoomId = () => window.localStorage.getItem('watchPartyRoomId');
+
+const joinRoom = async (data) => {
+  data.props.updateLoading(true);
+  data.props.notify('Joining party...');
+  const apidata = {
+    roomId: data.joinName.trim(),
+    userName: data.name.trim(),
+    source: getPlayerSource(),
+  };
+  const confirmedRoomId = await JoinRoomApi(apidata)
+    .then((res) => res.json())
+    .then((res) => res.roomId)
+    .catch((err) => {
+      data.props.updateLoading(false);
+      data.props.notify(err.message || err.statusText);
+      console.error('Join Room API error', err);
+    });
+  if (confirmedRoomId && confirmedRoomId === apidata.roomId) {
+    saveName({
+      name: apidata.userName,
+      notify: data.props.notify,
+    });
+    saveRoomId({
+      rid: confirmedRoomId,
+      notify: data.props.notify,
+    });
+    data.props.notify('Joined party');
+    goTo(Chat, data.props);
+  }
+};
+
+const createRoom = async (data) => {
+  data.props.updateLoading(true);
+  data.props.notify('Starting party...');
+
+  const apidata = {
+    roomName: data.createName,
+    userName: data.name,
+    player: {
+      source: getPlayerSource(),
+      status: PLAYER_STATUS.PAUSED,
+      time: 0,
+      url: '',
+    },
+  };
+
+  CreateRoomApi(apidata)
+    .then((res) => res.json())
+    .then((res) => {
+      if (res.status <= 299) {
+        saveName({
+          name: data.name,
+          notify: data.props.notify,
+        });
+        saveRoomId({
+          rid: res.roomId,
+          notify: data.props.notify,
+        });
+        data.props.notify('Started party');
+        goTo(Chat, data.props);
+      } else {
+        data.props.updateLoading(false);
+        data.props.notify(res.message || res.statusText);
+      }
+    })
+    .catch((err) => {
+      data.props.updateLoading(false);
+      data.props.notify(err.message || err.statusText);
+      console.error('Create Room API error', err);
+    });
+};
+
+const Create = (props) => {
+  const [name, setName] = useState(getName() || '');
+  const [createName, setCreateName] = useState('');
+  const [joinName, setJoinName] = useState(getRoomId() || '');
+  const { notify } = props;
+
+  return (
+    <div className="party-create-container">
+      <Typography className="brand-title" variant="h6" display="block" gutterBottom>
+        WATCH PARTY
+      </Typography>
+      <div className="party-create-inputs">
+        <TextField
+          fullWidth
+          value={name}
+          onChange={(e) => (e.target.value.length <= 24 ? setName(e.target.value) : null)}
+          className="name-field"
+          label="Name"
+          variant="filled"
+          helperText={name.length > 0 ? `${name.length}/24` : null}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton onClick={() => saveName({ name, notify })}>
+                  <Save />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+        <Paper className="join-card" elevation={3}>
+          <Typography variant="button" display="block" gutterBottom>
+            CREATE PARTY
+          </Typography>
+          <TextField
+            fullWidth
+            value={createName}
+            className="card-field addFocus"
+            onChange={(e) => (e.target.value.length <= 24 ? setCreateName(e.target.value) : null)}
+            helperText={createName.length > 0 ? `${createName.length}/24` : null}
+            label="Party Name"
+          />
+          <Button
+            onClick={() => createRoom({ name, createName, props })}
+            disabled={createName === ''}
+            color="primary"
+            fullWidth
+            variant="contained"
+          >
+            CREATE
+          </Button>
+        </Paper>
+        <Paper className="join-card" elevation={3}>
+          <Typography variant="button" display="block" gutterBottom>
+            JOIN PARTY
+          </Typography>
+          <TextField
+            color="secondary"
+            fullWidth
+            value={joinName}
+            className="card-field addFocus"
+            onChange={(e) => setJoinName(e.target.value)}
+            label="Party Code"
+            helperText="Ask your party leader for this code"
+          />
+          <Button
+            onClick={() => joinRoom({ joinName, name, props })}
+            disabled={joinName === ''}
+            variant="contained"
+            color="secondary"
+            fullWidth
+          >
+            JOIN
+          </Button>
+        </Paper>
+      </div>
+    </div>
+  );
+};
+
+export default Create;