feat: main screen

Signed-off-by: Azanul <azanulhaque@gmail.com>

frontend/src/App.tsx

@@ -3,14 +3,14 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
-import Wuphf from './features/wuphf/Wuphf';
 import AuthForm from './components/AuthForm';
 import ProtectedRoute from './components/ProtectedRoute';
+import ChatList from './components/ChatList';
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <ProtectedRoute exact path="/" component={Wuphf} />,
+    element: <ProtectedRoute exact path="/" component={ChatList} />,
   },
   {
     path: "/login",

frontend/src/components/ChatItem.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface ChatItemProps {
+  chat: {
+    id: string;
+    name: string;
+  };
+  onSelectChat: (chatId: string) => void;
+}
+
+const ChatItem: React.FC<ChatItemProps> = ({ chat, onSelectChat }) => {
+  return (
+    <li onClick={() => onSelectChat(chat.id)}>
+      {chat.name}
+    </li>
+  );
+};
+
+export default ChatItem;

frontend/src/components/ChatList.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchChats } from '../features/wuphf/wuphfSlice';
+import ChatItem from './ChatItem';
+import { RootState, AppDispatch } from '../app/store';
+
+interface ChatListProps {
+  onSelectChat: (chatId: string) => void;
+}
+
+const ChatList: React.FC<ChatListProps> = ({ onSelectChat }) => {
+  const dispatch = useDispatch<AppDispatch>();
+  const chats = useSelector((state: RootState) => state.wuphf.chats);
+  const chatStatus = useSelector((state: RootState) => state.wuphf.error);
+
+  useEffect(() => {
+    if (chatStatus === null) {
+      dispatch(fetchChats());
+    }
+  }, [chatStatus, dispatch]);
+
+  if (chatStatus === 'loading') {
+    return <div>Loading...</div>;
+  }
+
+  if (chatStatus === 'failed') {
+    return <div>Error fetching chats.</div>;
+  }
+
+  return (
+    <ul>
+      {chats.map((chat) => (
+        <ChatItem key={chat.chatId} chat={{id: chat.chatId, name: chat.chatId}} onSelectChat={onSelectChat} />
+      ))}
+    </ul>
+  );
+};
+
+export default ChatList;

frontend/src/components/WuphfForm.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { sendWuphf } from '../features/wuphf/wuphfSlice';
 
-type Props = { receiver_id: string }
+type Props = { chatId: string, receiver_id: string }
 
 const WuphfForm: React.FC<Props> = (props) => {
   const dispatch = useDispatch();
@@ -23,7 +23,7 @@ const WuphfForm: React.FC<Props> = (props) => {
       if (response.ok) {
         setStatus('Message sent successfully');
         setMessage('');
-        dispatch(sendWuphf(message));
+        dispatch(sendWuphf({chatId: props.chatId, message: message}));
       } else {
         setStatus('Failed to send message');
       }

frontend/src/features/wuphf/Wuphf.tsx

@@ -6,7 +6,7 @@ import WuphfForm, { Props } from '../../components/WuphfForm';
 
 const Wuphf: React.FC<Props> = (props) => {
   const dispatch = useDispatch<AppDispatch>();
-  const messages = useSelector((state: RootState) => state.wuphf.messages);
+  const messages = useSelector((state: RootState) => state.wuphf.chats.find((chat) => chat.chatId === props.chatId)?.messages);
   const loading = useSelector((state: RootState) => state.wuphf.loading);
   const error = useSelector((state: RootState) => state.wuphf.error);
 
@@ -17,9 +17,9 @@ const Wuphf: React.FC<Props> = (props) => {
   return (
     <div className="container mx-auto p-4">
       <h1 className="text-3xl font-bold text-center mb-6">WUPHF.com</h1>
-      <WuphfForm receiver_id={props.receiver_id} />
+      <WuphfForm receiver_id={props.receiver_id} chatId={props.chatId} />
       <ul className="mt-6 space-y-2">
-        {messages.map((message: any, index: React.Key) => (
+        {messages?.map((message: any, index: React.Key) => (
           <li key={index} className="p-2 bg-gray-100 rounded-lg shadow">
             {message.msg}
           </li>

frontend/src/features/wuphf/wuphfSlice.tsx

@@ -1,21 +1,82 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+type chat = { chatId: string, messages: string[] };
 
 interface WuphfState {
-  messages: string[];
+  chats: chat[];
+  loading: boolean;
+  error: string | null;
 }
 
 const initialState: WuphfState = {
-  messages: [],
+  chats: [],
+  loading: false,
+  error: null,
 };
 
+export const fetchChats = createAsyncThunk('wuphf/fetchChats', async () => {
+  const response = await fetch(`${process.env.REACT_APP_BASE_URL}/history?userId=${localStorage.getItem('user_id')}`, {
+    headers: {
+      'Authorization': localStorage.getItem('token') || '',
+    },
+  });
+  if (!response.ok) {
+    throw new Error('Failed to fetch chats');
+  }
+  return await response.json();
+});
+
+export const fetchMessages = createAsyncThunk('wuphf/fetchMessages', async (chatId) => {
+  const response = await fetch(`${process.env.REACT_APP_BASE_URL}/history?chatId=${chatId}`, {
+    headers: {
+      'Authorization': localStorage.getItem('token') || '',
+    },
+  });
+  if (!response.ok) {
+    throw new Error('Failed to fetch chats');
+  }
+  return await response.json();
+});
+
 const wuphfSlice = createSlice({
   name: 'wuphf',
   initialState,
   reducers: {
-    sendWuphf: (state, action: PayloadAction<string>) => {
-      state.messages.push(action.payload);
+    sendWuphf: (state, action: PayloadAction<{ chatId: string; message: string }>) => {
+      const { chatId, message } = action.payload;
+      const chat = state.chats.find((chat) => chat.chatId === chatId);
+      if (chat) {
+        chat.messages.push(message);
+      }
     },
   },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchChats.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(fetchChats.fulfilled, (state, action) => {
+        state.loading = false;
+        state.chats = action.payload;
+      })
+      .addCase(fetchChats.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message || 'Failed to fetch chats';
+      })
+      .addCase(fetchMessages.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(fetchMessages.fulfilled, (state, action) => {
+        state.loading = false;
+        state.chats = action.payload;
+      })
+      .addCase(fetchMessages.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message || 'Failed to fetch messages';
+      });
+  },
 });
 
 export const { sendWuphf } = wuphfSlice.actions;