From 8ef93fbf9b1ef16605c18235780614d3e8119ef6 Mon Sep 17 00:00:00 2001 From: rdunk Date: Fri, 6 Dec 2024 15:01:56 +0000 Subject: [PATCH] refactor(presentation): use typed connection status --- packages/presentation/src/PresentationTool.tsx | 1 + .../src/editor/PostMessageRefreshMutations.tsx | 7 +++---- packages/presentation/src/index.ts | 1 + packages/presentation/src/preview/Preview.tsx | 15 ++++++++------- packages/presentation/src/types.ts | 2 ++ packages/presentation/src/useStatus.ts | 12 +++++++----- 6 files changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/presentation/src/PresentationTool.tsx b/packages/presentation/src/PresentationTool.tsx index d6de939003..7383065b5f 100644 --- a/packages/presentation/src/PresentationTool.tsx +++ b/packages/presentation/src/PresentationTool.tsx @@ -274,6 +274,7 @@ export default function PresentationTool(props: { ) }) + // @todo This won't work for multiple window contexts? comlink.on('visual-editing/refreshing', (data) => { if (data.source === 'manual') { clearTimeout(refreshRef.current) diff --git a/packages/presentation/src/editor/PostMessageRefreshMutations.tsx b/packages/presentation/src/editor/PostMessageRefreshMutations.tsx index 1ffad541a1..62aeb19bc0 100644 --- a/packages/presentation/src/editor/PostMessageRefreshMutations.tsx +++ b/packages/presentation/src/editor/PostMessageRefreshMutations.tsx @@ -1,15 +1,14 @@ -import type {Status} from '@sanity/comlink' import {memo, startTransition, useEffect, useMemo, useState} from 'react' import {type SanityDocument} from 'sanity' import {getPublishedId, useEditState} from '../internals' -import type {VisualEditingConnection} from '../types' +import type {ConnectionStatus, VisualEditingConnection} from '../types' export interface PostMessageRefreshMutationsProps { id: string type: string comlink: VisualEditingConnection - previewKitConnection: Status - loadersConnection: Status + previewKitConnection: ConnectionStatus + loadersConnection: ConnectionStatus } function PostMessageRefreshMutations(props: PostMessageRefreshMutationsProps): React.ReactNode { diff --git a/packages/presentation/src/index.ts b/packages/presentation/src/index.ts index fa4fcdf354..327bc6162d 100644 --- a/packages/presentation/src/index.ts +++ b/packages/presentation/src/index.ts @@ -1,6 +1,7 @@ export * from './plugin' export type { CombinedSearchParams, + ConnectionStatus, ContextFn, DocumentLocation, DocumentLocationResolver, diff --git a/packages/presentation/src/preview/Preview.tsx b/packages/presentation/src/preview/Preview.tsx index 01c2df2e37..4f5c1f130a 100644 --- a/packages/presentation/src/preview/Preview.tsx +++ b/packages/presentation/src/preview/Preview.tsx @@ -1,4 +1,3 @@ -import type {Status} from '@sanity/comlink' import { Button, Card, @@ -34,7 +33,12 @@ import { type DispatchPresentationAction, type PresentationState, } from '../reducers/presentationReducer' -import type {HeaderOptions, PresentationPerspective, PresentationViewport} from '../types' +import type { + ConnectionStatus, + HeaderOptions, + PresentationPerspective, + PresentationViewport, +} from '../types' import {usePresentationTool} from '../usePresentationTool' import {IFrame} from './IFrame' import {usePresentationPreviewHeader} from './PreviewHeader' @@ -48,12 +52,12 @@ export interface PreviewProps extends Pick void onRefresh: (fallback: () => void) => void openPopup: (url: string) => void - overlaysConnection: Status + overlaysConnection: ConnectionStatus perspective: PresentationPerspective previewUrl?: string setPerspective: (perspective: 'previewDrafts' | 'published') => void @@ -148,9 +152,6 @@ export const Preview = memo( }, MAX_TIME_TO_OVERLAYS_CONNECTION) return () => clearTimeout(timeout) } - if (overlaysConnection === 'disconnected') { - setSomethingIsWrong(true) - } return }, [loading, overlaysConnection, refreshing, showOverlaysConnectionStatus]) diff --git a/packages/presentation/src/types.ts b/packages/presentation/src/types.ts index 2c0cecc8a4..1889b5d251 100644 --- a/packages/presentation/src/types.ts +++ b/packages/presentation/src/types.ts @@ -301,3 +301,5 @@ export type VisualEditingConnection = ChannelInstance< * @internal */ export type LoaderConnection = ChannelInstance + +export type ConnectionStatus = 'connected' | 'connecting' | 'reconnecting' | 'idle' diff --git a/packages/presentation/src/useStatus.ts b/packages/presentation/src/useStatus.ts index 28bedb44db..b115d0925e 100644 --- a/packages/presentation/src/useStatus.ts +++ b/packages/presentation/src/useStatus.ts @@ -1,5 +1,6 @@ -import type {Status, StatusEvent} from '@sanity/comlink' +import type {StatusEvent} from '@sanity/comlink' import {useCallback, useMemo, useState} from 'react' +import type {ConnectionStatus} from './types' /** * A hook that manages and returns the connection status of multiple channels @@ -16,10 +17,10 @@ import {useCallback, useMemo, useState} from 'react' * The function to update the status takes a `StatusEvent` object which includes * the channel and the status */ -export function useStatus(): [string, (event: StatusEvent) => void] { +export function useStatus(): [ConnectionStatus, (event: StatusEvent) => void] { // State to keep track of the status of each channel const [statusMap, setStatusMap] = useState( - new Map(), + new Map(), ) // Memoized computation of the overall status based on the status of individual channels @@ -30,7 +31,7 @@ export function useStatus(): [string, (event: StatusEvent) => void] { return 'connected' } // If the initial connection is being established, return `connecting` status - const handshaking = values.filter(({status}) => status === 'handshaking') + const handshaking = values.filter(({status}) => status === 'connecting') if (handshaking.length) { return handshaking.some(({hasConnected}) => !hasConnected) ? 'connecting' : 'reconnecting' } @@ -49,7 +50,8 @@ export function useStatus(): [string, (event: StatusEvent) => void] { // Update the status and connection flag for the channel const hasConnected = next.get(event.connection)?.hasConnected || event.status === 'connected' - next.set(event.connection, {status: event.status, hasConnected}) + const status = event.status === 'handshaking' ? 'connecting' : event.status + next.set(event.connection, {status, hasConnected}) } return next })