Merge pull request #243 from mohamedsalem401/main

Refactor: Replace switch statement with react-router for components/homepage.

apps/webapp/src/App.tsx

@@ -1,24 +1,27 @@
-import './App.css'
-import { ThemeProvider } from '@/components/theme-provider'
-import DashboardPage from './components/homepage'
+import './App.css';
+import { ThemeProvider } from '@/components/theme-provider';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import JobsPage from './components/events';
+import LogsPage from './components/events';
 import ConnectionsPage from './components/connections';
 import TaskPage from './components/events/EventsTable';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from 'react-hot-toast';
+import { RootLayout } from './components/root-layout';
+import ConfigurationPage from './components/configuration';
+import ApiKeysPage from './components/api-keys';
+import DashboardPage from './components/dashboard';
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <ThemeProvider defaultTheme='dark' storageKey='vite-ui-theme'>
         <Toaster
-          position="bottom-right"
+          position='bottom-right'
           reverseOrder={false}
           gutter={8}
-          containerClassName=""
+          containerClassName=''
           containerStyle={{}}
           toastOptions={{
             // Define default options
@@ -27,21 +30,26 @@ function App() {
             style: {
               background: '#0A0A0B',
               color: '#fff',
-              border: "0.03rem solid white"
+              border: '0.03rem solid white',
             },
           }}
         />
         <Router>
           <Routes>
-            <Route path="/" element={<DashboardPage />} />
-            <Route path="/jobs" element={<JobsPage />} />
-            <Route path="/tasks" element={<TaskPage />} />
-            <Route path="/connections" element={<ConnectionsPage />} />
+            <Route path='/' element={<RootLayout />}>
+              <Route index element={<ConnectionsPage />} />
+              <Route path='/dashboard' element={<DashboardPage />} />
+              <Route path='/logs' element={<LogsPage />} />
+              <Route path='/tasks' element={<TaskPage />} />
+              <Route path='/configuration' element={<ConfigurationPage />} />
+              <Route path='/connections' element={<ConnectionsPage />} />
+              <Route path='/api-keys' element={<ApiKeysPage />} />
+            </Route>
           </Routes>
         </Router>
       </ThemeProvider>
     </QueryClientProvider>
-  )
+  );
 }
 
-export default App
+export default App;

apps/webapp/src/components/api-keys/index.tsx

@@ -30,9 +30,6 @@ export default function ApiKeysPage() {
   const {idProject} = useProjectStore();
   const {profile} = useProfileStore();
 
-  if(isLoading){ 
-    return <LoadingSpinner className=""/>
-  }
 
   if(error){
     console.log("error apiKeys..");
@@ -61,6 +58,7 @@ export default function ApiKeysPage() {
           <h2 className="text-lg font-bold tracking-tight">Manage your api keys.</h2>
         </div>          
         <div className="flex space-y-8 md:flex pb-4">
+          {isLoading ? ( <LoadingSpinner className=""/>) : <>
           <div></div>
           <Dialog>
             <DialogTrigger asChild>
@@ -99,6 +97,8 @@ export default function ApiKeysPage() {
               </DialogFooter>
             </DialogContent>
           </Dialog>
+          </>
+          }
         </div>
         {tsApiKeys && <DataTable data={tsApiKeys} columns={columns} />}
       </div>

apps/webapp/src/components/root-layout.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+import { MainNav } from './homepage/components/main-nav';
+import { SmallNav } from './homepage/components/main-nav-sm';
+import { UserNav } from './homepage/components/user-nav';
+import TeamSwitcher from './shared/team-switcher';
+import { Outlet, useNavigate } from 'react-router-dom';
+
+export const RootLayout = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const navigate = useNavigate();
+
+  const handlePageChange = (page: string) => {
+    navigate(page);
+  };
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+
+    window.addEventListener('resize', handleResize);
+
+    // Clean up the event listener when the component unmounts
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const lgBreakpoint = 1024; // Tailwind's 'lg' breakpoint
+
+  return (
+    <div>
+      {windowWidth < lgBreakpoint ? (
+        <SmallNav onLinkClick={handlePageChange} />
+      ) : (
+        <div className='items-center hidden lg:flex lg:flex-col border-r fixed left-0 bg-opacity-90 backdrop-filter backdrop-blur-lg w-[200px] h-screen'>
+          <div className='flex lg:flex-col items-center py-4 space-y-4'>
+            <div className='flex flex-row justify-center'>
+              <img src='logo.png' className='w-14' />
+            </div>
+            <TeamSwitcher className='w-40 ml-3' />
+            <MainNav
+              className='flex lg:flex-col mx-auto w-[200px] space-y-0'
+              onLinkClick={handlePageChange}
+            />
+            <div className='ml-auto flex lg:flex-col items-center space-x-4 w-full'>
+              <UserNav />
+            </div>
+          </div>
+        </div>
+      )}
+      <div className='flex-1 space-y-4 pt-6 px-10 lg:ml-[200px]'>
+        <Outlet />
+      </div>
+    </div>
+  );
+};