whoops

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

@@ -1,7 +1,7 @@
 import type { KeyboardEventHandler } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { socket } from '@/socket/socket.tsx';
+import { socket } from '@/socket/socket.ts';
 import { File, Paperclip, Send, X } from 'lucide-react';
 import LoadingWheel from '@/components/chat/LoadingWheel.tsx';
 import { FileWithPreviewProps } from '@/types/types.ts';

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { socket } from '@/socket/socket.tsx';
+import { socket } from '@/socket/socket.ts';
 import { useOutletContext } from 'react-router-dom';
 import { sendContact } from '@/api/contactsApi.tsx';
 import LoadingWheel from '../LoadingWheel.tsx';
@@ -215,7 +215,7 @@ function MessagesArea() {
 
   useEffect(() => {
     scrollToBottom();
-  });
+  }, []);
 
   return (
     <div ref={containerRef} className="flex flex-col h-full overflow-y-auto">

client/src/components/chat/chatHeader/AddGroupMember.tsx

@@ -1,7 +1,7 @@
 import LoadingWheel from '../LoadingWheel.tsx';
 import { useEffect, useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { socket } from '@/socket/socket.tsx';
+import { socket } from '@/socket/socket.ts';
 import { UserRoundPlus } from 'lucide-react';
 import { Button } from '@/components/ui/button.tsx';
 import { useChat } from '@/context/chat/useChat.ts';

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

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { socket } from '@/socket/socket.tsx';
+import { socket } from '@/socket/socket.ts';
 import GroupIcon from '../../../../assets/group.svg';
 import {
   AlertDialog,
@@ -32,7 +32,7 @@ function ContactsList() {
     fetchContacts().catch((e) =>
       console.error('Failed to fetch contacts: ', e),
     );
-  });
+  }, []);
 
   useEffect(() => {
     if (!socket) return;

client/src/components/chat/rightSidebar/ParticipantsBar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { socket } from '@/socket/socket.tsx';
+import { socket } from '@/socket/socket.ts';
 import { Crown, Sword } from 'lucide-react';
 import {
   ContextMenu,

client/src/components/ui/sidebar.tsx

@@ -87,15 +87,13 @@ const SidebarProvider = React.forwardRef<
       [setOpenProp, open],
     );
 
-    // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
       return isMobile
         ? setOpenMobile((open) => !open)
         : setOpen((open) => !open);
     }, [isMobile, setOpen, setOpenMobile]);
 
-    // Adds a keyboard shortcut to toggle the sidebar.
+    useEffect(() => {
-    React.useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
         if (
           event.key === SIDEBAR_KEYBOARD_SHORTCUT &&

client/src/context/chat/ChatProvider.tsx

@@ -1,7 +1,7 @@
 import { ChatContext } from '@/context/chat/ChatContext.tsx';
 import { ReactNode, useState } from 'react';
 import { ChatMessagesProps, ContactsProps, MeProps } from '@/types/types.ts';
-import { joinRoom } from '@/socket/socket.tsx';
+import { joinRoom } from '@/socket/socket.ts';
 import { getMessages, setContactStatus } from '@/api/contactsApi.tsx';
 import axios from 'axios';
 

client/src/pages/Chat.tsx

@@ -5,7 +5,7 @@ import ContactForm from '../components/chat/leftSidebar/ContactForm.tsx';
 import MessagesArea from '../components/chat/chatArea/MessagesArea.tsx';
 import { useEffect } from 'react';
 import ContactsList from '../components/chat/leftSidebar/ContactsList.tsx';
-import { initializeSocket } from '../socket/socket.tsx';
+import { initializeSocket } from '../socket/socket.ts';
 import Cookies from 'js-cookie';
 import ParticipantsBar from '@/components/chat/rightSidebar/ParticipantsBar.tsx';
 import { useChat } from '@/context/chat/useChat.ts';
@@ -29,7 +29,7 @@ function Chat() {
         localStorage.removeItem('contact');
       }
     }
-  });
+  }, []);
 
   return (
     <div className="text-white flex h-screen">