Enhance chat functionality: add onClick handler to ChatItem, update ChatList to manage active chat, and implement getChatById in chatSlice for improved chat loading

Author: L4B0MB4

frontend/src/components/chats/ChatItem.tsx

@@ -6,6 +6,7 @@ import {
 } from "@/lib/utils";
 
 interface ChatItemProps {
+  id: string;
   name: string;
   lastMessage: string;
   avatar: {
@@ -14,6 +15,7 @@ interface ChatItemProps {
   };
   timestamp: string;
   unread: number;
+  onClick: (chatId: string) => void;
 }
 
 export default function ChatRooms({
@@ -22,9 +24,16 @@ export default function ChatRooms({
   avatar,
   timestamp,
   unread,
+  id,
+  onClick,
 }: ChatItemProps) {
   return (
-    <div className="flex items-center space-x-4 p-4 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer">
+    <div
+      className="flex items-center space-x-4 p-4 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer"
+      onClick={() => {
+        onClick(id);
+      }}
+    >
       <Avatar>
         {avatar.image && <AvatarImage src={avatar.image} alt={name} />}
         <AvatarFallback

frontend/src/components/chats/ChatList.tsx

@@ -1,7 +1,11 @@
 import { useAppSelector } from "@/statemanagement/store";
 import ChatRooms from "./ChatItem";
 
-export default function ChatList() {
+export default function ChatList({
+  setChatId,
+}: {
+  setChatId: (chatId: string) => void;
+}) {
   const chats = useAppSelector((state) => {
     const chats = state.chats.chats;
     return chats.map((chat) => {
@@ -20,7 +24,7 @@ export default function ChatList() {
   return (
     <div>
       {chats.map((chat) => (
-        <ChatRooms key={chat.id} {...chat} />
+        <ChatRooms key={chat.id} {...chat} onClick={setChatId} />
       ))}
     </div>
   );

frontend/src/components/chats/ChatSidebar.tsx

@@ -1,13 +1,27 @@
+import {
+  getChatById,
+  setActiveChatId,
+} from "@/statemanagement/chats/chatSlice";
+import { useAppDispatch } from "@/statemanagement/store";
+import { useCallback } from "react";
 import ChatList from "./ChatList";
 
 export default function ChatSidebar() {
+  const dispatch = useAppDispatch();
+  const setChatId = useCallback(
+    (chatId: string) => {
+      dispatch(setActiveChatId(chatId));
+      dispatch(getChatById({ chatId }));
+    },
+    [dispatch]
+  );
   return (
     <div className="w-full h-full md:w-1/3 lg:w-1/4  border-r border-gray-200 dark:border-slate-800 flex flex-col">
       <div className="p-4">
         <h1 className="text-2xl font-bold mb-4">Chats</h1>
       </div>
       <div className="flex-1 overflow-y-auto">
-        <ChatList />
+        <ChatList setChatId={setChatId} />
       </div>
     </div>
   );

frontend/src/statemanagement/chats/chatSlice.ts

@@ -1,21 +1,23 @@
+import { ChatMessage } from "@/types/chatmessage.type";
 import { ChatRoom } from "@/types/chatroom.type";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 export interface ChatState {
   chats: ChatRoom[];
-  chatsLoading: boolean;
+  chatsAreLoading: boolean;
+  chatIsLoading: boolean;
   messageSending: boolean;
   activeChatId?: string;
 }
 
 const initialState: ChatState = {
   chats: [],
-  chatsLoading: false,
+  chatsAreLoading: false,
+  chatIsLoading: false,
   messageSending: false,
 };
 
-export const getAllChats = createAsyncThunk("chats/getAll", async () => {
+export const getAllChats = createAsyncThunk("chats/getAll", async (_, s) => {
   let token = window.sessionStorage.getItem("token");
-
   const response = await fetch(
     "https://" + window.envUrl + "/api/v1/chats/query/chats/",
     {
@@ -29,9 +31,42 @@ export const getAllChats = createAsyncThunk("chats/getAll", async () => {
   }
   const data = await response.json();
   console.log(data);
+  if (data.length > 0) {
+    s.dispatch(getChatById({ chatId: data[0].id }));
+  }
+
   return data;
 });
 
+export const getChatById = createAsyncThunk(
+  "chats/getById",
+  async ({ chatId }: { chatId: string }, t) => {
+    let token = window.sessionStorage.getItem("token");
+
+    const activeChatId = (t.getState() as { chats: ChatState }).chats
+      .activeChatId;
+    if (activeChatId == chatId) {
+      return { messages: [], chatId };
+    }
+    t.dispatch(setActiveChatId(chatId));
+
+    const response = await fetch(
+      "https://" + window.envUrl + `/api/v1/chats/query/chats/${chatId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    if (response.status > 299) {
+      throw new Error("Request failed with " + response.status);
+    }
+    const data = await response.json();
+    console.log(data);
+    return { messages: data.messages, chatId };
+  }
+);
+
 export const addMessage = createAsyncThunk(
   "chats/add",
   async (payload: { text?: string; imageBase64?: string }) => {
@@ -68,18 +103,41 @@ export const chatSlice = createSlice({
     addChatSync: (state, action) => {
       state.chats.unshift(action.payload);
     },
+    setActiveChatId: (state, action: { payload: string }) => {
+      state.activeChatId = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(getAllChats.pending, (state) => {
-      state.chatsLoading = true;
+      state.chatsAreLoading = true;
     });
     builder.addCase(getAllChats.rejected, (state) => {
-      state.chatsLoading = false;
+      state.chatsAreLoading = false;
     });
     builder.addCase(getAllChats.fulfilled, (state, action) => {
-      state.chatsLoading = false;
+      state.chatsAreLoading = false;
       state.chats = action.payload;
     });
+    builder.addCase(getChatById.pending, (state) => {
+      state.chatIsLoading = true;
+    });
+    builder.addCase(getChatById.rejected, (state) => {
+      state.chatIsLoading = false;
+    });
+    builder.addCase(
+      getChatById.fulfilled,
+      (
+        state,
+        action: { payload: { chatId: string; messages: ChatMessage[] } }
+      ) => {
+        state.chatIsLoading = false;
+        const chat = state.chats.find((x) => x.id == action.payload.chatId);
+        if (chat != null) {
+          const prevMessages = chat.messages ?? [];
+          chat.messages = [...prevMessages, ...action.payload.messages];
+        }
+      }
+    );
     builder.addCase(addMessage.pending, (state) => {
       state.messageSending = true;
     });
@@ -93,6 +151,6 @@ export const chatSlice = createSlice({
   },
 });
 
-export const { addChatSync } = chatSlice.actions;
+export const { addChatSync, setActiveChatId } = chatSlice.actions;
 
 export default chatSlice.reducer;

frontend/src/types/chatroom.type.ts

@@ -3,6 +3,7 @@ import { ChatMessage } from "./chatmessage.type";
 export interface ChatRoom {
   id: string;
   name: string;
+  users: string[];
   messages?: ChatMessage[];
   isLoading?: boolean;
 }