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

Dynamic front-end adding new DM channels

Browse Source
This commit is contained in:
Clayton Wilson 2019-11-20 20:48:49 -05:00
parent 709df1492d
commit e06cc614cb
2 changed files with 102 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,7 @@ import SendIcon from '@material-ui/icons/Send';
// Redux // Redux
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getDirectMessages, checkUsernameValid, createNewDirectMessage } from '../redux/actions/dataActions'; import { getDirectMessages, createNewDirectMessage, getNewDirectMessages, reloadDirectMessageChannels } from '../redux/actions/dataActions';
const styles = { const styles = {
pageContainer: { pageContainer: {
@ -34,11 +34,18 @@ const styles = {
}, },
dmList: { dmList: {
width: 300, width: 300,
marginLeft: 15 marginLeft: 15
},
dmItem: {
marginBottom: 1
}, },
dmItemsUpper: {
marginBottom: 1,
// height: 'calc(100vh - 50px - 142px)',
minHeight: 100,
maxHeight: 'calc(100vh - 50px - 142px)',
overflow: "auto"
},
dmItemsLower: {
},
dmItemUsernameSelected: { dmItemUsernameSelected: {
fontSize: 20, fontSize: 20,
color: 'white' color: 'white'
@ -191,132 +198,27 @@ export class directMessages extends Component {
} }
componentDidMount() { componentDidMount() {
// this.props.getDirectMessages(); this.props.getDirectMessages();
const resp = { // this.updatePage();
"data": [
{
"recipient": "CrazyEddy",
"messages": [
{
"message": "This is message 1",
"createdAt": "2019-11-04T17:10:29.180Z",
"messageId": "yGqcBbDSM8TsoaQAfAVc",
"author": "CrazyEddy"
},
{
"messageId": "c1Bd1REkMBaMaraH10WP",
"author": "keanureeves",
"message": "This is message 2",
"createdAt": "2019-11-04T17:33:35.169Z"
},
{
"messageId": "CL5sThnuekks6579MKuF",
"author": "keanureeves",
"message": "Yo, this my first message",
"createdAt": "2019-11-08T22:15:08.456Z"
},
{
"messageId": "BgMSSlLLLdC1DMtJl5VJ",
"author": "CrazyEddy",
"message": "That is epic",
"createdAt": "2019-11-08T22:20:16.768Z"
},
{
"message": "test test test",
"createdAt": "2019-11-08T22:20:58.961Z",
"messageId": "9AeUuz0l4wWyQSG6RQ4A",
"author": "keanureeves"
},
{
"messageId": "zhfEpirBK7jl9FnFMtsQ",
"author": "CrazyEddy",
"message": "noice",
"createdAt": "2019-11-08T22:21:29.768Z"
},
{
"message": "What time is it?",
"createdAt": "2019-11-08T22:23:27.353Z",
"messageId": "XwyKwFU2L5wrTKedzlyF",
"author": "CrazyEddy"
},
{
"messageId": "qeasHYkAtTGvjnc3VJAi",
"author": "keanureeves",
"message": "it's 5:24 right now",
"createdAt": "2019-11-08T22:24:21.807Z"
},
{
"messageId": "I7kzyLUd9Pp5qzxTPzQv",
"author": "keanureeves",
"message": "a",
"createdAt": "2019-11-08T22:31:42.852Z"
},
{
"messageId": "iySWBDFFrbY8FT6E61NL",
"author": "keanureeves",
"message": "b",
"createdAt": "2019-11-08T22:31:51.558Z"
},
{
"messageId": "Yis0vXSEuMggj6z5Mq1a",
"author": "keanureeves",
"message": "c",
"createdAt": "2019-11-08T22:32:01.293Z"
},
{
"messageId": "DIgjDvFczqO0OWkOrL0t",
"author": "keanureeves",
"message": "d",
"createdAt": "2019-11-08T22:32:16.095Z"
},
{
"messageId": "6h1dnFE440MOrjySEQHU",
"author": "keanureeves",
"message": "e",
"createdAt": "2019-11-08T22:32:22.134Z"
},
{
"messageId": "lmOGGYUWZyB3xG38T7lG",
"author": "keanureeves",
"message": "f",
"createdAt": "2019-11-08T22:32:28.424Z"
},
{
"messageId": "64swTj7yiFy7SF6BPbki",
"author": "keanureeves",
"message": "g",
"createdAt": "2019-11-08T22:32:37.632Z"
}
],
"recentMessage": "g",
"recentMessageTimestamp": "2019-11-08T22:32:37.632Z",
"dmId": "avGcIs4PFCJhc4EDqAfe"
},
{
"recipient": "batman",
"messages": [],
"recentMessage": null,
"recentMessageTimestamp": null,
"dmId": "Lifb0XAONpNLJRhDnOHj"
},
{
"recipient": "katherine",
"messages": [],
"recentMessage": null,
"recentMessageTimestamp": null,
"dmId": "QBMonxPTbha0uJc7P73R"
}
]
}
// const resp = {"data": null}
this.setState({ dmData: resp.data });
} }
// componentWillReceiveProps(nextProps) { // Updates the state whenever redux is updated
// if (nextProps.data.dmData) { componentWillReceiveProps(nextProps) {
// this.setState({ dmData: nextProps.data.dmData }); if (nextProps.directMessages) {
// } this.setState({ dmData: nextProps.directMessages});
// } }
}
updatePage = async() => {
while (true) {
await this.sleep(15000);
this.props.getNewDirectMessages();
}
}
sleep = (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
}
// Handles selecting different DM channels // Handles selecting different DM channels
handleClickChannel = (event) => { handleClickChannel = (event) => {
@ -375,7 +277,17 @@ export class directMessages extends Component {
}; };
handleClickCreate = () => { handleClickCreate = () => {
this.props.createNewDirectMessage(this.state.createDMUsername); this.props.createNewDirectMessage(this.state.createDMUsername)
.then(() => {
return this.props.reloadDirectMessageChannels();
})
.then(() => {
this.handleCloseAddDMPopover();
return;
})
.catch(() => {
return;
})
} }
render() { render() {
@ -390,7 +302,7 @@ export class directMessages extends Component {
const open = Boolean(this.state.anchorEl); const open = Boolean(this.state.anchorEl);
const id = open ? 'simple-popover' : undefined; const id = open ? 'simple-popover' : undefined;
let dmListMarkup = this.state.dmData ? ( let dmListMarkup = this.state.dmData ? (
this.state.dmData.map((channel) => ( this.state.dmData.map((channel) => (
<Card <Card
onClick={this.handleClickChannel} onClick={this.handleClickChannel}
@ -448,7 +360,7 @@ export class directMessages extends Component {
)) ))
) : ( ) : (
<p>You don't have any DMs yet</p> <p>You don't have any DMs yet</p>
); )
let messagesMarkup = let messagesMarkup =
this.state.selectedChannel !== null ? this.state.selectedChannel.messages.length > 0 ? ( this.state.selectedChannel !== null ? this.state.selectedChannel.messages.length > 0 ? (
@ -562,18 +474,21 @@ export class directMessages extends Component {
); );
return ( return (
loadingDirectMessages ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
<Grid container className={classes.pageContainer}> <Grid container className={classes.pageContainer}>
<Grid item className={classes.sidePadding} sm /> <Grid item className={classes.sidePadding} sm />
<Grid item className={classes.dmList}> <Grid item className={classes.dmList}>
<Grid container direction="column"> <Grid container direction="column">
<Grid item className={classes.dmItem}> <Grid item className={classes.dmItemsUpper}>
{dmListMarkup} {dmListMarkup}
<Card key="5555" data-key="5555" className={classes.dmCardUnselected}> </Grid>
<Grid item className={classes.dmItemsLower}>
<Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
<Box className={classes.dmListItemContainer}> <Box className={classes.dmListItemContainer}>
{addDMMarkup} {addDMMarkup}
</Box> </Box>
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item className={classes.messagesGrid} sm> <Grid item className={classes.messagesGrid} sm>
@ -599,7 +514,7 @@ export class directMessages extends Component {
</Box> </Box>
</Card> </Card>
)} )}
{!this.state.hasChannelSelected && {!this.state.hasChannelSelected &&
this.state.dmData && <Typography>Select a DM on the left</Typography>} this.state.dmData && <Typography>Select a DM on the left</Typography>}
</Box> </Box>
</Grid> </Grid>
@ -613,6 +528,8 @@ directMessages.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
getDirectMessages: PropTypes.func.isRequired, getDirectMessages: PropTypes.func.isRequired,
createNewDirectMessage: PropTypes.func.isRequired, createNewDirectMessage: PropTypes.func.isRequired,
getNewDirectMessages: PropTypes.func.isRequired,
reloadDirectMessageChannels: PropTypes.func.isRequired,
user: PropTypes.object.isRequired, user: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired UI: PropTypes.object.isRequired
}; };
@ -620,12 +537,14 @@ directMessages.propTypes = {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
user: state.user, user: state.user,
UI: state.UI, UI: state.UI,
directMessages: state.directMessages directMessages: state.data.directMessages
}); });
const mapActionsToProps = { const mapActionsToProps = {
getDirectMessages, getDirectMessages,
createNewDirectMessage createNewDirectMessage,
getNewDirectMessages,
reloadDirectMessageChannels
}; };
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages)); export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages));

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

@ -13,19 +13,52 @@ import {
import axios from "axios"; import axios from "axios";
export const getDirectMessages = () => (dispatch) => { export const getDirectMessages = () => (dispatch) => {
dispatch({type: LOADING_UI}); dispatch({type: SET_LOADING_UI_2});
axios.get('/dms') axios.get('/dms')
.then((res) => { .then((res) => {
dispatch({ dispatch({
type: SET_DIRECT_MESSAGES, type: SET_DIRECT_MESSAGES,
payload: res.data.data payload: res.data.data
}); });
dispatch({type: SET_NOT_LOADING_UI_2});
dispatch({type: CLEAR_ERRORS}); dispatch({type: CLEAR_ERRORS});
}) })
} }
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();
})
})
}
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();
})
})
}
export const createNewDirectMessage = (username) => (dispatch) => { export const createNewDirectMessage = (username) => (dispatch) => {
dispatch({type: SET_LOADING_UI_3}); return new Promise((resolve, reject) => {
dispatch({type: SET_LOADING_UI_3});
const data = { const data = {
user: username user: username
} }
@ -41,17 +74,25 @@ export const createNewDirectMessage = (username) => (dispatch) => {
createDirectMessage: res.data.err createDirectMessage: res.data.err
} }
}); });
dispatch({type: SET_NOT_LOADING_UI_3});
} else {
// dispatch(getNewDirectMessages());
// dispatch({type: SET_NOT_LOADING_UI_3});
} }
dispatch({type: SET_NOT_LOADING_UI_3}); resolve();
}) })
.catch((err) => { .catch((err) => {
dispatch({ dispatch({
type: SET_ERRORS, type: SET_ERRORS,
payload: { payload: {
createDirectMessage: err.response.data.err createDirectMessage: err.response.data.error
} }
}); });
dispatch({type: SET_NOT_LOADING_UI_3}); dispatch({type: SET_NOT_LOADING_UI_3});
console.log(err.response.data); console.log(err.response.data);
reject();
}) })
});
} }