refactor(routes): convert to TS

Author: danny-avila

client/src/routes/Chat.jsx renamed to client/src/routes/Chat.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
-import { useAuthContext } from '~/hooks/AuthContext';
+import { useAuthContext } from '~/hooks';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
-import Landing from '../components/ui/Landing';
-import Messages from '../components/Messages';
-import TextChat from '../components/Input/TextChat';
+import Landing from '~/components/ui/Landing';
+import Messages from '~/components/Messages';
+import TextChat from '~/components/Input/TextChat';
 
 import store from '~/store';
 import {
@@ -27,12 +27,12 @@ export default function Chat() {
   const navigate = useNavigate();
 
   //disabled by default, we only enable it when messagesTree is null
-  const messagesQuery = useGetMessagesByConvoId(conversationId, { enabled: false });
-  const getConversationMutation = useGetConversationByIdMutation(conversationId);
+  const messagesQuery = useGetMessagesByConvoId(conversationId ?? '', { enabled: false });
+  const getConversationMutation = useGetConversationByIdMutation(conversationId ?? '');
   const { data: config } = useGetStartupConfig();
 
   useEffect(() => {
-    let timeout = setTimeout(() => {
+    const timeout = setTimeout(() => {
       if (!isAuthenticated) {
         navigate('/login', { replace: true });
       }
@@ -97,11 +97,12 @@ export default function Chat() {
       }
     }
     document.title = conversation?.title || config?.appTitle || 'Chat';
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [conversation, conversationId, config]);
 
   useEffect(() => {
     if (messagesTree === null && conversation?.conversationId) {
-      messagesQuery.refetch(conversation?.conversationId);
+      messagesQuery.refetch({ queryKey: [conversation?.conversationId] });
     }
   }, [conversation?.conversationId, messagesQuery, messagesTree]);
 
@@ -113,6 +114,7 @@ export default function Chat() {
       console.error(messagesQuery.error);
       setMessages(null);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messagesQuery.data, messagesQuery.isError, setMessages]);
 
   if (!isAuthenticated) {

client/src/routes/Search.jsx renamed to client/src/routes/Search.tsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import Messages from '../components/Messages';
-import TextChat from '../components/Input/TextChat';
+import Messages from '~/components/Messages';
+import TextChat from '~/components/Input/TextChat';
 
 import store from '~/store';
 
@@ -34,6 +34,7 @@ export default function Search() {
       // conversationId (in url) should always follow conversation?.conversationId, unless conversation is null
       navigate(`/chat/${conversation?.conversationId}`);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [conversation, query, searchQuery]);
 
   // if not a search

client/src/routes/index.jsx renamed to client/src/routes/index.tsx

@@ -2,9 +2,14 @@ import { createBrowserRouter, Navigate, Outlet } from 'react-router-dom';
 import Root from './Root';
 import Chat from './Chat';
 import Search from './Search';
-import { Login, Registration, RequestPasswordReset, ResetPassword } from '../components/Auth';
-import { AuthContextProvider } from '../hooks/AuthContext';
-import ApiErrorWatcher from '../components/Auth/ApiErrorWatcher';
+import {
+  Login,
+  Registration,
+  RequestPasswordReset,
+  ResetPassword,
+  ApiErrorWatcher,
+} from '~/components/Auth';
+import { AuthContextProvider } from '~/hooks/AuthContext';
 
 const AuthLayout = () => (
   <AuthContextProvider>