move logic to index page

apps/studio/components/layouts/LogsLayout/LogsLayout.tsx

@@ -8,42 +8,27 @@ import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { LogsSidebarMenuV2 } from './LogsSidebarMenuV2'
 import { useRouter } from 'next/router'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
-import { useParams } from 'common'
-
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 interface LogsLayoutProps {
   title?: string
 }
 
 const LogsLayout = ({ title, children }: PropsWithChildren<LogsLayoutProps>) => {
   const canUseLogsExplorer = useCheckPermissions(PermissionAction.ANALYTICS_READ, 'logflare')
-  const { ref } = useParams()
 
   const router = useRouter()
   const [lastLogsPage, setLastLogsPage] = useLocalStorageQuery(
-    'supabase-last-logs-page',
-    router.pathname
+    LOCAL_STORAGE_KEYS.LAST_VISITED_LOGS_PAGE,
+    router.pathname.split('/').pop()
   )
 
   useEffect(() => {
     if (router.pathname.includes('/logs/')) {
-      setLastLogsPage(router.pathname)
+      const path = router.pathname.split('/').pop()
+      setLastLogsPage(path)
     }
   }, [router, setLastLogsPage])
 
-  useEffect(() => {
-    const last5chars = router.pathname.slice(-5)
-    if (last5chars === '/logs' && lastLogsPage) {
-      router.push({
-        pathname: lastLogsPage,
-        query: { ref },
-      })
-    }
-
-    if (last5chars === '/logs' && !lastLogsPage) {
-      router.push('/logs/explorer')
-    }
-  }, [router, lastLogsPage, ref])
-
   if (!canUseLogsExplorer) {
     return (
       <ProjectLayout>

apps/studio/lib/constants/index.ts

@@ -83,6 +83,9 @@ export const LOCAL_STORAGE_KEYS = {
 
   // api keys view switcher for new and legacy api keys
   API_KEYS_VIEW: (ref: string) => `supabase-api-keys-view-${ref}`,
+
+  // last visited logs page
+  LAST_VISITED_LOGS_PAGE: 'supabase-last-visited-logs-page',
 }
 
 export const OPT_IN_TAGS = {

apps/studio/pages/project/[ref]/logs/index.tsx

@@ -1,8 +1,28 @@
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
 import DefaultLayout from 'components/layouts/DefaultLayout'
-
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { useParams } from 'common'
 export const LogPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = useParams()
+
+  const [lastVisitedLogsPage, setLastVisitedLogsPage] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.LAST_VISITED_LOGS_PAGE,
+    ''
+  )
+
+  useEffect(() => {
+    if (lastVisitedLogsPage) {
+      router.replace(`/project/${ref}/logs/${lastVisitedLogsPage}`)
+    } else {
+      router.replace(`/project/${ref}/logs/explorer`)
+    }
+  }, [router, lastVisitedLogsPage, ref])
+
   return <div></div>
 }