Merge pull request #19 from kuna-mata/feature/18-kt-14-modify-chat-po…

…st-functionality Feature/18 kt 14 modify chat post functionality
kuna-mata · Nov 7, 2024 · 19a5512 · 19a5512
2 parents bc207a4 + 24d7d6e
commit 19a5512
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 24 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Chat } from './pages/chat';
+import { Chat } from './pages/Chat';
 
 function App() {
   return <Chat />;

diff --git a/src/api/messages.ts b/src/api/messages.ts
@@ -1,6 +1,11 @@
 import { AxiosResponse } from 'axios';
+
 import { axiosClient } from '../config/axios';
-import { CreateMessageDto, ReadMessageDto } from '../dto/message.dto';
+import {
+  CreateMessageDto,
+  GetAllMessagesDto,
+  GetMessageDto,
+} from '../dto/message.dto';
 import { Message } from '../types/api/message';
 
 export async function createMessage(
@@ -17,17 +22,32 @@ export async function createMessage(
   }
 }
 
-export async function readMessage(
-  dto: ReadMessageDto,
-): Promise<AxiosResponse<Message>> {
+export async function getAllMessages(
+  dto: GetAllMessagesDto,
+): Promise<Message[]> {
   try {
     const response = await axiosClient.get('/chat', {
       params: dto,
     });
 
     console.log(response);
 
-    return response;
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+}
+
+export async function getMessage(dto: GetMessageDto): Promise<Message> {
+  try {
+    const response = await axiosClient.get('/chat', {
+      params: dto,
+    });
+
+    console.log(response);
+
+    return response.data;
   } catch (error) {
     console.log(error);
     throw error;

diff --git a/src/dto/message.dto.ts b/src/dto/message.dto.ts
@@ -7,7 +7,13 @@ export interface CreateMessageDto {
   updatedAt: Date;
 }
 
-export interface ReadMessageDto {
+export interface GetAllMessagesDto {
+  senderId: string;
+  receiverId: string;
+  createdAt: Date;
+}
+
+export interface GetMessageDto {
   senderId: string;
   receiverId: string;
   messageId: string;

diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx
@@ -1,21 +1,19 @@
 import { useState, useCallback } from 'react';
 
-import { AxiosResponse } from 'axios';
-
-import { createMessage, readMessage } from '../api/messages';
-import { CreateMessageDto, ReadMessageDto } from '../dto/message.dto';
+import { createMessage, getAllMessages } from '../api/messages';
+import { CreateMessageDto, GetAllMessagesDto } from '../dto/message.dto';
 import { Message } from '../types/api/message';
 import { delay, randomId } from '../utils';
 
 export function Chat() {
   const [newMessage, setNewMessage] = useState<string>('');
-  const [messages, setMessages] = useState<AxiosResponse<Message>[]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
 
-  const fetchMessage = useCallback(async (dto: ReadMessageDto) => {
-    const message = await readMessage(dto);
+  const fetchMessage = useCallback(async (dto: GetAllMessagesDto) => {
+    const messages = await getAllMessages(dto);
 
-    if (message) {
-      setMessages((prev) => [...prev, message]);
+    if (messages) {
+      setMessages((prev) => [...prev, ...messages]);
     }
   }, []);
 
@@ -38,10 +36,10 @@ export function Chat() {
       setNewMessage('');
 
       if (status === 201) {
-        const fetchDto: ReadMessageDto = {
+        const fetchDto: GetAllMessagesDto = {
           senderId: data.senderId,
           receiverId: data.receiverId,
-          messageId: data.messageId,
+          createdAt: data.createdAt,
         };
 
         await delay(1000);
@@ -64,16 +62,14 @@ export function Chat() {
         <button onClick={sendMessage}>Send</button>
 
         {messages.length > 0
-          ? messages.map((value: AxiosResponse<Message>, index: number) => {
-              const data = value.data;
-
+          ? messages.map((value: Message, index: number) => {
               return (
                 <div key={index}>
                   <div>
-                    <strong>Sender: {data.senderId}</strong>
+                    <strong>Sender: {value.senderId}</strong>
                     <br />
-                    <strong>Receiver: {data.receiverId}</strong>
-                    <p>Message: {data.message}</p>
+                    <strong>Receiver: {value.receiverId}</strong>
+                    <p>Message: {value.message}</p>
                   </div>
                 </div>
               );