v0.9

src/Create.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Button,
   InputAdornment,
@@ -8,17 +8,27 @@ import {
   Paper,
 } from '@material-ui/core';
 import Save from '@material-ui/icons/Save';
-import { JoinRoomApi, CreateRoomApi } from './Api';
+import { JoinRoomApi, CreateRoomApi, PLAYER_STATUS, getPlayerSource } from './Api';
 import { goTo } from 'route-lite';
 import Chat from './Chat';
 
-const saveName = (name) => window.localStorage.setItem('watchPartyUserName', name);
+const saveName = (data) => {
+  const { name, notify } = data;
+  window.localStorage.setItem('watchPartyUserName', name);
+  notify('Saved name');
+};
 const getName = () => window.localStorage.getItem('watchPartyUserName');
 
-const saveRoomId = (rid) => window.localStorage.setItem('watchPartyRoomId', rid);
+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(),
@@ -26,25 +36,58 @@ const joinRoom = async (data) => {
   const confirmedRoomId = await JoinRoomApi(apidata)
     .then((res) => res.json())
     .then((res) => res.roomId)
-    .catch((err) => console.error('Join Room API error', err));
+    .catch((err) => {
+      data.props.updateLoading(false);
+      data.props.notify('Something went wrong');
+      console.error('Join Room API error', err);
+    });
   if (confirmedRoomId === apidata.roomId) {
-    saveRoomId(confirmedRoomId);
-    saveName(apidata.userName);
-    goTo(Chat);
+    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) => {
-      saveRoomId(res.roomId);
-      saveName(data.name);
-      goTo(Chat);
+      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);
     });
 };
 
@@ -52,11 +95,21 @@ const Create = (props) => {
   const [name, setName] = useState(getName() || '');
   const [createName, setCreateName] = useState('');
   const [joinName, setJoinName] = useState(getRoomId() || '');
-  if (getName() && getRoomId())
-    joinRoom({
-      joinName: getRoomId(),
-      name: getName(),
-    });
+  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>
@@ -73,7 +126,7 @@ const Create = (props) => {
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
-                <IconButton onClick={() => saveName(name)}>
+                <IconButton onClick={() => saveName({ name, notify })}>
                   <Save />
                 </IconButton>
               </InputAdornment>
@@ -92,7 +145,7 @@ const Create = (props) => {
             label="Party Name"
           />
           <Button
-            onClick={() => createRoom({ name, createName })}
+            onClick={() => createRoom({ name, createName, props })}
             disabled={createName === ''}
             color="primary"
             fullWidth
@@ -114,7 +167,7 @@ const Create = (props) => {
             label="Party Name"
           />
           <Button
-            onClick={() => joinRoom({ joinName, name })}
+            onClick={() => joinRoom({ joinName, name, props })}
             disabled={joinName === ''}
             variant="contained"
             color="secondary"