Clean up saving and loading org slug local storage logic, was for Nav V2 (#33588)

* Clean up saving and loading org slug local storage logic, was for Nav V2

* fix useProjectByRef for branches

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>

apps/studio/components/interfaces/App/RouteValidationWrapper.tsx

@@ -6,7 +6,7 @@ import { useIsLoggedIn, useParams } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import useLatest from 'hooks/misc/useLatest'
-import { DEFAULT_HOME, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { DEFAULT_HOME, IS_PLATFORM } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 
 // Ideally these could all be within a _middleware when we use Next 12
@@ -85,30 +85,6 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
     }
   }, [projectsInitialized])
 
-  useEffect(() => {
-    if (orgsInitialized && slug) {
-      // Save organization slug to local storage
-      const organizations = organizationsRef.current ?? []
-      const organization = organizations.find((org) => org.slug === slug)
-      if (organization) {
-        localStorage.setItem(LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION, organization.slug)
-      }
-    }
-  }, [slug, orgsInitialized])
-
-  useEffect(() => {
-    if (projectsInitialized && ref) {
-      // Save organization slug to local storage
-      const projects = projectsRef.current ?? []
-      const project = projects.find((project) => project.ref === ref)
-      const organizationId = project?.organization_id
-      const organization = organizations?.find((organization) => organization.id === organizationId)
-      if (organization) {
-        localStorage.setItem(LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION, organization.slug)
-      }
-    }
-  }, [ref, projectsInitialized])
-
   useEffect(() => {
     if (ref !== undefined && id !== undefined) {
       if (router.pathname.endsWith('/sql/[id]') && id !== 'new') {

apps/studio/hooks/misc/useSelectedOrganization.ts

@@ -2,32 +2,7 @@ import { useIsLoggedIn, useParams } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useMemo } from 'react'
 
-import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useProjectByRef } from './useSelectedProject'
-import { useOrganizationQuery } from 'data/organizations/organization-query'
-
-// [Joshen] Scaffolding this first - will need to double check if this can replace useSelectedOrganization
-export function useSelectedOrganizationV2({ enabled = true } = {}) {
-  const isLoggedIn = useIsLoggedIn()
-  const { ref, slug } = useParams()
-
-  const selectedProject = useProjectByRef(ref)
-  const localStorageSlug = useMemo(() => {
-    return typeof window !== 'undefined'
-      ? localStorage.getItem(LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION)
-      : null
-  }, [])
-
-  const orgSlug = slug ?? selectedProject?.organization_slug ?? localStorageSlug
-  const { data } = useOrganizationQuery(
-    { slug: orgSlug as string },
-    { enabled: enabled && isLoggedIn && typeof orgSlug === 'string' }
-  )
-
-  return useMemo(() => {
-    return data
-  }, [data, slug, selectedProject, localStorageSlug])
-}
 
 export function useSelectedOrganization({ enabled = true } = {}) {
   const isLoggedIn = useIsLoggedIn()
@@ -37,18 +12,11 @@ export function useSelectedOrganization({ enabled = true } = {}) {
 
   const selectedProject = useProjectByRef(ref)
 
-  const localStorageSlug = useMemo(() => {
-    return typeof window !== 'undefined'
-      ? localStorage.getItem(LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION)
-      : null
-  }, [])
-
   return useMemo(() => {
     return data?.find((org) => {
       if (slug !== undefined) return org.slug === slug
       if (selectedProject !== undefined) return org.id === selectedProject.organization_id
-      if (localStorageSlug !== undefined) return org.slug === localStorageSlug
       return undefined
     })
-  }, [data, selectedProject, slug, localStorageSlug])
+  }, [data, selectedProject, slug])
 }

apps/studio/hooks/misc/useSelectedProject.ts

@@ -1,6 +1,6 @@
 import { useIsLoggedIn, useParams } from 'common'
 import { useProjectDetailQuery } from 'data/projects/project-detail-query'
-import { useProjectsQuery } from 'data/projects/projects-query'
+import { ProjectInfo, useProjectsQuery } from 'data/projects/projects-query'
 import { useMemo } from 'react'
 
 export function useSelectedProject({ enabled = true } = {}) {
@@ -13,13 +13,23 @@ export function useSelectedProject({ enabled = true } = {}) {
   )
 }
 
-export function useProjectByRef(ref?: string) {
+export function useProjectByRef(
+  ref?: string
+): Omit<ProjectInfo, 'organization_slug' | 'preview_branch_refs'> | undefined {
   const isLoggedIn = useIsLoggedIn()
+
+  const { data: project } = useProjectDetailQuery({ ref }, { enabled: isLoggedIn })
+
+  // [Alaister]: This is here for the purpose of improving performance.
+  // Chances are, the user will already have the list of projects in the cache.
+  // We can't exclusively rely on this method, as useProjectsQuery does not return branch projects.
   const { data: projects } = useProjectsQuery({ enabled: isLoggedIn })
+
   return useMemo(() => {
     if (!ref) return undefined
+    if (project) return project
     return projects?.find((project) => project.ref === ref)
-  }, [projects, ref])
+  }, [project, projects, ref])
 }
 
 export const useIsOrioleDb = () => {

apps/studio/lib/constants/index.ts

@@ -30,8 +30,6 @@ export const STRIPE_PUBLIC_KEY =
 export const USAGE_APPROACHING_THRESHOLD = 0.75
 
 export const LOCAL_STORAGE_KEYS = {
-  RECENTLY_VISITED_ORGANIZATION: 'supabase-organization',
-
   AI_ASSISTANT_STATE: 'supabase-ai-assistant-state',
 
   UI_PREVIEW_NAVIGATION_LAYOUT: 'supabase-ui-preview-nav-layout',