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

Direct Messages can use redux for creating new DM channels

Browse Source
This commit is contained in:
Clayton Wilson 2019-11-19 19:04:25 -05:00
parent 297619cacb
commit 3d9266778d
6 changed files with 314 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
twistter-frontend/src/App.js
View File

@ -33,6 +33,7 @@ import editProfile from "./pages/editProfile";
import userLine from "./Userline.js"; import userLine from "./Userline.js";
import verify from "./pages/verify"; import verify from "./pages/verify";
import Search from "./pages/Search.js"; import Search from "./pages/Search.js";
import directMessages from "./pages/directMessages";
const theme = createMuiTheme(themeObject); const theme = createMuiTheme(themeObject);
@ -63,7 +64,7 @@ class App extends Component {
<div className="container"> <div className="container">
<Navbar /> <Navbar />
</div> </div>
<div className="app"> <div className="app" style={{height: "700"}}>
<Switch> <Switch>
{/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */} {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
@ -79,6 +80,7 @@ class App extends Component {
<Route exact path="/edit" component={editProfile} /> <Route exact path="/edit" component={editProfile} />
<Route exact path="/verify" component={verify}/> <Route exact path="/verify" component={verify}/>
<Route exact path="/search" component={Search} /> <Route exact path="/search" component={Search} />
<Route exact path="/dm" component={directMessages} />
<AuthRoute exact path="/" component={home} /> <AuthRoute exact path="/" component={home} />

322
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 } from '../redux/actions/dataActions'; import { getDirectMessages, checkUsernameValid, createNewDirectMessage } from '../redux/actions/dataActions';
const styles = { const styles = {
pageContainer: { pageContainer: {
@ -142,9 +142,9 @@ const styles = {
marginTop: 8, marginTop: 8,
marginLeft: 2 marginLeft: 2
}, },
loadingUsernameCheck: { loadingUsernameChecks: {
height: 85, height: 55,
width: 85, width: 55,
marginLeft: 5 marginLeft: 5
}, },
errorIcon: { errorIcon: {
@ -158,7 +158,14 @@ const styles = {
width: 55, width: 55,
marginLeft: 5, marginLeft: 5,
color: '#1da1f2' color: '#1da1f2'
} },
createButton: {
// textAlign: "center",
// display: "block",
marginLeft: 96,
marginRight: 96,
position: "relative"
}
}; };
export class directMessages extends Component { export class directMessages extends Component {
@ -170,8 +177,8 @@ export class directMessages extends Component {
dmData: null, dmData: null,
anchorEl: null, anchorEl: null,
createDMUsername: '', createDMUsername: '',
checkingUsername: false, usernameValid: false,
usernameValid: false errors: null
}; };
} }
@ -186,117 +193,130 @@ export class directMessages extends Component {
componentDidMount() { componentDidMount() {
// this.props.getDirectMessages(); // this.props.getDirectMessages();
const resp = { const resp = {
data: [ "data": [
{ {
recipient: 'batman', "recipient": "CrazyEddy",
messages: [], "messages": [
recentMessage: null, {
recentMessageTimestamp: null, "message": "This is message 1",
dmId: 'Lifb0XAONpNLJRhDnOHj' "createdAt": "2019-11-04T17:10:29.180Z",
}, "messageId": "yGqcBbDSM8TsoaQAfAVc",
{ "author": "CrazyEddy"
recipient: 'CrazyEddy', },
messages: [ {
{ "messageId": "c1Bd1REkMBaMaraH10WP",
messageId: 'yGqcBbDSM8TsoaQAfAVc', "author": "keanureeves",
author: 'CrazyEddy', "message": "This is message 2",
message: 'This is message 1', "createdAt": "2019-11-04T17:33:35.169Z"
createdAt: '2019-11-04T17:10:29.180Z' },
}, {
{ "messageId": "CL5sThnuekks6579MKuF",
messageId: 'c1Bd1REkMBaMaraH10WP', "author": "keanureeves",
author: 'keanureeves', "message": "Yo, this my first message",
message: 'This is message 2', "createdAt": "2019-11-08T22:15:08.456Z"
createdAt: '2019-11-04T17:33:35.169Z' },
}, {
{ "messageId": "BgMSSlLLLdC1DMtJl5VJ",
messageId: 'CL5sThnuekks6579MKuF', "author": "CrazyEddy",
author: 'keanureeves', "message": "That is epic",
message: 'Yo, this my first message', "createdAt": "2019-11-08T22:20:16.768Z"
createdAt: '2019-11-08T22:15:08.456Z' },
}, {
{ "message": "test test test",
messageId: 'BgMSSlLLLdC1DMtJl5VJ', "createdAt": "2019-11-08T22:20:58.961Z",
author: 'CrazyEddy', "messageId": "9AeUuz0l4wWyQSG6RQ4A",
message: 'That is epic', "author": "keanureeves"
createdAt: '2019-11-08T22:20:16.768Z' },
}, {
{ "messageId": "zhfEpirBK7jl9FnFMtsQ",
message: 'test test test', "author": "CrazyEddy",
createdAt: '2019-11-08T22:20:58.961Z', "message": "noice",
messageId: '9AeUuz0l4wWyQSG6RQ4A', "createdAt": "2019-11-08T22:21:29.768Z"
author: 'keanureeves' },
}, {
{ "message": "What time is it?",
messageId: 'zhfEpirBK7jl9FnFMtsQ', "createdAt": "2019-11-08T22:23:27.353Z",
author: 'CrazyEddy', "messageId": "XwyKwFU2L5wrTKedzlyF",
message: 'noice', "author": "CrazyEddy"
createdAt: '2019-11-08T22:21:29.768Z' },
}, {
{ "messageId": "qeasHYkAtTGvjnc3VJAi",
message: 'What time is it?', "author": "keanureeves",
createdAt: '2019-11-08T22:23:27.353Z', "message": "it's 5:24 right now",
messageId: 'XwyKwFU2L5wrTKedzlyF', "createdAt": "2019-11-08T22:24:21.807Z"
author: 'CrazyEddy' },
}, {
{ "messageId": "I7kzyLUd9Pp5qzxTPzQv",
message: "it's 5:24 right now", "author": "keanureeves",
createdAt: '2019-11-08T22:24:21.807Z', "message": "a",
messageId: 'qeasHYkAtTGvjnc3VJAi', "createdAt": "2019-11-08T22:31:42.852Z"
author: 'keanureeves' },
}, {
{ "messageId": "iySWBDFFrbY8FT6E61NL",
messageId: 'I7kzyLUd9Pp5qzxTPzQv', "author": "keanureeves",
author: 'keanureeves', "message": "b",
message: 'a', "createdAt": "2019-11-08T22:31:51.558Z"
createdAt: '2019-11-08T22:31:42.852Z' },
}, {
{ "messageId": "Yis0vXSEuMggj6z5Mq1a",
messageId: 'iySWBDFFrbY8FT6E61NL', "author": "keanureeves",
author: 'keanureeves', "message": "c",
message: 'b', "createdAt": "2019-11-08T22:32:01.293Z"
createdAt: '2019-11-08T22:31:51.558Z' },
}, {
{ "messageId": "DIgjDvFczqO0OWkOrL0t",
messageId: 'Yis0vXSEuMggj6z5Mq1a', "author": "keanureeves",
author: 'keanureeves', "message": "d",
message: 'c', "createdAt": "2019-11-08T22:32:16.095Z"
createdAt: '2019-11-08T22:32:01.293Z' },
}, {
{ "messageId": "6h1dnFE440MOrjySEQHU",
messageId: 'DIgjDvFczqO0OWkOrL0t', "author": "keanureeves",
author: 'keanureeves', "message": "e",
message: 'd', "createdAt": "2019-11-08T22:32:22.134Z"
createdAt: '2019-11-08T22:32:16.095Z' },
}, {
{ "messageId": "lmOGGYUWZyB3xG38T7lG",
message: 'e', "author": "keanureeves",
createdAt: '2019-11-08T22:32:22.134Z', "message": "f",
messageId: '6h1dnFE440MOrjySEQHU', "createdAt": "2019-11-08T22:32:28.424Z"
author: 'keanureeves' },
}, {
{ "messageId": "64swTj7yiFy7SF6BPbki",
messageId: 'lmOGGYUWZyB3xG38T7lG', "author": "keanureeves",
author: 'keanureeves', "message": "g",
message: 'f', "createdAt": "2019-11-08T22:32:37.632Z"
createdAt: '2019-11-08T22:32:28.424Z' }
}, ],
{ "recentMessage": "g",
message: 'g', "recentMessageTimestamp": "2019-11-08T22:32:37.632Z",
createdAt: '2019-11-08T22:32:37.632Z', "dmId": "avGcIs4PFCJhc4EDqAfe"
messageId: '64swTj7yiFy7SF6BPbki', },
author: 'keanureeves' {
} "recipient": "batman",
], "messages": [],
recentMessage: 'g', "recentMessage": null,
recentMessageTimestamp: '2019-11-08T22:32:37.632Z', "recentMessageTimestamp": null,
dmId: 'avGcIs4PFCJhc4EDqAfe' "dmId": "Lifb0XAONpNLJRhDnOHj"
} },
] {
}; "recipient": "katherine",
"messages": [],
"recentMessage": null,
"recentMessageTimestamp": null,
"dmId": "QBMonxPTbha0uJc7P73R"
}
]
}
// const resp = {"data": null} // const resp = {"data": null}
this.setState({ dmData: resp.data }); this.setState({ dmData: resp.data });
} }
// componentWillReceiveProps(nextProps) {
// if (nextProps.data.dmData) {
// this.setState({ dmData: nextProps.data.dmData });
// }
// }
// Handles selecting different DM channels // Handles selecting different DM channels
handleClickChannel = (event) => { handleClickChannel = (event) => {
@ -343,21 +363,27 @@ export class directMessages extends Component {
handleCloseAddDMPopover = () => { handleCloseAddDMPopover = () => {
this.setState({ this.setState({
anchorEl: null, anchorEl: null,
createDMUsername: '', createDMUsername: '',
checkingUsername: false,
usernameValid: false usernameValid: false
}); });
}; };
handleChangeAddDMUsername = (event) => { handleChangeAddDMUsername = (event) => {
this.setState({ this.setState({
checkingUsername: true,
createDMUsername: event.target.value createDMUsername: event.target.value
}); });
}; };
handleClickCreate = () => {
this.props.createNewDirectMessage(this.state.createDMUsername);
}
render() { render() {
const { classes } = this.props; const { classes } = 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); dayjs.extend(relativeTime);
// Used for the add button on the dmList // Used for the add button on the dmList
@ -488,7 +514,7 @@ export class directMessages extends Component {
<Grid item style={{ height: 200, width: 285 }}> <Grid item style={{ height: 200, width: 285 }}>
<Grid container direction="column" spacing={2}> <Grid container direction="column" spacing={2}>
<Grid item> <Grid item>
<Typography style={{ marginTop: 49 }}> <Typography style={{ marginTop: 15 }}>
Who would you like to start a DM with? Who would you like to start a DM with?
</Typography> </Typography>
</Grid> </Grid>
@ -497,23 +523,35 @@ export class directMessages extends Component {
onChange={this.handleChangeAddDMUsername} onChange={this.handleChangeAddDMUsername}
value={this.state.createDMUsername} value={this.state.createDMUsername}
label="Username" label="Username"
variant="outlined" variant="outlined"
helperText={errors.createDirectMessage}
error={errors.createDirectMessage ? true : false}
style={{ style={{
margin: 'auto', width: 265,
textAlign: 'center' marginRight: 10,
marginLeft: 10,
textAlign: 'center',
}} }}
/> />
{this.state.checkingUsername && (
<CircularProgress style={{ height: 55, width: 55, marginLeft: 5 }} />
) // Won't accept classes style for some reason
}
{!this.state.usernameValid &&
!this.state.checkingUsername && <ErrorIcon className={classes.errorIcon} />}
{this.state.usernameValid &&
!this.state.checkingUsername && (
<CheckMarkIcon className={classes.checkMarkIcon} />
)}
</Grid> </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> </Grid>
<Grid item sm /> <Grid item sm />
@ -531,7 +569,9 @@ export class directMessages extends Component {
<Grid item className={classes.dmItem}> <Grid item className={classes.dmItem}>
{dmListMarkup} {dmListMarkup}
<Card key="5555" data-key="5555" className={classes.dmCardUnselected}> <Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
<Box className={classes.dmListItemContainer}>{addDMMarkup}</Box> <Box className={classes.dmListItemContainer}>
{addDMMarkup}
</Box>
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
@ -554,7 +594,7 @@ export class directMessages extends Component {
margin="dense" margin="dense"
/> />
<Fab className={classes.messageButton}> <Fab className={classes.messageButton}>
<SendIcon style={{ color: '#D6D6D6' }} /> <SendIcon style={{ color: '#FFFFFF' }} />
</Fab> </Fab>
</Box> </Box>
</Card> </Card>
@ -571,7 +611,8 @@ export class directMessages extends Component {
directMessages.propTypes = { directMessages.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
getDirectMessages: PropTypes.func.isRequired, getDirectMessages: PropTypes.func.isRequired,
createNewDirectMessage: PropTypes.func.isRequired,
user: PropTypes.object.isRequired, user: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired UI: PropTypes.object.isRequired
}; };
@ -583,7 +624,8 @@ const mapStateToProps = (state) => ({
}); });
const mapActionsToProps = { const mapActionsToProps = {
getDirectMessages getDirectMessages,
createNewDirectMessage
}; };
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages)); export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages));

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

@ -0,0 +1,57 @@
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";
export const getDirectMessages = () => (dispatch) => {
dispatch({type: LOADING_UI});
axios.get('/dms')
.then((res) => {
dispatch({
type: SET_DIRECT_MESSAGES,
payload: res.data.data
});
dispatch({type: CLEAR_ERRORS});
})
}
export const createNewDirectMessage = (username) => (dispatch) => {
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});
})
.catch((err) => {
dispatch({
type: SET_ERRORS,
payload: {
createDirectMessage: err.response.data.err
}
});
dispatch({type: SET_NOT_LOADING_UI_3});
console.log(err.response.data);
})
}

17
twistter-frontend/src/redux/reducers/dataReducer.js
View File

@ -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;
}
}

47
twistter-frontend/src/redux/reducers/uiReducer.js
View File

@ -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 = { const initialState = {
loading: false, loading: false,
loading2: false,
loading3: false,
loading4: false,
errors: null errors: null
}; };
@ -23,7 +36,37 @@ export default function(state = initialState, action) {
return { return {
...state, ...state,
loading: true 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: default:
return state; return state;
} }

11
twistter-frontend/src/redux/types.js
View File

@ -7,6 +7,15 @@ export const LOADING_USER = 'LOADING_USER';
// UI reducer types // UI reducer types
export const SET_ERRORS = 'SET_ERRORS'; export const SET_ERRORS = 'SET_ERRORS';
export const LOADING_UI = 'LOADING_UI'; 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'; 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';