mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2026-03-10 13:15:05 +00:00
GitHub
@@ -10,6 +10,7 @@
|
||||
"axios": "^0.19.0",
|
||||
"clsx": "^1.0.4",
|
||||
"create-react-app": "^3.1.2",
|
||||
"dayjs": "^1.8.17",
|
||||
"fuse.js": "^3.4.6",
|
||||
"install": "^0.13.0",
|
||||
"jwt-decode": "^2.2.0",
|
||||
@@ -22,7 +23,8 @@
|
||||
"react-scripts": "0.9.5",
|
||||
"redux": "^4.0.4",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"typeface-roboto": "0.0.75"
|
||||
"typeface-roboto": "0.0.75",
|
||||
"underscore": "^1.9.1"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
|
||||
@@ -31,6 +31,7 @@ import editProfile from "./pages/editProfile";
|
||||
import userLine from "./Userline.js";
|
||||
import verify from "./pages/verify";
|
||||
import Search from "./pages/Search.js";
|
||||
import directMessages from "./pages/directMessages";
|
||||
import otherUser from "./pages/otherUser";
|
||||
|
||||
const theme = createMuiTheme(themeObject);
|
||||
@@ -62,7 +63,7 @@ class App extends Component {
|
||||
<div className="container">
|
||||
<Navbar />
|
||||
</div>
|
||||
<div className="app">
|
||||
<div className="app" style={{height: "700"}}>
|
||||
<Switch>
|
||||
{/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
|
||||
<AuthRoute exact path="/signup" component={signup} />
|
||||
@@ -77,6 +78,7 @@ class App extends Component {
|
||||
<Route exact path="/user/edit" component={editProfile} />
|
||||
<Route exact path="/verify" component={verify} />
|
||||
<Route exact path="/search" component={Search} />
|
||||
<Route exact path="/dm" component={directMessages} />
|
||||
<Route exact path="/user/:userhandle" component={otherUser} />
|
||||
|
||||
<AuthRoute exact path="/" component={home} />
|
||||
|
||||
@@ -46,6 +46,11 @@ export class Navbar extends Component {
|
||||
Profile
|
||||
</Button>
|
||||
)}
|
||||
{authenticated && (
|
||||
<Button component={Link} to="/dm">
|
||||
DMs
|
||||
</Button>
|
||||
)}
|
||||
{!authenticated && (
|
||||
<Button component={Link} to="/login">
|
||||
Login
|
||||
@@ -62,7 +67,7 @@ export class Navbar extends Component {
|
||||
</Button>
|
||||
)}
|
||||
{authenticated && (
|
||||
<Button component={Link} to="/logout">
|
||||
<Button style={{position: "absolute", right: 30}} component={Link} to="/logout">
|
||||
Logout
|
||||
</Button>
|
||||
)}
|
||||
|
||||
658
twistter-frontend/src/pages/directMessages.js
Normal file
658
twistter-frontend/src/pages/directMessages.js
Normal file
@@ -0,0 +1,658 @@
|
||||
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'
|
||||
},
|
||||
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 ? (
|
||||
classes.dmRecentMessageSelected
|
||||
) : (
|
||||
classes.dmRecentMessageUnselected
|
||||
)
|
||||
}
|
||||
>
|
||||
{
|
||||
!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 &&
|
||||
<CircularProgress size={30} style={{position: "absolute"}}/>
|
||||
// Won't accept classes style for some reason
|
||||
}
|
||||
</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"
|
||||
value={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));
|
||||
@@ -14,6 +14,8 @@ 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";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import Switch from "@material-ui/core/Switch";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import EditIcon from "@material-ui/icons/Edit";
|
||||
import Tooltip from "@material-ui/core/Tooltip";
|
||||
@@ -99,6 +101,7 @@ export class editProfile extends Component {
|
||||
email: res.data.email,
|
||||
handle: res.data.handle,
|
||||
bio: res.data.bio ? res.data.bio : "",
|
||||
dmEnabled: res.data.dmEnabled === false ? false : true,
|
||||
pageLoading: false
|
||||
});
|
||||
})
|
||||
@@ -121,6 +124,8 @@ export class editProfile extends Component {
|
||||
email: "",
|
||||
handle: "",
|
||||
bio: "",
|
||||
dmEnabled: false,
|
||||
togglingDirectMessages: false,
|
||||
anchorEl: null,
|
||||
loading: false,
|
||||
pageLoading: false,
|
||||
@@ -183,6 +188,28 @@ export class editProfile extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
handleDMSwitch = () => {
|
||||
let enable;
|
||||
|
||||
if (this.state.dmEnabled) {
|
||||
enable = {enable: false};
|
||||
} else {
|
||||
enable = {enable: true};
|
||||
}
|
||||
|
||||
this.setState({
|
||||
dmEnabled: enable.enable,
|
||||
togglingDirectMessages: true
|
||||
});
|
||||
|
||||
axios.post("/dms/toggle", enable)
|
||||
.then(() => {
|
||||
this.setState({
|
||||
togglingDirectMessages: false
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
handleImageChange = (event) => {
|
||||
if (event.target.files[0]) {
|
||||
const image = event.target.files[0];
|
||||
@@ -222,7 +249,6 @@ export class editProfile extends Component {
|
||||
const uploading = this.props.UI.loading;
|
||||
const { errors, loading } = this.state;
|
||||
|
||||
// <<<<<<< edit-profile-image-upload
|
||||
|
||||
let imageMarkup = this.props.user.credentials.imageUrl ? (
|
||||
<Box
|
||||
@@ -364,6 +390,18 @@ export class editProfile extends Component {
|
||||
fullWidth
|
||||
autoComplete='off'
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
color="primary"
|
||||
disabled={this.state.togglingDirectMessages}
|
||||
checked={this.state.dmEnabled}
|
||||
onChange={this.handleDMSwitch}
|
||||
/>
|
||||
}
|
||||
label="Enable Direct Messages"
|
||||
/>
|
||||
<br></br>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
@@ -453,6 +491,7 @@ export class editProfile extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user,
|
||||
UI: state.UI,
|
||||
@@ -463,7 +502,9 @@ const mapActionsToProps = { uploadImage }
|
||||
|
||||
editProfile.propTypes = {
|
||||
uploadImage: PropTypes.func.isRequired,
|
||||
classes: PropTypes.object.isRequired
|
||||
classes: PropTypes.object.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
UI: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
// export default withStyles(styles)(edit);
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
import {
|
||||
SET_DIRECT_MESSAGES,
|
||||
LOADING_UI,
|
||||
SET_ERRORS,
|
||||
CLEAR_ERRORS,
|
||||
SET_LOADING_UI_2,
|
||||
SET_LOADING_UI_3,
|
||||
SET_LOADING_UI_4,
|
||||
SET_NOT_LOADING_UI_2,
|
||||
SET_NOT_LOADING_UI_3,
|
||||
SET_NOT_LOADING_UI_4
|
||||
} from '../types';
|
||||
import axios from "axios";
|
||||
|
||||
// TODO: Tidy up these functions. They shouldn't have all these promises in them.
|
||||
|
||||
export const getDirectMessages = () => (dispatch) => {
|
||||
dispatch({type: SET_LOADING_UI_2});
|
||||
axios.get('/dms')
|
||||
.then((res) => {
|
||||
dispatch({
|
||||
type: SET_DIRECT_MESSAGES,
|
||||
payload: res.data.data
|
||||
});
|
||||
dispatch({type: SET_NOT_LOADING_UI_2});
|
||||
dispatch({type: CLEAR_ERRORS});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
dispatch({
|
||||
type: SET_ERRORS,
|
||||
payload: {
|
||||
errors: err.response.data.error
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
export const getNewDirectMessages = () => (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get('/dms')
|
||||
.then((res) => {
|
||||
dispatch({
|
||||
type: SET_DIRECT_MESSAGES,
|
||||
payload: res.data.data
|
||||
});
|
||||
dispatch({type: SET_NOT_LOADING_UI_2});
|
||||
dispatch({type: CLEAR_ERRORS});
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const reloadDirectMessageChannels = () => (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get('/dms')
|
||||
.then((res) => {
|
||||
dispatch({
|
||||
type: SET_DIRECT_MESSAGES,
|
||||
payload: res.data.data
|
||||
});
|
||||
dispatch({type: SET_NOT_LOADING_UI_3});
|
||||
dispatch({type: CLEAR_ERRORS});
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
export const createNewDirectMessage = (username) => (dispatch) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
dispatch({type: SET_LOADING_UI_3});
|
||||
const data = {
|
||||
user: username
|
||||
}
|
||||
// console.log(username);
|
||||
|
||||
axios.post('/dms/new', data)
|
||||
.then((res) => {
|
||||
// console.log(res.data);
|
||||
if (res.data.err) {
|
||||
dispatch({
|
||||
type: SET_ERRORS,
|
||||
payload: {
|
||||
createDirectMessage: res.data.err
|
||||
}
|
||||
});
|
||||
dispatch({type: SET_NOT_LOADING_UI_3});
|
||||
} else {
|
||||
// dispatch(getNewDirectMessages());
|
||||
// dispatch({type: SET_NOT_LOADING_UI_3});
|
||||
}
|
||||
resolve();
|
||||
})
|
||||
.catch((err) => {
|
||||
dispatch({
|
||||
type: SET_ERRORS,
|
||||
payload: {
|
||||
createDirectMessage: err.response.data.error
|
||||
}
|
||||
});
|
||||
dispatch({type: SET_NOT_LOADING_UI_3});
|
||||
console.log(err.response.data);
|
||||
reject(err);
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export const sendDirectMessage = (user, message) => (dispatch) => {
|
||||
dispatch({type: SET_LOADING_UI_4});
|
||||
const data = {
|
||||
message,
|
||||
user
|
||||
};
|
||||
|
||||
axios.post('/dms/send', data)
|
||||
.then((res) => {
|
||||
// console.log(res);
|
||||
return axios.get('/dms')
|
||||
})
|
||||
.then((res) => {
|
||||
dispatch({
|
||||
type: SET_DIRECT_MESSAGES,
|
||||
payload: res.data.data
|
||||
});
|
||||
dispatch({type: SET_NOT_LOADING_UI_4});
|
||||
dispatch({type: CLEAR_ERRORS});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
dispatch({
|
||||
type: SET_ERRORS,
|
||||
payload: {
|
||||
sendDirectMessage: err.response.data
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import {SET_DIRECT_MESSAGES, SET_USERNAME_VALID, SET_USERNAME_INVALID} from '../types';
|
||||
|
||||
const initialState = {
|
||||
directMessages: null,
|
||||
};
|
||||
|
||||
export default function(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case SET_DIRECT_MESSAGES:
|
||||
return {
|
||||
...state,
|
||||
directMessages: action.payload
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,20 @@
|
||||
import { SET_ERRORS, CLEAR_ERRORS, LOADING_UI } from '../types';
|
||||
import {
|
||||
SET_ERRORS,
|
||||
CLEAR_ERRORS,
|
||||
LOADING_UI,
|
||||
SET_LOADING_UI_2,
|
||||
SET_LOADING_UI_3,
|
||||
SET_LOADING_UI_4,
|
||||
SET_NOT_LOADING_UI_2,
|
||||
SET_NOT_LOADING_UI_3,
|
||||
SET_NOT_LOADING_UI_4
|
||||
} from '../types';
|
||||
|
||||
const initialState = {
|
||||
loading: false,
|
||||
loading2: false,
|
||||
loading3: false,
|
||||
loading4: false,
|
||||
errors: null
|
||||
};
|
||||
|
||||
@@ -24,6 +37,36 @@ export default function(state = initialState, action) {
|
||||
...state,
|
||||
loading: true
|
||||
};
|
||||
case SET_LOADING_UI_2:
|
||||
return {
|
||||
...state,
|
||||
loading2: true
|
||||
};
|
||||
case SET_LOADING_UI_3:
|
||||
return {
|
||||
...state,
|
||||
loading3: true
|
||||
};
|
||||
case SET_LOADING_UI_4:
|
||||
return {
|
||||
...state,
|
||||
loading4: true
|
||||
};
|
||||
case SET_NOT_LOADING_UI_2:
|
||||
return {
|
||||
...state,
|
||||
loading2: false
|
||||
};
|
||||
case SET_NOT_LOADING_UI_3:
|
||||
return {
|
||||
...state,
|
||||
loading3: false
|
||||
};
|
||||
case SET_NOT_LOADING_UI_4:
|
||||
return {
|
||||
...state,
|
||||
loading4: false
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
@@ -10,6 +10,15 @@ export const SET_LIKES = 'SET_LIKES';
|
||||
// UI reducer types
|
||||
export const SET_ERRORS = 'SET_ERRORS';
|
||||
export const LOADING_UI = 'LOADING_UI';
|
||||
export const SET_LOADING_UI_2 = 'SET_LOADING_UI_2';
|
||||
export const SET_LOADING_UI_3 = 'SET_LOADING_UI_3';
|
||||
export const SET_LOADING_UI_4 = 'SET_LOADING_UI_4';
|
||||
export const SET_NOT_LOADING_UI_2 = 'SET_NOT_LOADING_UI_2';
|
||||
export const SET_NOT_LOADING_UI_3 = 'SET_NOT_LOADING_UI_3';
|
||||
export const SET_NOT_LOADING_UI_4 = 'SET_NOT_LOADING_UI_4';
|
||||
export const CLEAR_ERRORS = 'CLEAR_ERRORS';
|
||||
|
||||
// Data reducer types
|
||||
// Data reducer types
|
||||
export const SET_DIRECT_MESSAGES = 'SET_DIRECT_MESSAGES';
|
||||
export const SET_USERNAME_VALID = 'SET_USERNAME_VALID';
|
||||
export const SET_USERNAME_INVALID = 'SET_USERNAME_INVALID';
|
||||
Reference in New Issue
Block a user