Direct Messages can use redux for creating new DM channels

twistter-frontend/src/App.js

@@ -33,6 +33,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";
 
 const theme = createMuiTheme(themeObject);
 
@@ -63,7 +64,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 */}
@@ -79,6 +80,7 @@ class App extends Component {
                 <Route exact path="/edit" component={editProfile} />
                 <Route exact path="/verify" component={verify}/>
                 <Route exact path="/search" component={Search} />
+                <Route exact path="/dm" component={directMessages} />
 
                 <AuthRoute exact path="/" component={home} />
 

twistter-frontend/src/pages/directMessages.js

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

twistter-frontend/src/redux/actions/dataActions.js

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

twistter-frontend/src/redux/reducers/dataReducer.js

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

twistter-frontend/src/redux/reducers/uiReducer.js

@@ -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
 };
 
@@ -23,7 +36,37 @@ export default function(state = initialState, action) {
             return {
                 ...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;
     }

twistter-frontend/src/redux/types.js

@@ -7,6 +7,15 @@ export const LOADING_USER = 'LOADING_USER';
 // 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
+export const SET_DIRECT_MESSAGES = 'SET_DIRECT_MESSAGES';
+export const SET_USERNAME_VALID = 'SET_USERNAME_VALID';
+export const SET_USERNAME_INVALID = 'SET_USERNAME_INVALID';