rgifford/pla assessment

client/src/components/ActiveChat/ActiveChat.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect } from "react";
+import axios from "axios";
 import { makeStyles } from "@material-ui/core/styles";
 import { Box } from "@material-ui/core";
 import { Input, Header, Messages } from "./index";
@@ -24,6 +25,7 @@ const ActiveChat = ({
   conversations,
   activeConversation,
   postMessage,
+  setConversations,
 }) => {
   const classes = useStyles();
 
@@ -37,6 +39,35 @@ const ActiveChat = ({
     return obj !== {} && obj !== undefined;
   };
 
+  useEffect(() => {
+    const seeMessages = async () => {
+      const { data } = await axios.post("/api/messages/read", {
+        conversationId: conversation?.id,
+      });
+      // console.log(data);
+    };
+
+    const fetchConversations = async () => {
+      try {
+        const { data } = await axios.get("/api/conversations");
+        setConversations(data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    // update messages.seen to be true here
+    // send conversation id to /read
+
+    if (!!conversation) {
+      seeMessages();
+
+      if (!user.isFetching) {
+        fetchConversations();
+      }
+    }
+  }, [activeConversation, setConversations, user]);
+
   return (
     <Box className={classes.root}>
       {isConversation(conversation) && conversation.otherUser && (

client/src/components/ActiveChat/Input.js

@@ -33,6 +33,7 @@ const Input = ({ otherUser, conversationId, user, postMessage }) => {
       recipientId: otherUser.id,
       conversationId,
       sender: conversationId ? null : user,
+      seen: true,
     };
     await postMessage(reqBody);
     setText("");

client/src/components/Home.js

@@ -62,9 +62,9 @@ const Home = ({ user, logout }) => {
     });
   };
 
-  const postMessage = (body) => {
+  const postMessage = async (body) => {
     try {
-      const data = saveMessage(body);
+      const data = await saveMessage(body);
 
       if (!body.conversationId) {
         addNewConvo(body.recipientId, data.message);
@@ -80,41 +80,54 @@ const Home = ({ user, logout }) => {
 
   const addNewConvo = useCallback(
     (recipientId, message) => {
-      conversations.forEach((convo) => {
-        if (convo.otherUser.id === recipientId) {
-          convo.messages.push(message);
-          convo.latestMessageText = message.text;
-          convo.id = message.conversationId;
-        }
-      });
-      setConversations(conversations);
+      setConversations((prevConversations) =>
+        prevConversations.map((convo) => {
+          if (convo.otherUser.id === recipientId) {
+            return {
+              ...convo,
+              messages: [...convo.messages, message],
+              latestMessageText: message.text,
+              id: message.conversationId,
+            };
+          } else {
+            return convo;
+          }
+        })
+      );
     },
-    [setConversations, conversations]
+    [setConversations]
   );
 
   const addMessageToConversation = useCallback(
     (data) => {
-      // if sender isn't null, that means the message needs to be put in a brand new convo
       const { message, sender = null } = data;
+
+      // if sender isn't null, that means the message needs to be put in a brand new convo
       if (sender !== null) {
         const newConvo = {
           id: message.conversationId,
           otherUser: sender,
           messages: [message],
+          latestMessageText: message.text,
         };
-        newConvo.latestMessageText = message.text;
         setConversations((prev) => [newConvo, ...prev]);
+      } else {
+        setConversations((prevConversations) =>
+          prevConversations.map((convo) => {
+            if (convo.id === message.conversationId) {
+              return {
+                ...convo,
+                messages: [...convo.messages, message],
+                latestMessageText: message.text,
+              };
+            } else {
+              return convo;
+            }
+          })
+        );
       }
-
-      conversations.forEach((convo) => {
-        if (convo.id === message.conversationId) {
-          convo.messages.push(message);
-          convo.latestMessageText = message.text;
-        }
-      });
-      setConversations(conversations);
     },
-    [setConversations, conversations]
+    [setConversations]
   );
 
   const setActiveChat = (username) => {
@@ -212,6 +225,7 @@ const Home = ({ user, logout }) => {
           setActiveChat={setActiveChat}
         />
         <ActiveChat
+          setConversations={setConversations}
           activeConversation={activeConversation}
           conversations={conversations}
           user={user}

client/src/components/Sidebar/ChatContent.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Typography } from "@material-ui/core";
+import { Box, Typography, Badge } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme) => ({
@@ -26,6 +26,11 @@ const ChatContent = ({ conversation }) => {
   const { otherUser } = conversation;
   const latestMessageText = conversation.id && conversation.latestMessageText;
 
+  const unseenMessages = conversation.messages.filter(
+    (message) => message.seen === false
+  );
+
+  console.log(unseenMessages.length);
   return (
     <Box className={classes.root}>
       <Box>
@@ -36,6 +41,12 @@ const ChatContent = ({ conversation }) => {
           {latestMessageText}
         </Typography>
       </Box>
+      <Badge
+        style={{ textAlign: "right" }}
+        color="primary"
+        badgeContent={unseenMessages.length}
+        overlap="circular"
+      />
     </Box>
   );
 };

server/db/models/message.js

@@ -10,6 +10,10 @@ const Message = db.define("message", {
     type: Sequelize.INTEGER,
     allowNull: false,
   },
+  seen: {
+    type: Sequelize.BOOLEAN,
+    defaultValue: false,
+  },
 });
 
 module.exports = Message;

server/routes/api/conversations.js

@@ -19,9 +19,9 @@ router.get("/", async (req, res, next) => {
         },
       },
       attributes: ["id"],
-      order: [[Message, "createdAt", "DESC"]],
+      order: [[Message, "createdAt", "ASC"]],
       include: [
-        { model: Message, order: ["createdAt", "DESC"] },
+        { model: Message, order: [["createdAt", "ASC"]] },
         {
           model: User,
           as: "user1",
@@ -68,7 +68,8 @@ router.get("/", async (req, res, next) => {
       }
 
       // set properties for notification count and latest message preview
-      convoJSON.latestMessageText = convoJSON.messages[0].text;
+      convoJSON.latestMessageText =
+        convoJSON.messages[convoJSON.messages.length - 1].text;
       conversations[i] = convoJSON;
     }
 

server/routes/api/messages.js

@@ -9,11 +9,16 @@ router.post("/", async (req, res, next) => {
       return res.sendStatus(401);
     }
     const senderId = req.user.id;
-    const { recipientId, text, conversationId, sender } = req.body;
+    const { recipientId, text, conversationId, sender, seen } = req.body;
 
     // if we already know conversation id, we can save time and just add it to message and return
     if (conversationId) {
-      const message = await Message.create({ senderId, text, conversationId });
+      const message = await Message.create({
+        senderId,
+        text,
+        conversationId,
+        seen,
+      });
       return res.json({ message, sender });
     }
     // if we don't have conversation id, find a conversation to make sure it doesn't already exist
@@ -36,11 +41,35 @@ router.post("/", async (req, res, next) => {
       senderId,
       text,
       conversationId: conversation.id,
+      seen: seen,
     });
     res.json({ message, sender });
   } catch (error) {
     next(error);
   }
 });
 
+router.post("/read", async (req, res, next) => {
+  try {
+    if (!req.user) {
+      return res.sendStatus(401);
+    }
+
+    const { conversationId } = req.body;
+
+    const message = await Message.update(
+      { seen: true },
+      {
+        where: {
+          conversationId: conversationId,
+        },
+      }
+    );
+
+    res.json({ message });
+  } catch (error) {
+    next(error);
+  }
+});
+
 module.exports = router;