mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-15 18:08:46 +00:00
678 lines
18 KiB
JavaScript
678 lines
18 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import dayjs from 'dayjs';
|
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
|
import _ from "underscore";
|
|
|
|
// Material UI
|
|
import Box from '@material-ui/core/Box';
|
|
import Button from '@material-ui/core/Button';
|
|
import Card from '@material-ui/core/Card';
|
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
|
import Fab from '@material-ui/core/Fab';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import Popover from '@material-ui/core/Popover';
|
|
import TextField from '@material-ui/core/TextField';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import withStyles from '@material-ui/core/styles/withStyles';
|
|
|
|
// Material UI Icons
|
|
import AddCircleIcon from '@material-ui/icons/AddBox';
|
|
import CheckMarkIcon from '@material-ui/icons/Check';
|
|
import ErrorIcon from '@material-ui/icons/ErrorOutline';
|
|
import SendIcon from '@material-ui/icons/Send';
|
|
|
|
// Redux
|
|
import { connect } from 'react-redux';
|
|
import {
|
|
getDirectMessages,
|
|
createNewDirectMessage,
|
|
getNewDirectMessages,
|
|
reloadDirectMessageChannels,
|
|
sendDirectMessage
|
|
} from '../redux/actions/dataActions';
|
|
|
|
const styles = {
|
|
pageContainer: {
|
|
minHeight: 'calc(100vh - 50px - 60px)'
|
|
},
|
|
sidePadding: {
|
|
maxWidth: 350
|
|
},
|
|
dmList: {
|
|
width: 300,
|
|
marginLeft: 15
|
|
},
|
|
dmItemsUpper: {
|
|
marginBottom: 1,
|
|
// height: 'calc(100vh - 50px - 142px)',
|
|
minHeight: 100,
|
|
maxHeight: 'calc(100vh - 50px - 142px)',
|
|
overflow: "auto"
|
|
},
|
|
dmItemsLower: {
|
|
|
|
},
|
|
dmItemUsernameSelected: {
|
|
fontSize: 20,
|
|
color: 'white'
|
|
},
|
|
dmItemUsernameUnselected: {
|
|
fontSize: 20,
|
|
color: '#1da1f2'
|
|
},
|
|
dmItemTimeSelected: {
|
|
color: '#D6D6D6',
|
|
fontSize: 12,
|
|
float: 'right',
|
|
marginRight: 5,
|
|
marginTop: 5
|
|
},
|
|
dmItemTimeUnselected: {
|
|
color: 'black',
|
|
fontSize: 12,
|
|
float: 'right',
|
|
marginRight: 5,
|
|
marginTop: 5
|
|
},
|
|
dmRecentMessageSelected: {
|
|
wordBreak: "break-all",
|
|
color: '#D6D6D6'
|
|
},
|
|
dmRecentMessageUnselected: {
|
|
wordBreak: "break-all",
|
|
color: 'black'
|
|
},
|
|
dmRecentMessageDisabled: {
|
|
wordBreak: "break-all",
|
|
color: 'red'
|
|
},
|
|
dmListItemContainer: {
|
|
height: 100
|
|
},
|
|
dmListLayoutContainer: {
|
|
height: "100%"
|
|
},
|
|
dmListRecentMessage: {
|
|
marginLeft: 10,
|
|
marginRight: 10
|
|
},
|
|
dmListTextLayout: {
|
|
height: 30
|
|
},
|
|
dmCardUnselected: {
|
|
fontSize: 20,
|
|
backgroundColor: '#FFFFFF',
|
|
width: 300
|
|
},
|
|
dmCardSelected: {
|
|
fontSize: 20,
|
|
backgroundColor: '#1da1f2',
|
|
width: 300
|
|
},
|
|
messagesGrid: {
|
|
// // margin: "auto"
|
|
// height: "auto",
|
|
// width: "auto"
|
|
},
|
|
messagesBox: {
|
|
width: 450
|
|
},
|
|
messagesContainer: {
|
|
height: 'calc(100vh - 50px - 110px)',
|
|
overflow: 'auto',
|
|
width: 450,
|
|
marginLeft: 2,
|
|
marginRight: 17
|
|
},
|
|
fromMessage: {
|
|
minWidth: 150,
|
|
maxWidth: 350,
|
|
minHeight: 40,
|
|
marginRight: 2,
|
|
marginTop: 2,
|
|
marginBottom: 10,
|
|
backgroundColor: '#008394',
|
|
color: '#FFFFFF',
|
|
float: 'right'
|
|
},
|
|
toMessage: {
|
|
minWidth: 150,
|
|
maxWidth: 350,
|
|
minHeight: 40,
|
|
marginLeft: 15,
|
|
marginTop: 2,
|
|
marginBottom: 10,
|
|
backgroundColor: '#008394',
|
|
color: '#FFFFFF',
|
|
float: 'left'
|
|
},
|
|
messageContent: {
|
|
// maxWidth: 330,
|
|
// width: 330,
|
|
wordBreak: "break-all",
|
|
textAlign: 'left',
|
|
marginLeft: 5,
|
|
marginRight: 5
|
|
},
|
|
messageTime: {
|
|
color: '#D6D6D6',
|
|
textAlign: 'left',
|
|
marginLeft: 5,
|
|
fontSize: 12
|
|
},
|
|
writeMessage: {
|
|
backgroundColor: '#FFFFFF',
|
|
boxShadow: '0px 0px 5px 0px grey',
|
|
width: 450
|
|
},
|
|
messageTextField: {
|
|
width: 388
|
|
},
|
|
messageButton: {
|
|
backgroundColor: '#1da1f2',
|
|
marginTop: 8,
|
|
marginLeft: 2
|
|
},
|
|
loadingUsernameChecks: {
|
|
height: 55,
|
|
width: 55,
|
|
marginLeft: 5
|
|
},
|
|
errorIcon: {
|
|
height: 55,
|
|
width: 55,
|
|
marginLeft: 5,
|
|
color: '#ff3d00'
|
|
},
|
|
checkMarkIcon: {
|
|
height: 55,
|
|
width: 55,
|
|
marginLeft: 5,
|
|
color: '#1da1f2'
|
|
},
|
|
createButton: {
|
|
// textAlign: "center",
|
|
// display: "block",
|
|
marginLeft: 96,
|
|
marginRight: 96,
|
|
position: "relative"
|
|
}
|
|
};
|
|
|
|
export class directMessages extends Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
hasChannelSelected: false,
|
|
selectedChannel: null,
|
|
dmData: null,
|
|
anchorEl: null,
|
|
createDMUsername: '',
|
|
usernameValid: false,
|
|
// message: '',
|
|
drafts: {},
|
|
errors: null
|
|
};
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
if (this.state.hasChannelSelected) {
|
|
document.getElementById('messagesContainer').scrollTop = document.getElementById(
|
|
'messagesContainer'
|
|
).scrollHeight;
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.getDirectMessages();
|
|
// this.updatePage();
|
|
}
|
|
|
|
// Updates the state whenever redux is updated
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.directMessages && !_.isEqual(nextProps.directMessages, this.state.dmData)) {
|
|
this.setState({ dmData: nextProps.directMessages}, () => {
|
|
if (this.state.selectedChannel) {
|
|
this.state.dmData.forEach((channel) => {
|
|
if (channel.dmId === this.state.selectedChannel.dmId) {
|
|
this.setState({
|
|
selectedChannel: channel
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
updatePage = async() => {
|
|
while (true) {
|
|
await this.sleep(15000);
|
|
// console.log("getting new DMs");
|
|
this.props.getNewDirectMessages();
|
|
}
|
|
}
|
|
|
|
sleep = (ms) => {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
// Handles selecting different DM channels
|
|
handleClickChannel = (event) => {
|
|
this.setState({
|
|
hasChannelSelected: true
|
|
});
|
|
|
|
const dmItemsUpper = document.getElementById("dmItemsUpper");
|
|
let target = event.target;
|
|
let dmChannelKey;
|
|
|
|
// Determine which DM channel was clicked by finding the data-key.
|
|
// A while loop is necessary, because the user can click on any part of the
|
|
// DM list item. dmItemsUpper is the list container of the dmItems
|
|
while (target !== dmItemsUpper) {
|
|
dmChannelKey = target.dataset.key;
|
|
|
|
if (dmChannelKey) {
|
|
break;
|
|
} else {
|
|
target = target.parentNode;
|
|
}
|
|
}
|
|
|
|
// Save the entire DM channel in the state so that it is easier to load the messages
|
|
this.state.dmData.forEach((channel) => {
|
|
if (channel.dmId === dmChannelKey) {
|
|
this.setState({
|
|
selectedChannel: channel
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
formatDateToString(dateString) {
|
|
let newDate = new Date(Date.parse(dateString));
|
|
return newDate.toDateString();
|
|
}
|
|
|
|
formatDateToTimeDiff(dateString) {
|
|
return dayjs(dateString).fromNow();
|
|
}
|
|
|
|
shortenText = (text, length) => {
|
|
// Shorten the text
|
|
let shortened = text.slice(0, length + 1);
|
|
|
|
// Trim whitespace from the end of the text
|
|
if (shortened[shortened.length - 1] === ' ') {
|
|
shortened = shortened.trimRight();
|
|
}
|
|
|
|
// Add ... to the end
|
|
shortened = `${shortened}...`;
|
|
|
|
return shortened;
|
|
}
|
|
|
|
handleOpenAddDMPopover = (event) => {
|
|
this.setState({
|
|
anchorEl: event.currentTarget
|
|
});
|
|
};
|
|
|
|
handleCloseAddDMPopover = () => {
|
|
this.setState({
|
|
anchorEl: null,
|
|
createDMUsername: '',
|
|
usernameValid: false
|
|
});
|
|
};
|
|
|
|
handleChangeAddDMUsername = (event) => {
|
|
this.setState({
|
|
createDMUsername: event.target.value
|
|
});
|
|
};
|
|
|
|
handleClickCreate = () => {
|
|
this.props.createNewDirectMessage(this.state.createDMUsername)
|
|
.then(() => {
|
|
return this.props.reloadDirectMessageChannels();
|
|
})
|
|
.then(() => {
|
|
this.handleCloseAddDMPopover();
|
|
return;
|
|
})
|
|
.catch(() => {
|
|
return;
|
|
})
|
|
}
|
|
|
|
handleChangeMessage = (event) => {
|
|
let drafts = this.state.drafts;
|
|
drafts[this.state.selectedChannel.dmId] = event.target.value;
|
|
this.setState({
|
|
drafts
|
|
});
|
|
}
|
|
|
|
handleClickSend = () => {
|
|
// console.log(this.state.drafts[this.state.selectedChannel.dmId]);
|
|
let drafts = this.state.drafts;
|
|
if (this.state.hasChannelSelected && drafts[this.state.selectedChannel.dmId]) {
|
|
this.props.sendDirectMessage(this.state.selectedChannel.recipient, drafts[this.state.selectedChannel.dmId]);
|
|
drafts[this.state.selectedChannel.dmId] = null;
|
|
this.setState({
|
|
drafts
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { classes, user: { credentials: { dmEnabled } } } = this.props;
|
|
const loadingDirectMessages = this.props.UI.loading2;
|
|
const creatingDirectMessage = this.props.UI.loading3;
|
|
const sendingDirectMessage = this.props.UI.loading4;
|
|
let errors = this.props.UI.errors ? this.props.UI.errors : {};
|
|
dayjs.extend(relativeTime);
|
|
|
|
// Used for the add button on the dmList
|
|
const open = Boolean(this.state.anchorEl);
|
|
const id = open ? 'simple-popover' : undefined;
|
|
|
|
let dmListMarkup = this.state.dmData ? (
|
|
this.state.dmData.map((channel) => (
|
|
<Card
|
|
onClick={this.handleClickChannel}
|
|
key={channel.dmId}
|
|
data-key={channel.dmId}
|
|
className={
|
|
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? classes.dmCardSelected : classes.dmCardUnselected
|
|
}
|
|
>
|
|
<Box className={classes.dmListItemContainer}>
|
|
<Grid container direction="column" className={classes.dmListLayoutContainer} spacing={1}>
|
|
<Grid item>
|
|
<Grid container className={classes.dmListTextLayout}>
|
|
<Grid item sm />
|
|
<Grid item sm>
|
|
<Typography
|
|
className={
|
|
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
|
|
classes.dmItemUsernameSelected
|
|
) : (
|
|
classes.dmItemUsernameUnselected
|
|
)
|
|
}
|
|
>
|
|
{channel.recipient}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item sm>
|
|
<Typography
|
|
className={
|
|
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
|
|
classes.dmItemTimeSelected
|
|
) : (
|
|
classes.dmItemTimeUnselected
|
|
)
|
|
}
|
|
>
|
|
{channel.recentMessageTimestamp ? (
|
|
this.formatDateToTimeDiff(channel.recentMessageTimestamp)
|
|
) : null}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item className={classes.dmListRecentMessage}>
|
|
<Typography
|
|
className={
|
|
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
|
|
channel.hasDirectMessagesEnabled ?
|
|
classes.dmRecentMessageSelected
|
|
:
|
|
classes.dmRecentMessageDisabled
|
|
) : (
|
|
channel.hasDirectMessagesEnabled ?
|
|
classes.dmRecentMessageUnselected
|
|
:
|
|
classes.dmRecentMessageDisabled
|
|
)
|
|
}
|
|
>
|
|
{!channel.hasDirectMessagesEnabled ? "This user has DMs disabled" :
|
|
!channel.recentMessage ?
|
|
'No messages'
|
|
:
|
|
channel.recentMessage.length > 65 ?
|
|
this.shortenText(channel.recentMessage, 65)
|
|
:
|
|
channel.recentMessage
|
|
}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<p>You don't have any DMs yet</p>
|
|
)
|
|
|
|
let messagesMarkup =
|
|
this.state.selectedChannel !== null ? this.state.selectedChannel.messages.length > 0 ? (
|
|
this.state.selectedChannel.messages.map((messageObj) => (
|
|
<Grid item key={messageObj.messageId}>
|
|
<Card
|
|
className={
|
|
messageObj.author === this.state.selectedChannel.recipient ? (
|
|
classes.toMessage
|
|
) : (
|
|
classes.fromMessage
|
|
)
|
|
}
|
|
>
|
|
<Typography className={classes.messageContent}>{messageObj.message}</Typography>
|
|
<Typography className={classes.messageTime}>
|
|
{this.formatDateToString(messageObj.createdAt)}
|
|
</Typography>
|
|
</Card>
|
|
</Grid>
|
|
))
|
|
) : (
|
|
<p>No DMs here</p>
|
|
) : (
|
|
<p>Select a DM channel</p>
|
|
);
|
|
|
|
let addDMMarkup = (
|
|
<div>
|
|
<AddCircleIcon
|
|
style={{
|
|
color: '#1da1f2',
|
|
height: 82,
|
|
width: 82,
|
|
marginTop: 9,
|
|
cursor: 'pointer'
|
|
}}
|
|
aria-describedby={id}
|
|
onClick={this.handleOpenAddDMPopover}
|
|
/>
|
|
<Popover
|
|
id={id}
|
|
open={open}
|
|
anchorEl={this.state.anchorEl}
|
|
onClose={this.handleCloseAddDMPopover}
|
|
anchorOrigin={{
|
|
vertical: 'center',
|
|
horizontal: 'center'
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'center'
|
|
}}
|
|
>
|
|
<Box
|
|
style={{
|
|
height: 200,
|
|
width: 400
|
|
}}
|
|
>
|
|
<Grid container>
|
|
<Grid item sm />
|
|
<Grid item style={{ height: 200, width: 285 }}>
|
|
<Grid container direction="column" spacing={2}>
|
|
<Grid item>
|
|
<Typography style={{ marginTop: 15 }}>
|
|
Who would you like to start a DM with?
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
<TextField
|
|
onChange={this.handleChangeAddDMUsername}
|
|
value={this.state.createDMUsername}
|
|
label="Username"
|
|
variant="outlined"
|
|
helperText={errors.createDirectMessage}
|
|
error={errors.createDirectMessage ? true : false}
|
|
style={{
|
|
width: 265,
|
|
marginRight: 10,
|
|
marginLeft: 10,
|
|
textAlign: 'center',
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item>
|
|
<Button
|
|
className={classes.createButton}
|
|
variant="outlined"
|
|
color="primary"
|
|
onClick={this.handleClickCreate}
|
|
disabled={
|
|
creatingDirectMessage ||
|
|
this.state.createDMUsername === ""
|
|
}
|
|
>
|
|
Create
|
|
{creatingDirectMessage &&
|
|
// Won't accept classes style for some reason
|
|
<CircularProgress size={30} style={{position: "absolute"}}/>
|
|
}
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item sm />
|
|
</Grid>
|
|
</Box>
|
|
</Popover>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
loadingDirectMessages ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
|
|
(dmEnabled !== undefined && dmEnabled !== null && !dmEnabled ? <Typography>Oops! It looks like you have DMs disabled. You can enable them on the Edit Profile page.</Typography> :
|
|
<Grid container className={classes.pageContainer}>
|
|
<Grid item className={classes.sidePadding} sm />
|
|
<Grid item className={classes.dmList}>
|
|
<Grid container direction="column">
|
|
<Grid item className={classes.dmItemsUpper} id="dmItemsUpper">
|
|
{dmListMarkup}
|
|
</Grid>
|
|
<Grid item className={classes.dmItemsLower}>
|
|
<Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
|
|
<Box className={classes.dmListItemContainer}>
|
|
{addDMMarkup}
|
|
</Box>
|
|
</Card>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item className={classes.messagesGrid} sm>
|
|
<Box>
|
|
{this.state.hasChannelSelected && (
|
|
<Card className={classes.messagesBox}>
|
|
<Box className={classes.messagesContainer} id="messagesContainer">
|
|
<Grid container direction="column">
|
|
{messagesMarkup}
|
|
</Grid>
|
|
</Box>
|
|
<Box className={classes.writeMessage}>
|
|
<TextField
|
|
className={classes.messageTextField}
|
|
variant="outlined"
|
|
multiline
|
|
rows={2}
|
|
margin="dense"
|
|
disabled={!this.state.selectedChannel.hasDirectMessagesEnabled}
|
|
value={
|
|
!this.state.selectedChannel.hasDirectMessagesEnabled ?
|
|
"This user has DMs disabled"
|
|
:
|
|
this.state.drafts[this.state.selectedChannel.dmId] ?
|
|
this.state.drafts[this.state.selectedChannel.dmId]
|
|
:
|
|
""
|
|
}
|
|
onChange={this.handleChangeMessage}
|
|
/>
|
|
<Fab
|
|
className={classes.messageButton}
|
|
onClick={this.handleClickSend}
|
|
disabled={
|
|
sendingDirectMessage ||
|
|
!this.state.drafts[this.state.selectedChannel.dmId] ||
|
|
this.state.drafts[this.state.selectedChannel.dmId] === ""
|
|
}
|
|
>
|
|
<SendIcon style={{ color: '#FFFFFF' }} />
|
|
{
|
|
sendingDirectMessage &&
|
|
<CircularProgress size={30} style={{position: "absolute"}}/>
|
|
// Won't accept classes style for some reason
|
|
}
|
|
</Fab>
|
|
</Box>
|
|
</Card>
|
|
)}
|
|
{!this.state.hasChannelSelected &&
|
|
this.state.dmData && <Typography>Select a DM on the left</Typography>}
|
|
</Box>
|
|
</Grid>
|
|
<Grid item className={classes.sidePadding} sm />
|
|
</Grid>
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
directMessages.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
getDirectMessages: PropTypes.func.isRequired,
|
|
createNewDirectMessage: PropTypes.func.isRequired,
|
|
getNewDirectMessages: PropTypes.func.isRequired,
|
|
reloadDirectMessageChannels: PropTypes.func.isRequired,
|
|
sendDirectMessage: PropTypes.func.isRequired,
|
|
user: PropTypes.object.isRequired,
|
|
UI: PropTypes.object.isRequired
|
|
};
|
|
|
|
const mapStateToProps = (state) => ({
|
|
user: state.user,
|
|
UI: state.UI,
|
|
directMessages: state.data.directMessages
|
|
});
|
|
|
|
const mapActionsToProps = {
|
|
getDirectMessages,
|
|
createNewDirectMessage,
|
|
getNewDirectMessages,
|
|
reloadDirectMessageChannels,
|
|
sendDirectMessage
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages));
|