mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-16 02:08:47 +00:00
Dynamic front-end adding new DM channels
This commit is contained in:
parent
709df1492d
commit
e06cc614cb
@ -23,7 +23,7 @@ import SendIcon from '@material-ui/icons/Send';
|
||||
|
||||
// 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 = {
|
||||
pageContainer: {
|
||||
@ -36,8 +36,15 @@ const styles = {
|
||||
width: 300,
|
||||
marginLeft: 15
|
||||
},
|
||||
dmItem: {
|
||||
marginBottom: 1
|
||||
dmItemsUpper: {
|
||||
marginBottom: 1,
|
||||
// height: 'calc(100vh - 50px - 142px)',
|
||||
minHeight: 100,
|
||||
maxHeight: 'calc(100vh - 50px - 142px)',
|
||||
overflow: "auto"
|
||||
},
|
||||
dmItemsLower: {
|
||||
|
||||
},
|
||||
dmItemUsernameSelected: {
|
||||
fontSize: 20,
|
||||
@ -191,132 +198,27 @@ export class directMessages extends Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// this.props.getDirectMessages();
|
||||
const resp = {
|
||||
"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 });
|
||||
this.props.getDirectMessages();
|
||||
// this.updatePage();
|
||||
}
|
||||
|
||||
// componentWillReceiveProps(nextProps) {
|
||||
// if (nextProps.data.dmData) {
|
||||
// this.setState({ dmData: nextProps.data.dmData });
|
||||
// }
|
||||
// }
|
||||
// Updates the state whenever redux is updated
|
||||
componentWillReceiveProps(nextProps) {
|
||||
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
|
||||
handleClickChannel = (event) => {
|
||||
@ -375,7 +277,17 @@ export class directMessages extends Component {
|
||||
};
|
||||
|
||||
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() {
|
||||
@ -448,7 +360,7 @@ export class directMessages extends Component {
|
||||
))
|
||||
) : (
|
||||
<p>You don't have any DMs yet</p>
|
||||
);
|
||||
)
|
||||
|
||||
let messagesMarkup =
|
||||
this.state.selectedChannel !== null ? this.state.selectedChannel.messages.length > 0 ? (
|
||||
@ -562,12 +474,15 @@ export class directMessages extends Component {
|
||||
);
|
||||
|
||||
return (
|
||||
loadingDirectMessages ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
|
||||
<Grid container className={classes.pageContainer}>
|
||||
<Grid item className={classes.sidePadding} sm />
|
||||
<Grid item className={classes.dmList}>
|
||||
<Grid container direction="column">
|
||||
<Grid item className={classes.dmItem}>
|
||||
<Grid item className={classes.dmItemsUpper}>
|
||||
{dmListMarkup}
|
||||
</Grid>
|
||||
<Grid item className={classes.dmItemsLower}>
|
||||
<Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
|
||||
<Box className={classes.dmListItemContainer}>
|
||||
{addDMMarkup}
|
||||
@ -613,6 +528,8 @@ directMessages.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
getDirectMessages: PropTypes.func.isRequired,
|
||||
createNewDirectMessage: PropTypes.func.isRequired,
|
||||
getNewDirectMessages: PropTypes.func.isRequired,
|
||||
reloadDirectMessageChannels: PropTypes.func.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
UI: PropTypes.object.isRequired
|
||||
};
|
||||
@ -620,12 +537,14 @@ directMessages.propTypes = {
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user,
|
||||
UI: state.UI,
|
||||
directMessages: state.directMessages
|
||||
directMessages: state.data.directMessages
|
||||
});
|
||||
|
||||
const mapActionsToProps = {
|
||||
getDirectMessages,
|
||||
createNewDirectMessage
|
||||
createNewDirectMessage,
|
||||
getNewDirectMessages,
|
||||
reloadDirectMessageChannels
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages));
|
||||
|
||||
@ -13,18 +13,51 @@ import {
|
||||
import axios from "axios";
|
||||
|
||||
export const getDirectMessages = () => (dispatch) => {
|
||||
dispatch({type: LOADING_UI});
|
||||
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});
|
||||
})
|
||||
}
|
||||
|
||||
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) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
dispatch({type: SET_LOADING_UI_3});
|
||||
const data = {
|
||||
user: username
|
||||
@ -41,17 +74,25 @@ export const createNewDirectMessage = (username) => (dispatch) => {
|
||||
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.err
|
||||
createDirectMessage: err.response.data.error
|
||||
}
|
||||
});
|
||||
dispatch({type: SET_NOT_LOADING_UI_3});
|
||||
console.log(err.response.data);
|
||||
reject();
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user