Add chat management: implement chat slice, integrate chat functionality, and refactor Chat components

Author: L4B0MB4

frontend/src/components/chats/ChatItem.tsx

@@ -16,7 +16,7 @@ interface ChatItemProps {
   unread: number;
 }
 
-export default function ChatItem({
+export default function ChatRooms({
   name,
   lastMessage,
   avatar,

frontend/src/components/chats/ChatList.tsx

@@ -1,35 +1,26 @@
-import ChatItem from "./ChatItem";
-
-const chats = [
-  {
-    id: 1,
-    name: "Alice Johnsonn",
-    lastMessage: "Hey, how are you doing?",
-    avatar: {
-      image: "/placeholder.svg?height=40&width=40",
-      fallbackColorGen: "Alice Johnsonn",
-    },
-    timestamp: "5m ago",
-    unread: 2,
-  },
-  {
-    id: 2,
-    name: "Bob Smith",
-    lastMessage: "Did you see the latest post?",
-    avatar: {
-      image: "/placeholder.svg?height=40&width=40",
-      fallbackColorGen: "Bob Smith",
-    },
-    timestamp: "1h ago",
-    unread: 0,
-  },
-];
+import { useAppSelector } from "@/statemanagement/store";
+import ChatRooms from "./ChatItem";
 
 export default function ChatList() {
+  const chats = useAppSelector((state) => {
+    const chats = state.chats.chats;
+    return chats.map((chat) => {
+      return {
+        id: chat.id,
+        name: chat.name,
+        lastMessage: "",
+        avatar: {
+          fallbackColorGen: chat.id,
+        },
+        timestamp: "",
+        unread: 0,
+      };
+    });
+  });
   return (
     <div>
       {chats.map((chat) => (
-        <ChatItem key={chat.id} {...chat} />
+        <ChatRooms key={chat.id} {...chat} />
       ))}
     </div>
   );

frontend/src/components/posts/postlist.tsx

@@ -1,7 +1,5 @@
-import { getAllPosts } from "@/statemanagement/posting/postSlice";
-import { useAppDispatch, useAppSelector } from "@/statemanagement/store";
+import { useAppSelector } from "@/statemanagement/store";
 import { EnhancedPost } from "@/types/enhanced_post.type";
-import { useEffect } from "react";
 import { ContentCard } from "./contentcard";
 
 export const PostList = () => {
@@ -22,10 +20,6 @@ export const PostList = () => {
     });
     return enahncedPosts;
   });
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(getAllPosts());
-  }, []);
 
   return (
     <>

frontend/src/pages/main.tsx

@@ -1,10 +1,19 @@
 import { Header } from "@/components/header/header";
 import { MainPage } from "@/pages/subpages/Main";
+import { getAllChats } from "@/statemanagement/chats/chatSlice";
+import { getAllPosts } from "@/statemanagement/posting/postSlice";
+import { useAppDispatch } from "@/statemanagement/store";
 import { WebsocketProvider } from "@/websocket/websocketProvider";
+import { useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
 import { ChatsPage } from "./subpages/Chats";
 
 export const Main = () => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(getAllPosts());
+    dispatch(getAllChats());
+  }, []);
   return (
     <WebsocketProvider>
       <Header />

frontend/src/statemanagement/chats/chatSlice.ts

@@ -0,0 +1,97 @@
+import { ChatRoom } from "@/types/chatroom.type";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+export interface ChatState {
+  chats: ChatRoom[];
+  chatsLoading: boolean;
+  messageSending: boolean;
+}
+
+const initialState: ChatState = {
+  chats: [],
+  chatsLoading: false,
+  messageSending: false,
+};
+
+export const getAllChats = createAsyncThunk("chats/getAll", async () => {
+  let token = window.sessionStorage.getItem("token");
+
+  const response = await fetch(
+    "https://" + window.envUrl + "/api/v1/chats/query/chats/",
+    {
+      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 data;
+});
+
+export const addMessage = createAsyncThunk(
+  "chats/add",
+  async (payload: { text?: string; imageBase64?: string }) => {
+    /*let token = window.sessionStorage.getItem("token");
+    const tokenDec = jwtDecode(token!);
+    const chat = {
+      id: uuidv4(),
+      text: payload.text,
+      image_base64: payload.imageBase64,
+      user_id: tokenDec.sub,
+      change_date: new Date().toISOString(),
+    } as ChatRoom;
+    const response = await fetch(
+      "https://" + window.envUrl + "/api/v1/chats/command/chats/",
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(chat),
+        method: "Chat",
+      }
+    );
+    if (response.status > 299) {
+      throw new Error("Request failed with " + response.status);
+    }
+    return chat;*/
+  }
+);
+
+export const chatSlice = createSlice({
+  name: "chats",
+  initialState,
+  reducers: {
+    addChatSync: (state, action) => {
+      state.chats.unshift(action.payload);
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(getAllChats.pending, (state) => {
+      state.chatsLoading = true;
+    });
+    builder.addCase(getAllChats.rejected, (state) => {
+      state.chatsLoading = false;
+    });
+    builder.addCase(getAllChats.fulfilled, (state, action) => {
+      state.chatsLoading = false;
+      state.chats = action.payload;
+    });
+    builder.addCase(addMessage.pending, (state) => {
+      state.messageSending = true;
+    });
+    builder.addCase(addMessage.rejected, (state, err) => {
+      state.messageSending = false;
+      console.log(err);
+    });
+    builder.addCase(addMessage.fulfilled, (state) => {
+      state.messageSending = false;
+    });
+  },
+});
+
+export const { addChatSync } = chatSlice.actions;
+
+export default chatSlice.reducer;

frontend/src/statemanagement/store.ts

@@ -1,6 +1,7 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { useDispatch, useSelector } from "react-redux";
 import authenticationReducer from "./authentication/authenticationSlice";
+import chatReducer from "./chats/chatSlice";
 import postReducer from "./posting/postSlice";
 import usersReducer from "./users/usersSlice";
 
@@ -9,6 +10,7 @@ export const store = configureStore({
     authentication: authenticationReducer,
     users: usersReducer,
     posts: postReducer,
+    chats: chatReducer,
   },
 });
 

frontend/src/types/chatmessage.type.ts

@@ -0,0 +1,7 @@
+export interface ChatMessage {
+  id: string;
+  text: string;
+  image_base64: string;
+  user_id: string;
+  creation_date: string;
+}

frontend/src/types/chatroom.type.ts

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