Implemented client for fetching /api/chats/message

Author: igh9410

frontend/src/features/chat/api/chatApi.ts

@@ -1,20 +1,45 @@
 import { axiosInstance } from '@lib/axios';
 import { AxiosError } from 'axios';
 import { ChatMessagesResponse } from '../types';
+import { authTokenKey } from '@config';
 
 // Function to fetch chat messages with proper types
 export async function fetchChatMessagesFn(
   chatRoomId: string,
   pageParam?: string // Make pageParam optional as it may not be provided for the initial request
 ): Promise<ChatMessagesResponse> {
-  const chatMessagesURL = `/api/chats/${chatRoomId}/messages?cursor=${
-    pageParam ?? ''
-  }`;
+  // Parse the string into a Date object
+  const dateTimeString = '2023-11-09 21:06:13.567';
+  const date = new Date(dateTimeString);
 
+  // Format the Date object as an ISO 8601 string (commonly used in APIs)
+  const isoDateString = date.toISOString();
+  const chatMessagesURL = `/api/chats/${chatRoomId}/messages?cursor=${isoDateString}`;
+
+  console.log(isoDateString); // Outputs: 2023-11-09T21:06:13.567Z (note the 'Z' indicating UTC)
+
+  const supabaseData = localStorage.getItem(authTokenKey);
+
+  let accessToken = '';
+
+  if (supabaseData) {
+    const parsedData = JSON.parse(supabaseData);
+    accessToken = parsedData.access_token;
+  } else {
+    console.error('No Supabase data found in Local Storage');
+  }
   try {
+    console.log('Token = ', accessToken);
     const { data } = await axiosInstance.get<ChatMessagesResponse>(
-      chatMessagesURL
+      chatMessagesURL,
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
     );
+
     return data;
   } catch (error) {
     const axiosError = error as AxiosError;

frontend/src/features/chat/components/ChatArea.tsx

@@ -1,8 +1,10 @@
-import React, { useRef, useState } from 'react';
 import styles from './ChatArea.module.scss';
 import { Message } from './Message';
 import { useChatMessageStore } from '@stores';
-import { MessageType } from '../types';
+import { MessageType, ServerMessageType } from '../types';
+import { useChatMessages } from '@hooks';
+import { useEffect } from 'react';
+import { authTokenKey } from '@config';
 
 type ChatAreaProps = {
   messages: MessageType[];
@@ -12,16 +14,67 @@ export function ChatArea({ messages: propMessages }: Readonly<ChatAreaProps>) {
   const { messages: storeMessages } = useChatMessageStore((state) => ({
     messages: state.messages,
   }));
-  const [loading, setLoading] = useState(false);
-  const [cursor, setCursor] = useState<string | null>(null);
-  const chatAreaRef = useRef<HTMLDivElement>(null); // Ref for the chat area container */
+  // Call the custom hook and pass the chatRoomId to it
+  const chatRoomId = '25e4eb83-5210-448d-be58-3a4c355113be';
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    status,
+  } = useChatMessages(chatRoomId);
+  useEffect(() => {
+    console.log('Data loaded', data?.pages[0].messages);
+  }, [data]);
 
+  if (status === 'loading') return <p>Loading...</p>;
+  if (status === 'error') return <p>Error: {error.message}</p>;
+
+  const supabaseData = localStorage.getItem(authTokenKey);
+
+  let currentUserId = '';
+
+  if (supabaseData) {
+    const parsedData = JSON.parse(supabaseData);
+    currentUserId = parsedData.user.id;
+    console.log('Current user id', currentUserId);
+  } else {
+    console.error('No Supabase data found in Local Storage');
+  }
+
+  const restAPIMessages: ServerMessageType[] =
+    data?.pages.flatMap((page) =>
+      page.messages.map((message: unknown) => {
+        // Assert the message to be of type ServerMessageType
+        const serverMessage = message as unknown as ServerMessageType;
+
+        const adaptedMessage: ServerMessageType = {
+          id: serverMessage.id,
+          chat_room_id: serverMessage.chat_room_id,
+          sender:
+            serverMessage.sender_id === currentUserId ? 'sent' : 'received', // Set the sender based on the current user's ID
+          media_url: serverMessage.media_url,
+          created_at: serverMessage.created_at,
+          content: serverMessage.content,
+          sender_id: serverMessage.sender_id,
+        };
+
+        return adaptedMessage;
+      })
+    ) ?? [];
+
+  const combinedMessages = [...storeMessages, ...propMessages].sort(
+    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+  );
   return (
     <div className={styles.chatArea}>
-      {[...storeMessages, ...propMessages].map((message, timestamp) => (
-        <Message key={timestamp} {...message} text={message.content} />
+      {restAPIMessages.map((message) => (
+        <Message {...message} sender={message.sender} text={message.content} />
+      ))}
+      {combinedMessages.map((message) => (
+        <Message {...message} text={message.content} />
       ))}
-      {loading && <div>Loading more messages...</div>}
     </div>
   );
 }

frontend/src/features/chat/components/Message.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Message.module.scss';
 
 type MessageProps = {
-  sender: 'received' | 'sent';
+  sender: string;
   text: string;
   img?: string;
 };
@@ -14,9 +14,6 @@ export const Message = ({ sender, text, img }: MessageProps) => {
         sender === 'received' ? styles.messageReceived : styles.messageSent
       }
     >
-      {sender === 'received' && (
-        <img src={img} alt="Sender's Profile" className="profileImage" />
-      )}
       <p>{text}</p>
     </div>
   );

frontend/src/features/chat/types/index.ts

@@ -1,10 +1,24 @@
 export type MessageType = {
   sender: 'received' | 'sent';
+  senderID: string;
   content: string;
-  timestamp: Date;
+  createdAt: Date;
   img?: string; // Optional image URL for the sender's profile (for 'received' messages)
 };
 
+// A type for the incoming message that reflects the server's response
+export type ServerMessageType = {
+  id: number;
+  chat_room_id: string;
+  sender_id: string;
+  content: string;
+  media_url: string;
+  created_at: Date;
+  sender: 'received' | 'sent';
+};
+
+export type CombinedMessageType = ChatMessage & ServerMessageType;
+
 // TypeScript interfaces to represent the API response structure
 export interface ChatMessage {
   id: number;

frontend/src/hooks/useWebSocketConnection.ts

@@ -1,5 +1,5 @@
 import { WEBSOCKET_URL, authTokenKey } from '@config';
-import { MessageType } from '@features/chat';
+import { MessageType, ServerMessageType } from '@features/chat';
 import { useChatMessageStore } from '@stores';
 import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
@@ -16,7 +16,8 @@ export const useWebSocketConnection = () => {
   const sendMessage = (message: string) => {
     if (webSocket.current) {
       console.log('Sending message:', message);
-      webSocket.current.send(message);
+
+      webSocket.current.send(message); // serialize the object to a JSON string
     }
   };
 
@@ -47,7 +48,20 @@ export const useWebSocketConnection = () => {
     };
 
     const handleWebSocketOnMessage = (event: MessageEvent) => {
-      const receivedMessage: MessageType = JSON.parse(event.data);
+      const serverMessage: ServerMessageType = JSON.parse(event.data);
+
+      // Convert the snake_case properties from the server message to camelCase for the MessageType
+      const receivedMessage: MessageType = {
+        sender: 'received',
+        senderID: serverMessage.sender_id,
+        content: serverMessage.content,
+        createdAt: new Date(serverMessage.created_at),
+        img: serverMessage.media_url || undefined,
+      };
+
+      console.log('Receiving messages..', receivedMessage);
+
+      // receivedMessage.sender = 'received';
 
       addMessage(receivedMessage);
     };

frontend/src/pages/LobbyPage/Lobby.tsx

@@ -1,14 +1,15 @@
 import { ChatArea, InputArea, MessageType } from '@features/chat';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export function Lobby() {
   const [messages, setMessages] = useState<MessageType[]>([]);
 
   const handleNewMessage = (text: string) => {
     const newMessage: MessageType = {
       sender: 'sent',
+      senderID: '1', // TODO: replace with actual user ID
       content: text,
-      timestamp: new Date(),
+      createdAt: new Date(),
     };
     setMessages((prevMessages) => [...prevMessages, newMessage]);
   };