Redone UI, add leave and delete logic
This commit is contained in:
Ayushya Amitabh
+117
-131
@@ -1,143 +1,129 @@
|
||||
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';
|
||||
import {
|
||||
Button,
|
||||
InputAdornment,
|
||||
TextField,
|
||||
Typography,
|
||||
IconButton,
|
||||
Paper,
|
||||
} from '@material-ui/core';
|
||||
import Save from '@material-ui/icons/Save';
|
||||
import { JoinRoomApi, CreateRoomApi } from './Api';
|
||||
import { goTo } from 'route-lite';
|
||||
import Chat from './Chat';
|
||||
|
||||
const login = async () => firebase.auth().signInAnonymously();
|
||||
const saveName = (name) => window.localStorage.setItem('watchPartyUserName', name);
|
||||
const getName = () => window.localStorage.getItem('watchPartyUserName');
|
||||
|
||||
const Create = props => {
|
||||
const [userName, setUserName] = useState(window.localStorage.getItem('watchPartyUserName') || '');
|
||||
const [roomName, setRoomName] = useState('');
|
||||
const [roomCode, setRoomCode] = useState(window.localStorage.getItem('roomId') || '');
|
||||
const saveRoomId = (rid) => window.localStorage.setItem('watchPartyRoomId', rid);
|
||||
const getRoomId = () => window.localStorage.getItem('watchPartyRoomId');
|
||||
|
||||
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 joinRoom = async (data) => {
|
||||
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) => console.error('Join Room API error', err));
|
||||
if (confirmedRoomId === apidata.roomId) {
|
||||
saveRoomId(confirmedRoomId);
|
||||
saveName(apidata.userName);
|
||||
goTo(Chat);
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
const createRoom = async (data) => {
|
||||
const apidata = {
|
||||
roomName: data.createName,
|
||||
userName: data.name,
|
||||
};
|
||||
CreateRoomApi(apidata)
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
saveRoomId(res.roomId);
|
||||
saveName(data.name);
|
||||
goTo(Chat);
|
||||
});
|
||||
};
|
||||
|
||||
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(),
|
||||
});
|
||||
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 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)}>
|
||||
<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 })}
|
||||
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 })}
|
||||
disabled={joinName === ''}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
fullWidth
|
||||
>
|
||||
JOIN
|
||||
</Button>
|
||||
</Paper>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user