Redone UI, add leave and delete logic
This commit is contained in:
Ayushya Amitabh
+149
-40
@@ -1,61 +1,170 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Typography, Input, message } from 'antd';
|
||||
import {
|
||||
Typography,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
ButtonGroup,
|
||||
Button,
|
||||
} from '@material-ui/core';
|
||||
import firebase from 'firebase/app';
|
||||
import 'firebase/firestore';
|
||||
import { RightCircleFilled } from '@ant-design/icons';
|
||||
import 'firebase/auth';
|
||||
import Thread from './Thread';
|
||||
import Send from '@material-ui/icons/SendRounded';
|
||||
import Sync from '@material-ui/icons/SyncOutlined';
|
||||
import Exit from '@material-ui/icons/ExitToAppRounded';
|
||||
import Share from '@material-ui/icons/ShareRounded';
|
||||
import Delete from '@material-ui/icons/Delete';
|
||||
import { SendMessageApi, LeaveRoomApi, DeleteRoomApi } from './Api';
|
||||
import { goTo } from 'route-lite';
|
||||
import Create from './Create';
|
||||
|
||||
export default class Chat extends Component {
|
||||
constructor (props) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
messages: []
|
||||
name: '',
|
||||
messages: [],
|
||||
newMessage: '',
|
||||
admin: false,
|
||||
};
|
||||
this.sendMessage = this.sendMessage.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
firebase.firestore()
|
||||
.collection('rooms')
|
||||
.doc(window.localStorage.getItem('roomId'))
|
||||
.onSnapshot(snap => {
|
||||
this.setState(snap.data());
|
||||
}, err => {
|
||||
this.props.updateLoading(true);
|
||||
if (err.code === 'permission-denied') {
|
||||
message.error('Couldn\'t join old party');
|
||||
this.props.changePage('create');
|
||||
this.props.updateLoading(false);
|
||||
window.addEventListener('keyup', (ev) => {
|
||||
if (ev.code === 'Enter') {
|
||||
if (ev.target === document.getElementById('chat-message-box-input')) {
|
||||
if (ev.shiftKey === false) {
|
||||
const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
|
||||
if (trim !== '') this.sendMessage(trim);
|
||||
this.setState({ newMessage: '' });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
firebase
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(window.localStorage.getItem('watchPartyRoomId'))
|
||||
.onSnapshot(
|
||||
(snap) => {
|
||||
this.setState(snap.data());
|
||||
},
|
||||
(err) => console.error(err)
|
||||
);
|
||||
firebase
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(window.localStorage.getItem('watchPartyRoomId'))
|
||||
.collection('users')
|
||||
.onSnapshot((snap) => {
|
||||
const isAdmin = snap.docs
|
||||
.filter((user) => user.id === firebase.auth().currentUser.uid)[0]
|
||||
.data().admin;
|
||||
this.setState({ admin: isAdmin });
|
||||
});
|
||||
firebase
|
||||
.firestore()
|
||||
.collection('rooms')
|
||||
.doc(window.localStorage.getItem('watchPartyRoomId'))
|
||||
.collection('messages')
|
||||
.orderBy('time')
|
||||
.onSnapshot((snap) => {
|
||||
this.setState({ messages: snap.docs.map((v) => ({ ...v.data(), id: v.id })) });
|
||||
const pcc = document.getElementsByClassName('thread-container')[0];
|
||||
if (pcc) pcc.scrollTop = pcc.scrollHeight;
|
||||
});
|
||||
}
|
||||
endParty() {
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
};
|
||||
DeleteRoomApi(data).then((res) => {
|
||||
if (res.status === 200) {
|
||||
window.localStorage.removeItem('watchPartyRoomId');
|
||||
goTo(Create);
|
||||
}
|
||||
})
|
||||
firebase.firestore()
|
||||
.collection('rooms')
|
||||
.doc(window.localStorage.getItem('roomId'))
|
||||
.collection('messages')
|
||||
.onSnapshot(snap => {
|
||||
this.setState({messages: snap.docs.map(v => ({ ...v.data(), id: v.id}) )});
|
||||
});
|
||||
}
|
||||
leaveParty() {
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
};
|
||||
LeaveRoomApi(data).then((res) => {
|
||||
if (res.status === 200) {
|
||||
window.localStorage.removeItem('watchPartyRoomId');
|
||||
goTo(Create);
|
||||
}
|
||||
});
|
||||
}
|
||||
shareParty() {
|
||||
const el = document.createElement('textarea');
|
||||
el.value = window.localStorage.getItem('watchPartyRoomId');
|
||||
document.body.appendChild(el);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
}
|
||||
sendMessage(message) {
|
||||
const data = {
|
||||
roomId: window.localStorage.getItem('watchPartyRoomId'),
|
||||
name: window.localStorage.getItem('watchPartyUserName'),
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
text: message,
|
||||
time: new Date().toISOString(),
|
||||
};
|
||||
SendMessageApi(data);
|
||||
}
|
||||
render() {
|
||||
const {messages, name} = this.state;
|
||||
const { admin, name, messages, newMessage } = this.state;
|
||||
return (
|
||||
<div className="content__wrapper">
|
||||
<div>
|
||||
<Typography.Title level={3}>{name}</Typography.Title>
|
||||
<Typography.Text underline>Watch Party</Typography.Text>
|
||||
</div>
|
||||
<div className="party_chat_container">
|
||||
<div className="party-chat-container">
|
||||
<Typography className="brand-title" variant="overline" display="block">
|
||||
WATCH PARTY
|
||||
</Typography>
|
||||
<Typography className="room-title" variant="h4" gutterBottom>
|
||||
{name}
|
||||
</Typography>
|
||||
<ButtonGroup className="party-controls" size="small" color="secondary" fullWidth>
|
||||
<Button onClick={this.shareParty} startIcon={<Share />}>
|
||||
Share
|
||||
</Button>
|
||||
<Button startIcon={<Sync />}>Sync</Button>
|
||||
<Button onClick={this.leaveParty} startIcon={<Exit />}>
|
||||
Leave
|
||||
</Button>
|
||||
{admin && (
|
||||
<Button onClick={this.endParty} startIcon={<Delete />}>
|
||||
End Party
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
<div className="thread-container">
|
||||
<Thread messages={messages} />
|
||||
</div>
|
||||
<div className="party_chat_input">
|
||||
<Input.TextArea
|
||||
autoSize={{
|
||||
maxRows:3,
|
||||
minRows:1,
|
||||
}}
|
||||
id="chat_input"
|
||||
placeholder="Begin typing..."
|
||||
/>
|
||||
<RightCircleFilled id="chat_send" />
|
||||
</div>
|
||||
<TextField
|
||||
onSubmit={(e) => console.log(e)}
|
||||
multiline
|
||||
rowsMax="3"
|
||||
size="small"
|
||||
placeholder="New message... (<Enter> to send)"
|
||||
variant="outlined"
|
||||
className="chat-message-box"
|
||||
value={newMessage}
|
||||
onChange={(e) => this.setState({ newMessage: e.target.value })}
|
||||
InputProps={{
|
||||
id: 'chat-message-box-input',
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton edge="end">
|
||||
<Send />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user