fix: ChatList Logic and props

Celesca · Nov 25, 2024 · 92f6972 · 92f6972
1 parent baafe84
commit 92f6972
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/frontend/src/components/ChatList.jsx b/frontend/src/components/ChatList.jsx
@@ -1,18 +1,18 @@
 import PropTypes from 'prop-types';
 
-const ChatList = ({ contacts, onSelectChat }) => {
+const ChatList = ({ chats, onSelectChat }) => {
   return (
     <div className="w-1/3 bg-white border-r overflow-y-auto">
       <h2 className="text-lg font-bold p-4 border-b">Chats</h2>
       <ul>
-        {contacts.map((contact) => (
+        {chats.map((contact) => (
           <li
-            key={contact.id}
+            key={contact.UserID}
             onClick={() => onSelectChat(contact)}
             className="p-4 border-b hover:bg-gray-200 cursor-pointer"
           >
-            <p className="font-semibold">{contact.name}</p>
-            <p className="text-sm text-gray-500 truncate">{contact.message}</p>
+            <p className="font-semibold">{contact.UserName}</p>
+            <p className="text-sm text-gray-500 truncate">{contact.MessageContent}</p>
           </li>
         ))}
       </ul>
@@ -21,11 +21,12 @@ const ChatList = ({ contacts, onSelectChat }) => {
 };
 
 ChatList.propTypes = {
-  contacts: PropTypes.arrayOf(
+  chats: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.number.isRequired,
-      name: PropTypes.string.isRequired,
-      message: PropTypes.string.isRequired,
+      UserID: PropTypes.string.isRequired,
+      UserName: PropTypes.string.isRequired,
+      ProfileImage: PropTypes.string.isRequired,
+      MessageContent: PropTypes.string.isRequired,
     })
   ).isRequired,
   onSelectChat: PropTypes.func.isRequired,

diff --git a/frontend/src/message.jsx b/frontend/src/message.jsx
@@ -14,18 +14,25 @@ import axios from 'axios';
 const Message = () => {
   const [activeChat, setActiveChat] = useState(null);
   const [userID, setUserID] = useState(null);
-  // const [chats, setChats] = useState([]);
+  const [chats, setChats] = useState([]);
 
-  const contacts = [
-    { id: 1, name: 'John Doe', message: 'Hey! How are you?' },
-    { id: 2, name: 'Jane Smith', message: 'Let’s catch up soon!' },
-    { id: 3, name: 'Mark Taylor', message: 'Check this out.' },
-  ];
+  // Example of chats
+  // const chats = [
+  //   { UserID: 1, UserName: 'Alice', ProfileImage: '/profile1.jpg', }, ]
 
   const fetchChats = async () => {
     try {
       const response = await axios.get(`http://localhost:3000/message/inbox/${userID}`);
       console.log(response.data);
+      const chats = response.data.map(chat => ({
+        UserID: chat.otherUser.UserID,
+        UserName: chat.otherUser.UserName,
+        ProfileImage: chat.otherUser.ProfileImage,
+        MessageContent: chat.MessageContent
+      }));
+      setChats(chats);
+
+      console.log(chats);
       // setChats(response.data);
     } catch (error) {
       console.error('Error fetching chats:', error);
@@ -51,7 +58,7 @@ const Message = () => {
     <div className="flex h-screen bg-gray-100">
       {activeChat ? (
         <div className="flex flex-1 pt-4">
-          <ChatList contacts={contacts} onSelectChat={handleChatSelect} />
+          <ChatList chats={chats} onSelectChat={handleChatSelect} />
           <ChatBox activeChat={activeChat} />
         </div>
       ) : (