finito

client/.gitignore

@@ -16,7 +16,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
-.idea
+.idea/
 .DS_Store
 *.suo
 *.ntvs*

client/src/components/chat/chatArea/MessageElement.tsx

@@ -6,12 +6,12 @@ import { useChat } from '@/context/chat/useChat.ts';
 import { AuthContext } from '@/utils/AuthProvider.tsx';
 import { format, isToday, isYesterday, formatDistanceToNow } from 'date-fns';
 
-type AnimatedMessageProps = {
+type MessageElementProps = {
   message: ChatMessagesProps;
   onDelete: (messageId: number) => void;
 };
 
-const MessageElement = ({ onDelete, message }: AnimatedMessageProps) => {
+const MessageElement = ({ onDelete, message }: MessageElementProps) => {
   const { user } = useContext(AuthContext);
   const { me, groupOwner } = useChat();
   const [isRemoving, setIsRemoving] = useState(false);

client/src/components/chat/chatArea/MessagesArea.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState, useCallback } from 'react';
 import { socket } from '@/socket/socket.ts';
 import { sendContact } from '@/api/contactsApi.tsx';
 import LoadingWheel from '../LoadingWheel.tsx';
-import AnimatedMessage from '@/components/chat/chatArea/MessageElement.tsx';
+import MessageElement from '@/components/chat/chatArea/MessageElement.tsx';
 import { ChatMessagesProps } from '@/types/types.ts';
 import { useChat } from '@/context/chat/useChat.ts';
 import { AuthContext } from '@/utils/AuthProvider.tsx';
@@ -248,7 +248,7 @@ function MessagesArea() {
       <ul className="flex-grow list-none">
         {isLoading ? <LoadingWheel /> : null}
         {messages.map((msg: ChatMessagesProps) => (
-          <AnimatedMessage
+          <MessageElement
             key={msg.message_id}
             message={msg}
             onDelete={() => deleteMessage(msg.message_id)}

client/src/components/chat/leftSidebar/ContactForm.tsx

@@ -69,7 +69,7 @@ function ContactForm() {
 
       console.log('Submit contact: ', contactToSubmit);
       const response: AxiosResponse<ContactsProps> = await axiosClient.post(
-        `/api/chat/contact/${contactToSubmit}`,
+        `/api/chat/contacts/${contactToSubmit}`,
       );
 
       console.log('contact post response: ', response.data);

client/src/context/chat/ChatProvider.tsx

@@ -27,6 +27,7 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
     console.log('Initialized contact: ', newContact);
     try {
       const joinResult = await joinRoom(newContact.conversation_id);
+
       if (!joinResult.success) {
         setErrorMessage(joinResult.message);
         return false;

client/src/socket/socket.ts

@@ -1,4 +1,5 @@
 import io from 'socket.io-client';
+
 import Socket = SocketIOClient.Socket;
 let socket: Socket | null = null;
 function initializeSocket(token: string): Socket | null {
@@ -8,6 +9,7 @@ function initializeSocket(token: string): Socket | null {
       reconnection: true,
       reconnectionAttempts: 5,
       reconnectionDelay: 1000,
+      transports: ['websocket', 'pooling'],
     });
 
     socket.on('connect', () => console.log('connected'));

client/src/utils/AuthProvider.tsx

@@ -33,6 +33,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         const res = await axiosClient.get('/api/auth/validate', {
           withCredentials: true,
         });
+        if (!res.data.user_id) {
+          console.error('user_id is missing');
+          setAuthorized(false);
+          return;
+        }
         setUser({ username: res.data.username, id: res.data.user_id });
         console.info('user: : ', {
           username: res.data.username,