ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2025-12-15 18:08:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Direct Messages sending DMs

Browse Source
This commit is contained in:
Clayton Wilson 2019-11-22 16:44:53 -05:00
parent e06cc614cb
commit 331509da7f
3 changed files with 116 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
twistter-frontend/package.json
View File

@ -10,6 +10,7 @@
"axios": "^0.19.0",
"clsx": "^1.0.4",
"create-react-app": "^3.1.2",
"dayjs": "^1.8.17",
"install": "^0.13.0",
"jwt-decode": "^2.2.0",
"node-pre-gyp": "^0.13.0",

73
twistter-frontend/src/pages/directMessages.js
View File

@ -23,7 +23,13 @@ import SendIcon from '@material-ui/icons/Send';
// Redux
import { connect } from 'react-redux';
import { getDirectMessages, createNewDirectMessage, getNewDirectMessages, reloadDirectMessageChannels } from '../redux/actions/dataActions';
import {
getDirectMessages,
createNewDirectMessage,
getNewDirectMessages,
reloadDirectMessageChannels,
sendDirectMessage
} from '../redux/actions/dataActions';
const styles = {
pageContainer: {
@ -185,6 +191,8 @@ export class directMessages extends Component {
anchorEl: null,
createDMUsername: '',
usernameValid: false,
// message: '',
drafts: {},
errors: null
};
}
@ -205,7 +213,17 @@ export class directMessages extends Component {
// Updates the state whenever redux is updated
componentWillReceiveProps(nextProps) {
if (nextProps.directMessages) {
this.setState({ dmData: nextProps.directMessages});
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
});
}
});
}
});
}
}
@ -290,6 +308,26 @@ export class directMessages extends Component {
})
}
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 } = this.props;
const loadingDirectMessages = this.props.UI.loading2;
@ -309,7 +347,7 @@ export class directMessages extends Component {
key={channel.dmId}
data-key={channel.dmId}
className={
this.state.selectedChannel === channel ? classes.dmCardSelected : classes.dmCardUnselected
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? classes.dmCardSelected : classes.dmCardUnselected
}
>
<Box className={classes.dmListItemContainer}>
@ -318,7 +356,7 @@ export class directMessages extends Component {
<Grid item sm>
<Typography
className={
this.state.selectedChannel === channel ? (
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
classes.dmItemUsernameSelected
) : (
classes.dmItemUsernameUnselected
@ -329,7 +367,7 @@ export class directMessages extends Component {
</Typography>
<Typography
className={
this.state.selectedChannel === channel ? (
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
classes.dmRecentMessageSelected
) : (
classes.dmRecentMessageUnselected
@ -342,7 +380,7 @@ export class directMessages extends Component {
<Grid item sm>
<Typography
className={
this.state.selectedChannel === channel ? (
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
classes.dmItemTimeSelected
) : (
classes.dmItemTimeUnselected
@ -506,10 +544,25 @@ export class directMessages extends Component {
variant="outlined"
multiline
rows={2}
margin="dense"
margin="dense"
value={this.state.drafts[this.state.selectedChannel.dmId] ? this.state.drafts[this.state.selectedChannel.dmId] : ""}
onChange={this.handleChangeMessage}
/>
<Fab className={classes.messageButton}>
<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>
@ -530,6 +583,7 @@ directMessages.propTypes = {
createNewDirectMessage: PropTypes.func.isRequired,
getNewDirectMessages: PropTypes.func.isRequired,
reloadDirectMessageChannels: PropTypes.func.isRequired,
sendDirectMessage: PropTypes.func.isRequired,
user: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
};
@ -544,7 +598,8 @@ const mapActionsToProps = {
getDirectMessages,
createNewDirectMessage,
getNewDirectMessages,
reloadDirectMessageChannels
reloadDirectMessageChannels,
sendDirectMessage
};
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages));

73
twistter-frontend/src/redux/actions/dataActions.js
View File

@ -59,40 +59,69 @@ export const reloadDirectMessageChannels = () => (dispatch) => {
export const createNewDirectMessage = (username) => (dispatch) => {
return new Promise((resolve, reject) => {
dispatch({type: SET_LOADING_UI_3});
const data = {
user: username
}
// console.log(username);
const data = {
user: username
}
// console.log(username);
axios.post('/dms/new', data)
.then((res) => {
console.log(res.data);
if (res.data.err) {
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: res.data.err
createDirectMessage: err.response.data.error
}
});
dispatch({type: SET_NOT_LOADING_UI_3});
} else {
// dispatch(getNewDirectMessages());
// dispatch({type: SET_NOT_LOADING_UI_3});
}
resolve();
console.log(err.response.data);
reject();
})
});
}
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: {
createDirectMessage: err.response.data.error
sendDirectMessage: err.response.data
}
});
dispatch({type: SET_NOT_LOADING_UI_3});
console.log(err.response.data);
reject();
})
})
});
}