Refactor ChatWindow and ChatWindowWrapper: add user display name, enhance avatar handling, and improve message structure; update user fetching in Main component

Author: L4B0MB4

frontend/src/components/chats/ChatWindow.tsx

@@ -1,6 +1,11 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  chooseTwoCharsFromName,
+  randomTailwindBackgroundColor,
+} from "@/lib/utils";
+import { User } from "@/types/user.type";
 import { Send } from "lucide-react";
 import { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
@@ -12,7 +17,13 @@ interface Message {
   timestamp: string;
 }
 
-export default function ChatWindow({ messages }: { messages: Message[] }) {
+export default function ChatWindow({
+  withUser,
+  messages,
+}: {
+  withUser: User;
+  messages: Message[];
+}) {
   const [newMessage, setNewMessage] = useState("");
 
   const handleSendMessage = () => {
@@ -35,15 +46,15 @@ export default function ChatWindow({ messages }: { messages: Message[] }) {
     <div className="flex-1 flex flex-col">
       <div className="border-b border-gray-200 dark:border-slate-800 p-4 flex items-center space-x-4">
         <Avatar>
-          <AvatarImage
-            src="/placeholder.svg?height=40&width=40"
-            alt="Alice Johnson"
-          />
-          <AvatarFallback>AJ</AvatarFallback>
+          <AvatarFallback
+            className={randomTailwindBackgroundColor(withUser.id)}
+          >
+            {chooseTwoCharsFromName(withUser.display_name)}
+          </AvatarFallback>
         </Avatar>
         <div>
           <h2 className="text-black dark:text-white text-lg font-semibold">
-            Alice Johnson
+            {withUser.display_name}
           </h2>
           <p className="text-sm text-gray-500">Online</p>
         </div>

frontend/src/components/chats/ChatWindow_wrapper.tsx

@@ -2,20 +2,30 @@ import { useAppSelector } from "@/statemanagement/store";
 import ChatWindow from "./ChatWindow";
 
 export default function ChatWindowWrapper() {
-  const chatMessages = useAppSelector((state) => {
+  const { withUser, chatMessages } = useAppSelector((state) => {
     const ownUser = state.users.ownUser;
     const chats = state.chats.chats;
     const chat = chats.find((chat) => chat.id === state.chats.activeChatId);
-    return (
-      chat?.messages?.map((message) => {
-        return {
-          id: message.id,
-          content: message.text,
-          ownMessage: message.user_id === ownUser?.id,
-          timestamp: "",
-        };
-      }) ?? null
-    );
+    let otherUserId = chat?.user_ids.find((user) => user !== ownUser?.id);
+    let withUser = state.users.users.find((user) => user.id === otherUserId);
+    console.log(state.users);
+    return {
+      withUser,
+      chatMessages:
+        chat?.messages?.map((message) => {
+          return {
+            id: message.id,
+            content: message.text,
+            ownMessage: message.user_id === ownUser?.id,
+            timestamp: "",
+          };
+        }) ?? null,
+    };
   });
-  return <ChatWindow messages={chatMessages ?? []} />;
+  return (
+    <ChatWindow
+      withUser={withUser || { display_name: "", id: "" }}
+      messages={chatMessages ?? []}
+    />
+  );
 }

frontend/src/components/users/usersPanel.tsx

@@ -1,15 +1,8 @@
-import { useAppDispatch, useAppSelector } from "@/statemanagement/store";
-import { getAllUsers, getOwnUser } from "@/statemanagement/users/usersSlice";
-import { useEffect } from "react";
+import { useAppSelector } from "@/statemanagement/store";
 import { SidePanel } from "../SidePanel/SidePanel";
 
 export const UserPanel = () => {
   const userState = useAppSelector((state) => state.users);
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(getOwnUser());
-    dispatch(getAllUsers());
-  }, []);
 
   return (
     <>

frontend/src/lib/utils.ts

@@ -25,6 +25,9 @@ export function randomTailwindBackgroundColor(uniqueValue: string) {
 
 export function chooseTwoCharsFromName(name: string) {
   const [first, second] = name.split(" ");
+  if (!first || !second) {
+    return "";
+  }
   if (second) {
     return (first[0] + second[0]).toUpperCase();
   } else {

frontend/src/pages/main.tsx

@@ -3,6 +3,7 @@ import { MainPage } from "@/pages/subpages/Main";
 import { getAllChats } from "@/statemanagement/chats/chatSlice";
 import { getAllPosts } from "@/statemanagement/posting/postSlice";
 import { useAppDispatch } from "@/statemanagement/store";
+import { getAllUsers, getOwnUser } from "@/statemanagement/users/usersSlice";
 import { WebsocketProvider } from "@/websocket/websocketProvider";
 import { useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
@@ -13,6 +14,8 @@ export const Main = () => {
   useEffect(() => {
     dispatch(getAllPosts());
     dispatch(getAllChats());
+    dispatch(getOwnUser());
+    dispatch(getAllUsers());
   }, []);
   return (
     <WebsocketProvider>

frontend/src/types/chatroom.type.ts

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