refactor code

maheshj01 · Jun 27, 2024 · 5969735 · 5969735
1 parent 30c0af9
commit 5969735
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 62 deletions.
diff --git a/src/app/(main)/_components/RouteClient.tsx b/src/app/(main)/_components/RouteClient.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import Analytics from '../_services/Analytics';
+import { useSidebar } from '../_services/Context';
+
+export default function RouteClient() {
+    const searchParams = useSearchParams();
+    const pathName = usePathname();
+    const { showSideBar, setShowSideBar, id } = useSidebar();
+
+    const handleRouteChange = (url: string) => {
+        console.log('route change', url);
+        switch (url) {
+            case '/':
+                Analytics.logPageView(url, 'Welcome');
+                break;
+            case '/logs':
+                Analytics.logPageView(url, 'New Log');
+                break;
+            case `/logs/${id}`:
+                Analytics.logPageView(url, 'individual log');
+                break;
+            default:
+                break;
+        }
+    };
+    useEffect(() => {
+        handleRouteChange(pathName)
+    }, [pathName, searchParams]);
+
+    return null;
+}
diff --git a/src/app/(main)/logs/layout.tsx b/src/app/(main)/logs/layout.tsx
@@ -3,28 +3,16 @@
 import ClearIcon from '@mui/icons-material/Clear';
 import ViewSidebarRoundedIcon from '@mui/icons-material/ViewSidebarRounded';
 import { useTheme } from 'next-themes';
-import { usePathname, useSearchParams } from 'next/navigation';
 import React, { Suspense, useEffect } from 'react';
 import IconButton from "../_components/IconButton";
 import PSBanner from '../_components/PSBanner';
 import PSNavbar from '../_components/PSNavbar';
+import RouteClient from '../_components/RouteClient';
 import Sidebar from '../_components/Sidebar';
 import { Theme } from '../_components/ThemeSwitcher';
-import Analytics from '../_services/Analytics';
 import useBannerState from '../_services/BannerState';
 import { useSidebar } from '../_services/Context';
 
-function LogsLayoutClient({ onRouteChange }: { onRouteChange: (url: string) => void }) {
-    const searchParams = useSearchParams();
-    const pathname = usePathname();
-
-    useEffect(() => {
-        onRouteChange(pathname);
-    }, [pathname, searchParams, onRouteChange]);
-
-    return null;
-}
-
 export default function LogsLayout({ children }: { children: React.ReactNode }) {
     const { theme, setTheme } = useTheme();
     const { showSideBar, setShowSideBar, id } = useSidebar();
@@ -52,23 +40,6 @@ export default function LogsLayout({ children }: { children: React.ReactNode })
     }, [setTheme])
 
 
-    const handleRouteChange = (url: string) => {
-        console.log('route change', url);
-        switch (url) {
-            case '/':
-                Analytics.logPageView(url, 'Welcome');
-                break;
-            case '/logs':
-                Analytics.logPageView(url, 'New Log');
-                break;
-            case `/logs/${id}`:
-                Analytics.logPageView(url, 'individual log');
-                break;
-            default:
-                break;
-        }
-    };
-
     return (
         <div className={`flex ${theme === Theme.DARK ? 'dark' : 'light'}`}>
             <div className={`fixed top-0 left-0 z-50 h-screen overflow-y-auto ${showSideBar ? 'w-64' : 'w-0'}`}>
@@ -110,7 +81,7 @@ export default function LogsLayout({ children }: { children: React.ReactNode })
                 </div>
             </div>
             <Suspense fallback={<div>Loading...</div>}>
-                <LogsLayoutClient onRouteChange={handleRouteChange} />
+                <RouteClient />
             </Suspense>
         </div>
     );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,41 +1,12 @@
 "use client";
-import { usePathname, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useState } from 'react';
+import RouteClient from './(main)/_components/RouteClient';
 import Welcome from './(main)/_components/Welcome';
-import Analytics from './(main)/_services/Analytics';
-
-function LogsLayoutClient({ onRouteChange }: { onRouteChange: (url: string) => void }) {
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-
-  useEffect(() => {
-    onRouteChange(pathname);
-  }, [pathname, searchParams, onRouteChange]);
-
-  return null;
-}
-
 
 export default function Page() {
   const [isFirstVisit, setIsFirstVisit] = useState(true);
   const [loading, setLoading] = useState(true);
 
-  const handleRouteChange = (url: string) => {
-    console.log('route change', url);
-    switch (url) {
-      case '/':
-        Analytics.logPageView(url, 'Welcome');
-        break;
-      case '/logs':
-        Analytics.logPageView(url, 'New Log');
-        break;
-      case '/logs/[id]':
-        Analytics.logPageView(url, 'individual log');
-        break;
-      default:
-        break;
-    }
-  };
   useEffect(() => {
     const f = localStorage.getItem(`${process.env.NEXT_PUBLIC_NEW_USER_VISITED}`) ?? 'true';
     const firstVisit = f === 'true';
@@ -54,7 +25,7 @@ export default function Page() {
   }
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <LogsLayoutClient onRouteChange={handleRouteChange} />
+      <RouteClient />
       <Welcome />
     </Suspense>
   );