watchparty/src/Create.js

import React, { useState, useEffect } 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(),
  };
  const confirmedRoomId = await JoinRoomApi(apidata)
    .then((res) => res.json())
    .then((res) => res.roomId)
    .catch((err) => {
      data.props.updateLoading(false);
      data.props.notify('Something went wrong');
      console.error('Join Room API error', err);
    });
  if (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.NOT_PLAYING,
      time: 0,
      url: '',
    },
  };

  CreateRoomApi(apidata)
    .then((res) => res.json())
    .then((res) => {
      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);
    })
    .catch((err) => {
      data.props.updateLoading(false);
      data.props.notify('Something went wrong');
      console.error('Join Room API error', err);
    });
};

const Create = (props) => {
  const [name, setName] = useState(getName() || '');
  const [createName, setCreateName] = useState('');
  const [joinName, setJoinName] = useState(getRoomId() || '');
  const { notify, updateLoading } = props;

  const joinOnMount = () => {
    updateLoading(false);
    // NEEDS FIX - REPETITIVE API CALLS
    // if (getName() && getRoomId()) {
    //   joinRoom({
    //     joinName,
    //     name,
    //     props,
    //   });
    // }
  };
  useEffect(joinOnMount, []);

  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) => setName(e.target.value)}
          className="name-field"
          label="Name"
          variant="filled"
          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"
            onChange={(e) => setCreateName(e.target.value)}
            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"
            onChange={(e) => setJoinName(e.target.value)}
            label="Party Name"
          />
          <Button
            onClick={() => joinRoom({ joinName, name, props })}
            disabled={joinName === ''}
            variant="contained"
            color="secondary"
            fullWidth
          >
            JOIN
          </Button>
        </Paper>
      </div>
    </div>
  );
};

export default Create;