Implement get conversations

frontend/package.json

@@ -14,7 +14,8 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.5.1",
     "react-icons": "^5.4.0",
-    "react-router-dom": "^7.1.1"
+    "react-router-dom": "^7.1.1",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

frontend/src/components/messages/MessageContainer.jsx

@@ -1,20 +1,29 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Messages from "./Messages";
 import MessageInput from "./MessageInput";
 import { TiMessages } from "react-icons/ti";
+import useConversation from "../../zustand/useConversation";
 
 const MessageContainer = () => {
-  const noChatSelected = true;
+  const { selectedConversation, setSelectedConversation } = useConversation();
+
+  // resets screen so that no chat is selected when you log back in
+  useEffect(() => {
+    return () => setSelectedConversation(null);
+  }, [setSelectedConversation]);
+
   return (
     <div className="md:min-w-[450px] flex flex-col">
-      {noChatSelected ? (
+      {!selectedConversation ? (
         <NoChatSelected />
       ) : (
         <>
           {/* Header */}
           <div className="bg-slate-500 px-4 py-2 mb-2">
             <span className="label-text">To:</span>{" "}
-            <span className="text-gray-900 font-bold">John Doe</span>
+            <span className="text-gray-900 font-bold">
+              {selectedConversation.fullName}
+            </span>
           </div>
 
           <Messages />

frontend/src/components/sidebar/Conversation.jsx

@@ -1,26 +1,34 @@
 import React from "react";
+import useConversation from "../../zustand/useConversation";
+
+const Conversation = ({ conversation, lastIdx, emoji }) => {
+  const { selectedConversation, setSelectedConversation } = useConversation();
+
+  const isSelected = selectedConversation?._id === conversation._id;
 
-const Conversation = () => {
   return (
     <>
-      <div className="flex gap-2 items-center hover:bg-sky-500 rounded p-2 py-1 cursor-pointer">
+      <div
+        className={`flex gap-2 items-center hover:bg-sky-500 rounded p-2 py-1 cursor-pointer
+      ${isSelected ? "bg-sky-500" : ""}
+      `}
+        onClick={() => setSelectedConversation(conversation)}
+      >
         <div className="avatar online">
           <div className="w-12 rounded-full">
-            <img
-              src="https://cdn0.iconfinder.com/data/icons/communication-line-10/24/account_profile_user_contact_person_avatar_placeholder-512.png"
-              alt="user avatar"
-            />
+            <img src={conversation.profilePic} alt="user avatar" />
           </div>
         </div>
 
         <div className="flex flex-col flex-1">
           <div className="flex gap-3 justify-between">
-            <p className="font-bold text-gray-200">John Doe</p>
-            <span className="text-xl">🦈</span>
+            <p className="font-bold text-gray-200">{conversation.fullName}</p>
+            <span className="text-xl">{emoji}</span>
           </div>
         </div>
       </div>
-      <div className="divider my-0 py-0 h-1" />
+
+      {!lastIdx && <div className="divider my-0 py-0 h-1" />}
     </>
   );
 };

frontend/src/components/sidebar/Conversations.jsx

@@ -1,15 +1,24 @@
 import React from "react";
 import Conversation from "./Conversation";
+import useGetConversations from "../../hooks/useGetConversations";
+import { getRandomEmoji } from "../../utils/emojis";
 
 const Conversations = () => {
+  const { loading, conversations } = useGetConversations();
+  console.log("CONVERSATIONS:", conversations);
   return (
     <div className="py-2 flex flex-col overflow-auto">
-      <Conversation />
-      <Conversation />
-      <Conversation />
-      <Conversation />
-      <Conversation />
-      <Conversation />
+      {conversations.map((conversation, idx) => (
+        <Conversation
+          key={conversation._id}
+          conversation={conversation}
+          emoji={getRandomEmoji()}
+          lastIdx={idx === conversations.length - 1}
+        />
+      ))}
+      {loading ? (
+        <span className="loading loading-spinner mx-auto"></span>
+      ) : null}
     </div>
   );
 };

frontend/src/hooks/useGetConversations.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+import { toast } from 'react-hot-toast';
+
+const useGetConversations = () => {
+  const [loading, setLoading] = useState(false);
+  const [conversations, setConversations] = useState([]);
+
+  useEffect(() => {
+    const getConversations = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch('/api/users');
+            const data = await res.json();
+            if (data.error) {
+                throw new Error(data.error);
+            }
+            setConversations(data);
+
+        } catch (error) {
+            toast.error(error.message);
+
+        } finally {
+            setLoading(false);
+        }
+    }
+  },[]);
+
+  return { loading, conversations };
+}
+
+export default useGetConversations;

frontend/src/utils/emojis.js

@@ -0,0 +1,60 @@
+export const funEmojis = [
+	"👾",
+	"⭐",
+	"🌟",
+	"🎉",
+	"🎊",
+	"🎈",
+	"🎁",
+	"🎂",
+	"🎄",
+	"🎃",
+	"🎗",
+	"🎟",
+	"🎫",
+	"🎖",
+	"🏆",
+	"🏅",
+	"🥇",
+	"🥈",
+	"🥉",
+	"⚽",
+	"🏀",
+	"🏈",
+	"⚾",
+	"🎾",
+	"🏐",
+	"🏉",
+	"🎱",
+	"🏓",
+	"🏸",
+	"🥅",
+	"🏒",
+	"🏑",
+	"🏏",
+	"⛳",
+	"🏹",
+	"🎣",
+	"🥊",
+	"🥋",
+	"🎽",
+	"⛸",
+	"🥌",
+	"🛷",
+	"🎿",
+	"⛷",
+	"🏂",
+	"🏋️",
+	"🤼",
+	"🤸",
+	"🤺",
+	"⛹️",
+	"🤾",
+	"🏌️",
+	"🏇",
+	"🧘",
+];
+
+export const getRandomEmoji = () => {
+	return funEmojis[Math.floor(Math.random() * funEmojis.length)];
+};

frontend/src/zustand/useConversation.js

@@ -0,0 +1,10 @@
+import {create} from 'zustand';
+
+const useConversation = create((set) => ({
+    selectedConversation: null,
+    setSelectedConversation: (selectedConversation) => set({selectedConversation}),
+    messages:[],
+    setMessages: (messages) => set({messages}),
+}));
+
+export default useConversation;