Improve sockets

client/src/Login.js

@@ -70,7 +70,7 @@ const Login = (props) => {
                 className={classes.input}
                 InputProps={{
                   endAdornment: (
-                    <InputAdornment component={Link} position="start">
+                    <InputAdornment component={'div'} position="start">
                       <Link href="#" color="primary">
                         {"Forgot?"}
                       </Link>

client/src/Signup.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Redirect, useHistory } from "react-router-dom";
 import { connect } from "react-redux";
 import {
@@ -7,7 +7,6 @@ import {
   Button,
   FormControl,
   TextField,
-  FormHelperText,
   Hidden,
 } from "@material-ui/core";
 import { register } from "./store/utils/thunkCreators";
@@ -18,7 +17,6 @@ import HomeSideBanner from "./components/HomeSideBanner/HomeSideBanner";
 const Login = (props) => {
   const history = useHistory();
   const { user, register } = props;
-  const [formErrorMessage, setFormErrorMessage] = useState({});
   const classes = useStyles()
 
   const handleRegister = async (event) => {
@@ -72,7 +70,7 @@ const Login = (props) => {
                 className={classes.input}
               />
             </FormControl>
-            <FormControl margin='normal' className={classes.full} error={!!formErrorMessage.confirmPassword}>
+            <FormControl margin='normal' className={classes.full}>
               <TextField
                 aria-label="password"
                 label="Password"
@@ -81,9 +79,6 @@ const Login = (props) => {
                 name="password"
                 className={classes.input}
               />
-              <FormHelperText>
-                {formErrorMessage.confirmPassword}
-              </FormHelperText>
             </FormControl>
             <Button
               type="submit"

client/src/Styles.js

@@ -46,7 +46,7 @@ const useStyles = makeStyles({
     },
     formMessage: {
         fontWeight: 900,
-        ['@media (max-width:600px)']: {
+        '@media (max-width:600px)': {
             textAlign: 'center',
         },
     },
@@ -73,17 +73,17 @@ const useStyles = makeStyles({
         display: 'flex',
         flexDirection: 'column',
         width: '80%',
-        ['@media (max-width:750px)']: {
+        '@media (max-width:750px)': {
             width: '100%',
         },
     },
     redirectHeader: {
         alignItems: 'center',
-        ['@media (max-width:750px)']: {
+        '@media (max-width:750px)': {
             flexDirection: 'column',
             justifyContent: 'center',
         },
-        ['@media (min-width:750px)']: {
+        '@media (min-width:750px)': {
             justifyContent: 'flex-end',
         }
     },

client/src/components/ActiveChat/ActiveChat.js

@@ -58,7 +58,7 @@ const mapStateToProps = (state) => {
       state.conversations &&
       state.conversations.find(
         (conversation) => conversation.otherUser.username === state.activeConversation
-      )
+      ),
   };
 };
 

client/src/components/ActiveChat/Input.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { FormControl, FilledInput } from "@material-ui/core";
 import { withStyles } from "@material-ui/core/styles";
 import { connect } from "react-redux";
-import { postMessage } from "../../store/utils/thunkCreators";
+import { postMessage, changeTypingStatus } from "../../store/utils/thunkCreators";
 
 const styles = {
   root: {
@@ -17,18 +17,28 @@ const styles = {
   },
 };
 
+// TO-DO: refactor to use functional components and react hooks
 class Input extends Component {
   constructor(props) {
     super(props);
     this.state = {
       text: "",
+      typing: false,
+      timeout: "",
     };
   }
 
   handleChange = (event) => {
+    const timer = setTimeout(this.typingTimeout, 3000)
     this.setState({
       text: event.target.value,
+      typing: true,
+      timeout: clearTimeout(this.state.timeout),
     });
+    this.props.changeTypingStatus(this.props.user, this.props.otherUser.id, this.state.typing)
+    this.setState({
+      timeout: timer,
+    })
   };
 
   handleSubmit = async (event) => {
@@ -43,9 +53,16 @@ class Input extends Component {
     await this.props.postMessage(reqBody);
     this.setState({
       text: "",
+      timeout: clearTimeout(this.state.timeout),
     });
+    this.typingTimeout()
   };
 
+  typingTimeout = () => {
+    this.setState({ typing: false })
+    this.props.changeTypingStatus(this.props.user, this.props.otherUser.id, this.state.typing)
+  }
+
   render() {
     const { classes } = this.props;
     return (
@@ -77,6 +94,9 @@ const mapDispatchToProps = (dispatch) => {
     postMessage: (message) => {
       dispatch(postMessage(message));
     },
+    changeTypingStatus: (sender, recipientId, isTyping) =>
+      dispatch(changeTypingStatus(sender, recipientId, isTyping))
+
   };
 };
 

client/src/components/ActiveChat/Messages.js

@@ -1,8 +1,10 @@
-import React, { useMemo } from "react";
+import React, { useRef, useEffect } from "react";
+import { useSelector } from 'react-redux'
 import { Box } from "@material-ui/core";
 import { withStyles } from '@material-ui/core/styles'
-import { SenderBubble, OtherUserBubble } from "../ActiveChat";
+import { SenderBubble, OtherUserBubble, } from "../ActiveChat";
 import moment from "moment";
+import TypingIndicator from './TypingIndicator'
 
 const styles = {
   root: {
@@ -16,8 +18,15 @@ const styles = {
 };
 
 const Messages = (props) => {
+  const typingStatus = useSelector(state => state.conversations.find(
+    (conversation) => conversation.otherUser.username === state.activeConversation).typingStatus)
   const { classes } = props
   const { messages, otherUser, userId } = props;
+  const bottom = useRef(null)
+
+  useEffect(() => {
+    bottom.current.scrollIntoView({ behavior: 'smooth' })
+  }, [typingStatus, messages.length])
 
   return (
     <Box className={classes.root}>
@@ -30,6 +39,10 @@ const Messages = (props) => {
           <OtherUserBubble key={message.id} text={message.text} time={time} otherUser={otherUser} />
         );
       })}
+      {typingStatus &&
+        <TypingIndicator otherUser={otherUser} />
+      }
+      <div ref={bottom}></div>
     </Box>
   );
 };

client/src/components/ActiveChat/TypingIndicator.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Box, Typography, Avatar } from "@material-ui/core";
+
+const useStyles = makeStyles(() => ({
+    root: {
+        display: "flex"
+    },
+    avatar: {
+        height: 30,
+        width: 30,
+        marginRight: 11,
+        marginTop: 6
+    },
+    usernameDate: {
+        fontSize: 11,
+        color: "#BECCE2",
+        fontWeight: "bold",
+        marginBottom: 5
+    },
+    bubble: {
+        backgroundImage: "linear-gradient(225deg, #6CC1FF 0%, #3A8DFF 100%)",
+        borderRadius: "0 10px 10px 10px",
+        padding: '10px 15px',
+        display: 'flex',
+    },
+    text: {
+        fontSize: 14,
+        fontWeight: "bold",
+        color: "#FFFFFF",
+        letterSpacing: -0.2,
+        padding: 8
+    },
+    dot: {
+        height: '10px',
+        width: '10px',
+        borderRadius: '100%',
+        display: 'inline-block',
+        backgroundColor: 'rgb(250, 250, 250, 0.6)',
+        margin: '2px',
+        animation: '$typing-dot 1.2s ease-in-out 1.2s infinite',
+        "&:nth-of-type(2)": {
+            animationDelay: '0.15s',
+        },
+        "&:nth-of-type(3)": {
+            animationDelay: '0.25s',
+        },
+    },
+    '@keyframes typing-dot': {
+        '15%': {
+            transform: 'translateY(-35%)',
+            opacity: 0.1
+        },
+        '30%': {
+            transform: 'translateY(0%)',
+            opacity: 1,
+        },
+    },
+}));
+
+const TypingIndicator = (props) => {
+    const classes = useStyles();
+    const { otherUser } = props;
+    return (
+        <Box className={classes.root}>
+            <Avatar alt={otherUser.username} src={otherUser.photoUrl} className={classes.avatar}></Avatar>
+            <Box>
+                <Typography className={classes.usernameDate}>
+                    {otherUser.username}
+                </Typography>
+                <Box className={classes.bubble}>
+                    <Typography className={classes.dot}></Typography>
+                    <Typography className={classes.dot}></Typography>
+                    <Typography className={classes.dot}></Typography>
+                </Box>
+            </Box>
+        </Box>
+    );
+};
+
+export default TypingIndicator;

client/src/socket.js

@@ -4,9 +4,12 @@ import {
   setNewMessage,
   removeOfflineUser,
   addOnlineUser,
+  displayTypingStatus,
 } from "./store/conversations";
 
-const socket = io(window.location.origin);
+// autoConnect set to false so that the connection is not established immediately.
+// Connection will be manually established using socket.connect() in login/register thunks.
+const socket = io(window.location.origin, { autoConnect: false });
 
 socket.on("connect", () => {
   console.log("connected to server");
@@ -18,9 +21,14 @@ socket.on("connect", () => {
   socket.on("remove-offline-user", (id) => {
     store.dispatch(removeOfflineUser(id));
   });
+
   socket.on("new-message", (data) => {
     store.dispatch(setNewMessage(data.message, data.sender));
   });
+
+  socket.on('typing-status', (data) => {
+    store.dispatch(displayTypingStatus(data.sender, data.isTyping))
+  })
 });
 
 export default socket;

client/src/store/conversations.js

@@ -4,6 +4,8 @@ import {
   addSearchedUsersToStore,
   removeOfflineUserFromStore,
   addMessageToStore,
+  changeConvoTypingStatus,
+  setConvosToStore,
 } from "./utils/reducerFunctions";
 
 // ACTIONS
@@ -15,6 +17,7 @@ const REMOVE_OFFLINE_USER = "REMOVE_OFFLINE_USER";
 const SET_SEARCHED_USERS = "SET_SEARCHED_USERS";
 const CLEAR_SEARCHED_USERS = "CLEAR_SEARCHED_USERS";
 const ADD_CONVERSATION = "ADD_CONVERSATION";
+const SET_TYPING_STATUS = 'SET_TYPING_STATUS'
 
 // ACTION CREATORS
 
@@ -59,6 +62,13 @@ export const clearSearchedUsers = () => {
   };
 };
 
+export const displayTypingStatus = (sender, isTyping) => {
+  return {
+    type: SET_TYPING_STATUS,
+    payload: { sender, isTyping }
+  }
+}
+
 // add new conversation when sending a new message
 export const addConversation = (recipientId, newMessage) => {
   return {
@@ -72,7 +82,7 @@ export const addConversation = (recipientId, newMessage) => {
 const reducer = (state = [], action) => {
   switch (action.type) {
     case GET_CONVERSATIONS:
-      return action.conversations;
+      return setConvosToStore(state, action.conversations);
     case SET_MESSAGE:
       return addMessageToStore(state, action.payload);
     case ADD_ONLINE_USER: {
@@ -91,6 +101,8 @@ const reducer = (state = [], action) => {
         action.payload.recipientId,
         action.payload.newMessage
       );
+    case SET_TYPING_STATUS:
+      return changeConvoTypingStatus(state, action.payload)
     default:
       return state;
   }

client/src/store/utils/reducerFunctions.js

@@ -1,3 +1,22 @@
+export const setConvosToStore = (state, conversations) => {
+  const convosMap = {}
+  const newState = state.map(convo => {
+    convosMap[convo.id] = convo
+    const convoCopy = { ...convo }
+    return convoCopy
+  })
+
+  conversations.forEach(convo => {
+    if (Object.keys(convosMap).includes(convo.id.toString())) {
+      newState[newState.indexOf(convosMap[convo.id])] = convo
+    } else {
+      newState.push(convo)
+    }
+  })
+
+  return newState
+}
+
 export const addMessageToStore = (state, payload) => {
   const { message, sender } = payload;
   // if sender isn't null, that means the message needs to be put in a brand new convo
@@ -81,3 +100,16 @@ export const addNewConvoToStore = (state, recipientId, message) => {
     }
   });
 };
+
+export const changeConvoTypingStatus = (state, payload) => {
+  const { sender, isTyping } = payload
+  return state.map(convo => {
+    if (convo.otherUser.id === sender.id) {
+      const convoCopy = { ...convo }
+      convoCopy.typingStatus = isTyping
+      return convoCopy
+    } else {
+      return convo
+    }
+  })
+}