Fix crash activeUser, refresh messageContainer after unlike

Snunesnk · Jan 29, 2024 · ec44c3b · ec44c3b
1 parent 66a92e0
commit ec44c3b
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 28 deletions.
diff --git a/front/src/Components/ChatComponent/index.jsx b/front/src/Components/ChatComponent/index.jsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import SendIcon from '@mui/icons-material/Send'
-import PersonIcon from '@mui/icons-material/Person'
 import './index.css'
 import { useDispatch } from 'react-redux'
 import { USER_STATE_ACTIONS } from '../../constants'
@@ -80,6 +79,7 @@ const ChatComponent = ({
             .catch((error) => {
                 console.log(error)
             })
+            console.log(user)
     }, [user])
 
     useEffect(() => {

diff --git a/front/src/Components/MessagesContainer/MessagesContainer.jsx b/front/src/Components/MessagesContainer/MessagesContainer.jsx
@@ -20,7 +20,9 @@ const handleSocketMessage = (
     activeConversation,
     setSocketMessage,
     setConversations,
-    setNewMatches
+    setNewMatches,
+    activeUser,
+    setActiveConversation,
 ) => {
     const matchUser = newMatches.find((match) => match.login === message.from)
     if (matchUser) {
@@ -37,6 +39,12 @@ const handleSocketMessage = (
             },
             ...prev,
         ])
+        setActiveConversation({
+            ...matchUser,
+            last_message_content: message.content,
+            last_message_timestamp: new Date(Date.now()),
+            read: activeUser.login === message.from,
+        })
     } else {
         setSocketMessage(message)
         setConversations((prev) => {
@@ -84,26 +92,29 @@ const handleSocketStatus = (status, setNewMatches, setConversations) => {
 }
 
 const MessagesContainer = () => {
-    const [activeComponent, setActiveComponent] = useState(
-        COMPONENTS.MESSAGE_LIST
-    )
+    const [activeComponent, setActiveComponent] = useState(COMPONENTS.MESSAGE_LIST)
     const [conversations, setConversations] = useState([])
     const [newMatches, setNewMatches] = useState([])
     const [activeConversation, setActiveConversation] = useState(null)
     const [activeUser, setActiveUser] = useState(null)
     const [socketMessage, setSocketMessage] = useState(null)
-
+    const [unlike, setUnlike] = useState(null)
     const location = useLocation()
     const searchParams = new URLSearchParams(location.search)
     const user = searchParams.get('user')
 
     const checkForNewMatch = (message) => {
-        if (message.type !== 'match') return
+        if (message.type === 'unlike')
+            setUnlike(message.payload)
+
+        if (message.type !== 'match')
+            return
 
         const matchUser = newMatches.find(
             (match) => match.name === message.payload.name
         )
-        if (matchUser) return
+        if (matchUser)
+            return
 
         setNewMatches((prev) => [message.payload, ...prev])
     }
@@ -153,7 +164,14 @@ const MessagesContainer = () => {
                 })
         }
         getMatches()
-    }, [])
+    }, [unlike])
+
+    useEffect(() => {
+        setActiveComponent(null)
+        setActiveConversation(null)
+        setActiveUser(null)
+        setConversations([])
+    }, [unlike])
 
     useEffect(() => {
         const handleSocketMessageEvent = (message) => {
@@ -163,7 +181,9 @@ const MessagesContainer = () => {
                 activeConversation,
                 setSocketMessage,
                 setConversations,
-                setNewMatches
+                setNewMatches,
+                activeUser,
+                setActiveConversation
             )
         }
         const handleSocketStatusEvent = (status) => {
@@ -180,8 +200,10 @@ const MessagesContainer = () => {
         }
     }, [socket, newMatches, activeConversation])
 
+
     useEffect(() => {
-        if (!activeConversation) return
+        if (!activeConversation) 
+            return
 
         setConversations((prev) => {
             const conversation = prev.find(
@@ -197,6 +219,8 @@ const MessagesContainer = () => {
 
         ApiService.get('/user/' + activeConversation.login)
             .then((data) => {
+                console.log(data)
+                console.log(activeConversation)
                 setActiveUser(data)
             })
             .catch((error) => {
@@ -228,8 +252,7 @@ const MessagesContainer = () => {
     return (
         <div id="message-pannel">
             <div id="messages_component_container">
-                <div
-                    id="chat_list_container"
+                <div id="chat_list_container"
                     data-active={
                         activeComponent === COMPONENTS.MESSAGE_LIST ||
                         activeComponent === COMPONENTS.NOTIFICATION
@@ -243,8 +266,7 @@ const MessagesContainer = () => {
                         setActiveComponent={setActiveComponent}
                     />
                 </div>
-                <div
-                    id="chat_container"
+                <div id="chat_container"
                     data-active={activeComponent === COMPONENTS.CHAT}
                     className="responsive-component"
                 >
@@ -269,7 +291,7 @@ const MessagesContainer = () => {
                 >
                     {activeUser ? (
                         <>
-                            <UserProfile user={activeUser} unlikable={true} />
+                            <UserProfile user={activeUser} unlikable={true} setUnlike={setUnlike} />
                             <div className="user-profile-go-back">
                                 <ArrowBack onClick={() => {setActiveComponent(COMPONENTS.CHAT)}}/>
                             </div>

diff --git a/front/src/Components/UserProfile/UserProfile.jsx b/front/src/Components/UserProfile/UserProfile.jsx
@@ -72,10 +72,9 @@ function calculateAge(birthdate) {
     return age
 }
 
-const UserProfile = ({ user, scroll = 0, unlikable = false, isMe = false }) => {
+const UserProfile = ({ user, scroll = 0, unlikable = false, isMe = false, setUnlike= () => {} }) => {
     const [selectedPicture, setSelectedPicture] = useState(-1)
     const [currentOnline, setCurrentOnline] = useState(false)
-    const navigate = useNavigate()
     const profileRef = useRef(null)
     const infosRef = useRef(null)
     const dispatch = useDispatch()
@@ -164,8 +163,8 @@ const UserProfile = ({ user, scroll = 0, unlikable = false, isMe = false }) => {
                         {unlikable && 
                         <button id="unlike-btn" 
                             onClick={ () => ApiService.delete(`/like/${user.login}`)
-                            .then((response) => {
-                                navigate('/dashboard/messages')
+                            .then(() => {
+                                setUnlike(user.login)
                             })
                             .catch((error) => {
                                 console.log(error)

diff --git a/server/app/models/like.model.js b/server/app/models/like.model.js
@@ -1,5 +1,7 @@
 import { DbRequestService } from "../services/db-request.service.js";
 import { Match } from "./matches.model.js"
+import { Notifications } from "./notifications.model.js";
+import { NOTIFICATION_TYPE, sendNotification } from "../socket/socket.js";
 export class Like {
   constructor(obj = {}) {
     this.receiver = obj.receiver;
@@ -106,19 +108,26 @@ export class Like {
   }
 
   static async delete(receiver, issuer) {
-    // const data = DbRequestService.delete("like", {
-    //   receiver: `${receiver}`,
-    //   issuer: `${issuer}`,
-    // });
-    // if (data.affectedRows === 0) {
-    //   return null;
-    // }
+    const data = DbRequestService.delete("like", {
+      receiver: `${receiver}`,
+      issuer: `${issuer}`,
+    });
+    if (data.affectedRows === 0) {
+      return null;
+    }
 
     const match = await Match.getMatch(receiver, issuer);
-    console.log(match);
+
     if (match) {
       Match.deleteMatch(match.user1, match.user2);
     }
+
+    Notifications.create({
+      login: receiver,
+      trigger_login: issuer,
+      type: NOTIFICATION_TYPE.UNLIKE,
+      message: `${issuer} unliked you!`,
+    });
     return true;
   }