refactor(core): move usePerspective useEffect to its own logic and pr…

…ovider
sanity-io · Jan 20, 2025 · 3de7b73 · 3de7b73
1 parent 69d60cd
commit 3de7b73
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 56 deletions.
diff --git a/packages/sanity/src/core/releases/hooks/usePerspective.tsx b/packages/sanity/src/core/releases/hooks/usePerspective.tsx
@@ -1,15 +1,10 @@
 import {type ReleaseId} from '@sanity/client'
-import {Text, useToast} from '@sanity/ui'
-import {useCallback, useEffect, useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {useRouter} from 'sanity/router'
 
-import {useTranslation} from '../../i18n/hooks/useTranslation'
-import {Translate} from '../../i18n/Translate'
 import {type ReleaseDocument} from '../store/types'
 import {useReleases} from '../store/useReleases'
-import {LATEST} from '../util/const'
 import {getReleaseIdFromReleaseDocumentId} from '../util/getReleaseIdFromReleaseDocumentId'
-import {isPublishedPerspective} from '../util/util'
 import {getReleasesPerspectiveStack} from './utils'
 
 /**
@@ -49,10 +44,8 @@ const EMPTY_ARRAY: string[] = []
  */
 export function usePerspective(): PerspectiveValue {
   const router = useRouter()
-  const toast = useToast()
-  const {t} = useTranslation()
 
-  const {data: releases, archivedReleases, loading: releasesLoading} = useReleases()
+  const {data: releases} = useReleases()
   const selectedPerspectiveName = router.stickyParams.perspective as
     | 'published'
     | ReleaseId
@@ -83,52 +76,6 @@ export function usePerspective(): PerspectiveValue {
     [router],
   )
 
-  useEffect(() => {
-    // clear the perspective param when it is not an active release
-    if (
-      releasesLoading ||
-      !selectedPerspectiveName ||
-      isPublishedPerspective(selectedPerspectiveName)
-    )
-      return
-    const isCurrentPerspectiveValid = releases.some(
-      (release) => getReleaseIdFromReleaseDocumentId(release._id) === selectedPerspectiveName,
-    )
-    if (!isCurrentPerspectiveValid) {
-      setPerspective(LATEST)
-      const archived = archivedReleases.find(
-        (r) => getReleaseIdFromReleaseDocumentId(r._id) === selectedPerspectiveName,
-      )
-
-      toast.push({
-        id: `bundle-deleted-toast-${selectedPerspectiveName}`,
-        status: 'warning',
-        title: (
-          <Text muted size={1}>
-            <Translate
-              t={t}
-              i18nKey={
-                archived
-                  ? 'release.toast.archived-release.title'
-                  : 'release.toast.not-found-release.title'
-              }
-              values={{title: archived?.metadata?.title || selectedPerspectiveName}}
-            />
-          </Text>
-        ),
-        duration: 10000,
-      })
-    }
-  }, [
-    archivedReleases,
-    selectedPerspectiveName,
-    releases,
-    releasesLoading,
-    setPerspective,
-    toast,
-    t,
-  ])
-
   const selectedPerspective: SelectedPerspective = useMemo(() => {
     if (!selectedPerspectiveName) return 'drafts'
     if (selectedPerspectiveName === 'published') return 'published'

diff --git a/packages/sanity/src/core/studio/PerspectiveProvider.tsx b/packages/sanity/src/core/studio/PerspectiveProvider.tsx
@@ -0,0 +1,65 @@
+import {Text, useToast} from '@sanity/ui'
+import {type ReactNode, useEffect} from 'react'
+
+import {useTranslation} from '../i18n/hooks/useTranslation'
+import {Translate} from '../i18n/Translate'
+import {usePerspective} from '../releases/hooks/usePerspective'
+import {useReleases} from '../releases/store/useReleases'
+import {LATEST} from '../releases/util/const'
+import {getReleaseIdFromReleaseDocumentId} from '../releases/util/getReleaseIdFromReleaseDocumentId'
+import {isPublishedPerspective} from '../releases/util/util'
+
+export function PerspectiveProvider({children}: {children: ReactNode}) {
+  const toast = useToast()
+  const {t} = useTranslation()
+  const {data: releases, archivedReleases, loading: releasesLoading} = useReleases()
+  const {selectedPerspectiveName, setPerspective} = usePerspective()
+
+  useEffect(() => {
+    // clear the perspective param when it is not an active release
+    if (
+      releasesLoading ||
+      !selectedPerspectiveName ||
+      isPublishedPerspective(selectedPerspectiveName)
+    )
+      return
+    const isCurrentPerspectiveValid = releases.some(
+      (release) => getReleaseIdFromReleaseDocumentId(release._id) === selectedPerspectiveName,
+    )
+    if (!isCurrentPerspectiveValid) {
+      setPerspective(LATEST)
+      const archived = archivedReleases.find(
+        (r) => getReleaseIdFromReleaseDocumentId(r._id) === selectedPerspectiveName,
+      )
+
+      toast.push({
+        id: `bundle-deleted-toast-${selectedPerspectiveName}`,
+        status: 'warning',
+        title: (
+          <Text muted size={1}>
+            <Translate
+              t={t}
+              i18nKey={
+                archived
+                  ? 'release.toast.archived-release.title'
+                  : 'release.toast.not-found-release.title'
+              }
+              values={{title: archived?.metadata?.title || selectedPerspectiveName}}
+            />
+          </Text>
+        ),
+        duration: 10000,
+      })
+    }
+  }, [
+    archivedReleases,
+    selectedPerspectiveName,
+    releases,
+    releasesLoading,
+    setPerspective,
+    toast,
+    t,
+  ])
+
+  return <>{children}</>
+}
diff --git a/packages/sanity/src/core/studio/StudioProvider.tsx b/packages/sanity/src/core/studio/StudioProvider.tsx
@@ -19,6 +19,7 @@ import {ColorSchemeProvider} from './colorScheme'
 import {Z_OFFSET} from './constants'
 import {MaybeEnableErrorReporting} from './MaybeEnableErrorReporting'
 import {PackageVersionStatusProvider} from './packageVersionStatus/PackageVersionStatusProvider'
+import {PerspectiveProvider} from './PerspectiveProvider'
 import {
   AuthenticateScreen,
   ConfigErrorsScreen,
@@ -71,7 +72,9 @@ export function StudioProvider({
             <PackageVersionStatusProvider>
               <MaybeEnableErrorReporting errorReporter={errorReporter} />
               <ResourceCacheProvider>
-                <StudioAnnouncementsProvider>{children}</StudioAnnouncementsProvider>
+                <StudioAnnouncementsProvider>
+                  <PerspectiveProvider>{children}</PerspectiveProvider>
+                </StudioAnnouncementsProvider>
               </ResourceCacheProvider>
             </PackageVersionStatusProvider>
           </LocaleProvider>