|
1 | | -import {Box, Card, Flex, Spinner, Text} from '@sanity/ui' |
2 | | -import React, {useEffect, useState} from 'react' |
| 1 | +import {memo, useCallback, useEffect, useState} from 'react' |
3 | 2 | import {resolveIntent} from '../../../structureResolvers' |
4 | | -import {RouterPanes} from '../../../types' |
5 | 3 | import {useDeskTool} from '../../../useDeskTool' |
6 | | -import {Delay} from '../../Delay' |
7 | | -import {Redirect} from './Redirect' |
8 | 4 | import {ensureDocumentIdAndType} from './utils' |
9 | | -import {useDocumentStore, useUnique} from 'sanity' |
| 5 | +import {useRouter, useRouterState} from 'sanity/router' |
| 6 | +import {isRecord, useDocumentStore} from 'sanity' |
10 | 7 |
|
11 | | -export interface IntentResolverProps { |
12 | | - intent: string |
13 | | - params: Record<string, unknown> // {type: string; id: string; [key: string]: string | undefined} |
14 | | - payload: unknown |
15 | | -} |
| 8 | +const EMPTY_RECORD: Record<string, unknown> = {} |
16 | 9 |
|
17 | 10 | /** |
18 | 11 | * A component that receives an intent from props and redirects to the resolved |
19 | 12 | * intent location (while showing a loading spinner during the process) |
20 | 13 | */ |
21 | | -export function IntentResolver({ |
22 | | - intent, |
23 | | - params: paramsProp = {}, |
24 | | - payload: payloadProp, |
25 | | -}: IntentResolverProps) { |
| 14 | +export const IntentResolver = memo(function IntentResolver() { |
| 15 | + const {navigate} = useRouter() |
| 16 | + const maybeIntent = useRouterState( |
| 17 | + useCallback((routerState) => { |
| 18 | + const intentName = typeof routerState.intent === 'string' ? routerState.intent : undefined |
| 19 | + return intentName |
| 20 | + ? { |
| 21 | + intent: intentName, |
| 22 | + params: isRecord(routerState.params) ? routerState.params : EMPTY_RECORD, |
| 23 | + payload: routerState.payload, |
| 24 | + } |
| 25 | + : undefined |
| 26 | + }, []) |
| 27 | + ) |
26 | 28 | const {rootPaneNode, structureContext} = useDeskTool() |
27 | 29 | const documentStore = useDocumentStore() |
28 | | - const params = useUnique(paramsProp) |
29 | | - const payload = useUnique(payloadProp) |
30 | | - const [nextRouterPanes, setNextRouterPanes] = useState<RouterPanes | null>(null) |
31 | 30 | const [error, setError] = useState<unknown>(null) |
32 | | - const idParam = typeof params.id === 'string' ? params.id : undefined |
33 | | - const typeParam = typeof params.type === 'string' ? params.type : undefined |
34 | 31 |
|
| 32 | + // this re-throws errors so that parent ErrorBoundary's can handle them properly |
| 33 | + if (error) throw error |
| 34 | + |
| 35 | + // eslint-disable-next-line consistent-return |
35 | 36 | useEffect(() => { |
36 | | - const cancelledRef = {current: false} |
| 37 | + if (maybeIntent) { |
| 38 | + const {intent, params, payload} = maybeIntent |
37 | 39 |
|
38 | | - async function getNextRouterPanes() { |
39 | | - const {id, type} = await ensureDocumentIdAndType(documentStore, idParam, typeParam) |
| 40 | + let cancelled = false |
| 41 | + // eslint-disable-next-line no-inner-declarations |
| 42 | + async function effect() { |
| 43 | + const {id, type} = await ensureDocumentIdAndType( |
| 44 | + documentStore, |
| 45 | + typeof params.id === 'string' ? params.id : undefined, |
| 46 | + typeof params.type === 'string' ? params.type : undefined |
| 47 | + ) |
40 | 48 |
|
41 | | - return resolveIntent({ |
42 | | - intent, |
43 | | - params: {...params, id, type}, |
44 | | - payload, |
45 | | - rootPaneNode, |
46 | | - structureContext, |
47 | | - }) |
48 | | - } |
| 49 | + if (cancelled) return |
49 | 50 |
|
50 | | - getNextRouterPanes() |
51 | | - .then((result) => { |
52 | | - if (!cancelledRef.current) { |
53 | | - setNextRouterPanes(result) |
54 | | - } |
55 | | - }) |
56 | | - .catch(setError) |
| 51 | + const panes = await resolveIntent({ |
| 52 | + intent, |
| 53 | + params: {...params, id, type}, |
| 54 | + payload, |
| 55 | + rootPaneNode, |
| 56 | + structureContext, |
| 57 | + }) |
57 | 58 |
|
58 | | - return () => { |
59 | | - cancelledRef.current = true |
60 | | - } |
61 | | - }, [documentStore, idParam, intent, params, payload, rootPaneNode, structureContext, typeParam]) |
| 59 | + if (cancelled) return |
62 | 60 |
|
63 | | - // throwing here bubbles the error up to the error boundary inside of the |
64 | | - // `DeskToolRoot` component |
65 | | - if (error) throw error |
66 | | - if (nextRouterPanes) return <Redirect panes={nextRouterPanes} /> |
| 61 | + navigate({panes}, {replace: true}) |
| 62 | + } |
67 | 63 |
|
68 | | - return ( |
69 | | - <Card height="fill"> |
70 | | - <Delay ms={300}> |
71 | | - <Flex align="center" direction="column" height="fill" justify="center"> |
72 | | - <Spinner muted /> |
73 | | - <Box marginTop={3}> |
74 | | - <Text align="center" muted size={1}> |
75 | | - Loading… |
76 | | - </Text> |
77 | | - </Box> |
78 | | - </Flex> |
79 | | - </Delay> |
80 | | - </Card> |
81 | | - ) |
82 | | -} |
| 64 | + effect().catch(setError) |
| 65 | + |
| 66 | + return () => { |
| 67 | + cancelled = true |
| 68 | + } |
| 69 | + } |
| 70 | + }, [documentStore, maybeIntent, navigate, rootPaneNode, structureContext]) |
| 71 | + |
| 72 | + return null |
| 73 | +}) |
0 commit comments