From 97423dc1d4df26d94bca61d8d1f37fa212b48977 Mon Sep 17 00:00:00 2001 From: Rita Date: Mon, 20 Jan 2025 13:36:56 +0100 Subject: [PATCH] refactor(core): create usePerspectiveStack from usePerspective --- .../ReferenceInput/useReferenceInput.tsx | 8 ++-- packages/sanity/src/core/index.ts | 1 + .../__mocks__/usePerspective.mock.ts | 1 - .../__mocks__/usePerspectiveStack.mock.ts | 9 ++++ .../sanity/src/core/releases/hooks/index.ts | 1 + .../core/releases/hooks/usePerspective.tsx | 24 +--------- .../releases/hooks/usePerspectiveStack.tsx | 44 +++++++++++++++++++ .../item/SearchResultItemPreview.tsx | 4 +- .../search/contexts/search/SearchProvider.tsx | 4 +- .../src/presentation/PresentationTool.tsx | 4 +- .../components/paneItem/PaneItemPreview.tsx | 4 +- .../document/statusBar/DocumentStatusLine.tsx | 5 ++- .../panes/documentList/DocumentListPane.tsx | 4 +- 13 files changed, 74 insertions(+), 39 deletions(-) create mode 100644 packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspectiveStack.mock.ts create mode 100644 packages/sanity/src/core/releases/hooks/usePerspectiveStack.tsx diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/useReferenceInput.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/useReferenceInput.tsx index 74d54638c33..95ebd8ac462 100644 --- a/packages/sanity/src/core/form/inputs/ReferenceInput/useReferenceInput.tsx +++ b/packages/sanity/src/core/form/inputs/ReferenceInput/useReferenceInput.tsx @@ -12,7 +12,7 @@ import { import {type FIXME} from '../../../FIXME' import {useSchema} from '../../../hooks' -import {usePerspective} from '../../../releases/hooks/usePerspective' +import {usePerspectiveStack} from '../../../releases/hooks/usePerspectiveStack' import {useActiveReleases} from '../../../releases/store/useActiveReleases' import {useReleasesIds} from '../../../releases/store/useReleasesIds' import {useDocumentPreviewStore} from '../../../store' @@ -40,8 +40,8 @@ interface Options { export function useReferenceInput(options: Options) { const {path, schemaType, version} = options const schema = useSchema() - const perspective = usePerspective() const {data} = useActiveReleases() + const {perspectiveStack} = usePerspectiveStack() const {releasesIds} = useReleasesIds(data) const documentPreviewStore = useDocumentPreviewStore() const {EditReferenceLinkComponent, onEditReference, activePath, initialValueTemplateItems} = @@ -131,10 +131,10 @@ export function useReferenceInput(options: Options) { {version}, { bundleIds: releasesIds, - bundleStack: perspective.perspectiveStack, + bundleStack: perspectiveStack, }, ), - [documentPreviewStore, schemaType, version, releasesIds, perspective.perspectiveStack], + [documentPreviewStore, schemaType, version, releasesIds, perspectiveStack], ) return { diff --git a/packages/sanity/src/core/index.ts b/packages/sanity/src/core/index.ts index 08070a51f4b..e4b13460f17 100644 --- a/packages/sanity/src/core/index.ts +++ b/packages/sanity/src/core/index.ts @@ -41,6 +41,7 @@ export { useDocumentVersions, useIsReleaseActive, usePerspective, + usePerspectiveStack, useReleasesIds, useSelectedPerspectiveProps, useVersionOperations, diff --git a/packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspective.mock.ts b/packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspective.mock.ts index 2668517edfa..061c4d9aaee 100644 --- a/packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspective.mock.ts +++ b/packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspective.mock.ts @@ -5,7 +5,6 @@ import {type PerspectiveValue, usePerspective} from '../../usePerspective' export const usePerspectiveMockReturn: Mocked = { setPerspective: vi.fn(), selectedPerspective: 'drafts', - perspectiveStack: [], } export const mockUsePerspective = usePerspective as Mock diff --git a/packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspectiveStack.mock.ts b/packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspectiveStack.mock.ts new file mode 100644 index 00000000000..e0e2e617d9c --- /dev/null +++ b/packages/sanity/src/core/releases/hooks/__tests__/__mocks__/usePerspectiveStack.mock.ts @@ -0,0 +1,9 @@ +import {type Mock, type Mocked} from 'vitest' + +import {type PerspectiveStackValue, usePerspectiveStack} from '../../usePerspectiveStack' + +export const usePerspectiveMockReturn: Mocked = { + perspectiveStack: [], +} + +export const mockUsePerspective = usePerspectiveStack as Mock diff --git a/packages/sanity/src/core/releases/hooks/index.ts b/packages/sanity/src/core/releases/hooks/index.ts index 699ca5e16e1..6398f6a249c 100644 --- a/packages/sanity/src/core/releases/hooks/index.ts +++ b/packages/sanity/src/core/releases/hooks/index.ts @@ -1,5 +1,6 @@ export * from './useDocumentVersions' export * from './useIsReleaseActive' export * from './usePerspective' +export * from './usePerspectiveStack' export * from './useSelectedPerspectiveProps' export * from './useVersionOperations' diff --git a/packages/sanity/src/core/releases/hooks/usePerspective.tsx b/packages/sanity/src/core/releases/hooks/usePerspective.tsx index 9c455ee09bb..594c1c1787a 100644 --- a/packages/sanity/src/core/releases/hooks/usePerspective.tsx +++ b/packages/sanity/src/core/releases/hooks/usePerspective.tsx @@ -12,7 +12,6 @@ import {LATEST} from '../util/const' import {getReleaseIdFromReleaseDocumentId} from '../util/getReleaseIdFromReleaseDocumentId' import {isPublishedPerspective} from '../util/util' import {useSelectedPerspectiveProps} from './useSelectedPerspectiveProps' -import {getReleasesPerspectiveStack} from './utils' /** * @internal @@ -27,10 +26,6 @@ export interface PerspectiveValue { selectedPerspective: SelectedPerspective /* Change the perspective in the studio based on the perspective name */ setPerspective: (perspectiveId: 'published' | 'drafts' | ReleaseId | undefined) => void - /** - * The stacked array of releases ids ordered chronologically to represent the state of documents at the given point in time. - */ - perspectiveStack: string[] } const EMPTY_ARRAY: string[] = [] @@ -46,11 +41,6 @@ export function usePerspective(): PerspectiveValue { const {data: archivedReleases} = useArchivedReleases() const {selectedPerspectiveName} = useSelectedPerspectiveProps() - const excludedPerspectives = useMemo( - () => router.stickyParams.excludedPerspectives?.split(',') || EMPTY_ARRAY, - [router.stickyParams.excludedPerspectives], - ) - const setPerspective = useCallback( (releaseId: 'published' | 'drafts' | ReleaseId | undefined) => { let perspectiveParam = '' @@ -126,23 +116,11 @@ export function usePerspective(): PerspectiveValue { return selectedRelease || 'drafts' }, [selectedPerspectiveName, releases]) - const perspectiveStack = useMemo( - () => - getReleasesPerspectiveStack({ - releases, - selectedPerspectiveName, - excludedPerspectives, - }), - [releases, selectedPerspectiveName, excludedPerspectives], - ) - return useMemo( () => ({ selectedPerspective, - perspectiveStack, - setPerspective, }), - [selectedPerspective, perspectiveStack, setPerspective], + [selectedPerspective, setPerspective], ) } diff --git a/packages/sanity/src/core/releases/hooks/usePerspectiveStack.tsx b/packages/sanity/src/core/releases/hooks/usePerspectiveStack.tsx new file mode 100644 index 00000000000..2cd29bfc9d0 --- /dev/null +++ b/packages/sanity/src/core/releases/hooks/usePerspectiveStack.tsx @@ -0,0 +1,44 @@ +import {useMemo} from 'react' +import {useRouter} from 'sanity/router' + +import {useActiveReleases} from '../store/useActiveReleases' +import {useSelectedPerspectiveProps} from './useSelectedPerspectiveProps' +import {getReleasesPerspectiveStack} from './utils' + +export interface PerspectiveStackValue { + /** + * The stacked array of releases ids ordered chronologically to represent the state of documents at the given point in time. + */ + perspectiveStack: string[] +} + +const EMPTY_ARRAY: string[] = [] + +/** + * Perspective stack hook + + * @internal + */ +export function usePerspectiveStack(): PerspectiveStackValue { + const { + stickyParams: {excludedPerspectives: routerExcludedPerspectives}, + } = useRouter() + const {data: releases} = useActiveReleases() + const {selectedPerspectiveName} = useSelectedPerspectiveProps() + + const excludedPerspectives = useMemo( + () => routerExcludedPerspectives?.split(',') || EMPTY_ARRAY, + [routerExcludedPerspectives], + ) + + const perspectiveStack = useMemo( + () => + getReleasesPerspectiveStack({ + releases, + selectedPerspectiveName, + excludedPerspectives, + }), + [releases, selectedPerspectiveName, excludedPerspectives], + ) + return useMemo(() => ({perspectiveStack}), [perspectiveStack]) +} diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx index 80e777f83de..556b05b74dc 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx +++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/SearchResultItemPreview.tsx @@ -14,7 +14,7 @@ import { getPreviewValueWithFallback, SanityDefaultPreview, } from '../../../../../../../preview' -import {usePerspective} from '../../../../../../../releases/hooks/usePerspective' +import {usePerspectiveStack} from '../../../../../../../releases/hooks/usePerspectiveStack' import {useActiveReleases} from '../../../../../../../releases/store/useActiveReleases' import {useReleasesIds} from '../../../../../../../releases/store/useReleasesIds' import {isPerspectiveRaw} from '../../../../../../../search/common/isPerspectiveRaw' @@ -57,7 +57,7 @@ export function SearchResultItemPreview({ const documentPreviewStore = useDocumentPreviewStore() const {data, loading} = useActiveReleases() const {releasesIds} = useReleasesIds(data) - const {perspectiveStack} = usePerspective() + const {perspectiveStack} = usePerspectiveStack() const {state} = useSearchState() const isRaw = isPerspectiveRaw(state.perspective) diff --git a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchProvider.tsx b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchProvider.tsx index 84d548f44ea..dd4d8254b6e 100644 --- a/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchProvider.tsx +++ b/packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchProvider.tsx @@ -4,7 +4,7 @@ import {SearchContext} from 'sanity/_singletons' import {type CommandListHandle} from '../../../../../../components' import {useSchema} from '../../../../../../hooks' -import {usePerspective} from '../../../../../../releases/hooks/usePerspective' +import {usePerspectiveStack} from '../../../../../../releases/hooks/usePerspectiveStack' import {useActiveReleases} from '../../../../../../releases/store/useActiveReleases' import {isPerspectiveRaw, type SearchTerms} from '../../../../../../search' import {useCurrentUser} from '../../../../../../store' @@ -48,7 +48,7 @@ export function SearchProvider({ }: SearchProviderProps) { const [onClose, setOnClose] = useState<(() => void) | null>(null) const [searchCommandList, setSearchCommandList] = useState(null) - const {perspectiveStack} = usePerspective() + const {perspectiveStack} = usePerspectiveStack() const {data: releases} = useActiveReleases() const schema = useSchema() const currentUser = useCurrentUser() diff --git a/packages/sanity/src/presentation/PresentationTool.tsx b/packages/sanity/src/presentation/PresentationTool.tsx index 62b240022d3..4ed9d102b0d 100644 --- a/packages/sanity/src/presentation/PresentationTool.tsx +++ b/packages/sanity/src/presentation/PresentationTool.tsx @@ -25,7 +25,7 @@ import { type SanityDocument, type Tool, useDataset, - usePerspective, + usePerspectiveStack, useProjectId, useSelectedPerspectiveProps, useUnique, @@ -107,7 +107,7 @@ export default function PresentationTool(props: { state: PresentationStateParams } const routerSearchParams = useUnique(Object.fromEntries(routerState._searchParams || [])) - const {perspectiveStack} = usePerspective() + const {perspectiveStack} = usePerspectiveStack() const {selectedPerspectiveName = 'previewDrafts'} = useSelectedPerspectiveProps() const perspective = ( selectedPerspectiveName.startsWith('r') ? perspectiveStack : selectedPerspectiveName diff --git a/packages/sanity/src/structure/components/paneItem/PaneItemPreview.tsx b/packages/sanity/src/structure/components/paneItem/PaneItemPreview.tsx index 142567634e0..d8233dfea3a 100644 --- a/packages/sanity/src/structure/components/paneItem/PaneItemPreview.tsx +++ b/packages/sanity/src/structure/components/paneItem/PaneItemPreview.tsx @@ -15,7 +15,7 @@ import { isRecord, SanityDefaultPreview, useActiveReleases, - usePerspective, + usePerspectiveStack, useReleasesIds, useSelectedPerspectiveProps, } from 'sanity' @@ -50,7 +50,7 @@ export function PaneItemPreview(props: PaneItemPreviewProps) { const {data, loading} = useActiveReleases() const {releasesIds} = useReleasesIds(data) const {selectedPerspectiveName} = useSelectedPerspectiveProps() - const {perspectiveStack} = usePerspective() + const {perspectiveStack} = usePerspectiveStack() const previewStateObservable = useMemo( () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title, { diff --git a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusLine.tsx b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusLine.tsx index 04d120cb77a..843abcef8be 100644 --- a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusLine.tsx +++ b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusLine.tsx @@ -10,6 +10,7 @@ import { useActiveReleases, useDocumentPreviewStore, usePerspective, + usePerspectiveStack, useSchema, useSelectedPerspectiveProps, useSyncState, @@ -29,7 +30,9 @@ export function DocumentStatusLine() { const schema = useSchema() const schemaType = schema.get(documentType) const releases = useActiveReleases() - const {selectedPerspective, perspectiveStack} = usePerspective() + const {selectedPerspective} = usePerspective() + const {perspectiveStack} = usePerspectiveStack() + const {selectedReleaseId} = useSelectedPerspectiveProps() const previewStateObservable = useMemo( diff --git a/packages/sanity/src/structure/panes/documentList/DocumentListPane.tsx b/packages/sanity/src/structure/panes/documentList/DocumentListPane.tsx index 8c4bd7aee52..446f41dd19f 100644 --- a/packages/sanity/src/structure/panes/documentList/DocumentListPane.tsx +++ b/packages/sanity/src/structure/panes/documentList/DocumentListPane.tsx @@ -7,7 +7,7 @@ import { type GeneralPreviewLayoutKey, useActiveReleases, useI18nText, - usePerspective, + usePerspectiveStack, useSchema, useTranslation, useUnique, @@ -76,7 +76,7 @@ export const DocumentListPane = memo(function DocumentListPane(props: DocumentLi const {childItemId, isActive, pane, paneKey, sortOrder: sortOrderRaw, layout} = props const schema = useSchema() const releases = useActiveReleases() - const {perspectiveStack} = usePerspective() + const {perspectiveStack} = usePerspectiveStack() const {displayOptions, options} = pane const {apiVersion, filter} = options const params = useShallowUnique(options.params || EMPTY_RECORD)