Skip to content

Commit ad10b59

Browse files
cngonzalezcngonzalez
committed
feat(react)!: update all comlink react hooks to suspend
1 parent 23ce433 commit ad10b59

13 files changed

+185
-516
lines changed

‎apps/kitchensink-react/src/Comlink/Framed.tsx

+68-69
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import {type ComlinkStatus, useWindowConnection} from '@sanity/sdk-react'
1+
import {useWindowConnection} from '@sanity/sdk-react'
22
import {Box, Button, Card, Container, Label, Stack, Text, TextInput} from '@sanity/ui'
3-
import {type ReactElement, useEffect, useRef, useState} from 'react'
3+
import {type ReactElement, Suspense, useEffect, useRef, useState} from 'react'
44

55
import {FromIFrameMessage, ToIFrameMessage, UserData} from './types'
66

7-
const Framed = (): ReactElement => {
8-
const [status, setStatus] = useState<ComlinkStatus>('idle')
7+
// Extracted connection-dependent content
8+
function FramedContent() {
99
const [receivedMessages, setReceivedMessages] = useState<string[]>([])
1010
const [users, setUsers] = useState<UserData[]>([])
1111
const [error, setError] = useState<string | null>(null)
@@ -15,7 +15,6 @@ const Framed = (): ReactElement => {
1515
const {sendMessage, fetch} = useWindowConnection<FromIFrameMessage, ToIFrameMessage>({
1616
name: 'frame',
1717
connectTo: 'main-app',
18-
onStatus: setStatus,
1918
onMessage: {
2019
TO_IFRAME: (data: {message: string}) => {
2120
setReceivedMessages((prev) => [...prev, data.message])
@@ -25,7 +24,7 @@ const Framed = (): ReactElement => {
2524

2625
// Fetch all users when connected
2726
useEffect(() => {
28-
if (!fetch || status !== 'connected') return
27+
if (!fetch) return
2928

3029
async function fetchUsers(signal: AbortSignal) {
3130
try {
@@ -45,7 +44,7 @@ const Framed = (): ReactElement => {
4544
return () => {
4645
controller.abort()
4746
}
48-
}, [fetch, status])
47+
}, [fetch])
4948

5049
const sendMessageToParent = () => {
5150
const message = messageInputRef.current?.value || ''
@@ -57,76 +56,76 @@ const Framed = (): ReactElement => {
5756
}
5857
}
5958

60-
const isConnected = status === 'connected'
59+
return (
60+
<>
61+
<Stack space={3}>
62+
<Label>Send message to parent</Label>
63+
<Box display="flex">
64+
<Box flex={1}>
65+
<TextInput
66+
ref={messageInputRef}
67+
onKeyDown={(e) => e.key === 'Enter' && sendMessageToParent()}
68+
/>
69+
</Box>
70+
<Button text="Send" tone="primary" onClick={sendMessageToParent} />
71+
</Box>
72+
</Stack>
73+
74+
{/* Users section */}
75+
<Card padding={3} border radius={2}>
76+
<Stack space={3}>
77+
<Label>Users</Label>
78+
{users.length > 0 ? (
79+
<Stack space={2}>
80+
{users.map((user) => (
81+
<Card key={user.id} padding={3} tone="positive" radius={2}>
82+
<Stack space={2}>
83+
<Text size={1} weight="semibold">
84+
{user.name}
85+
</Text>
86+
<Text size={1}>{user.email}</Text>
87+
</Stack>
88+
</Card>
89+
))}
90+
</Stack>
91+
) : error ? (
92+
<Card padding={3} tone="critical" radius={2}>
93+
<Text size={1}>{error}</Text>
94+
</Card>
95+
) : (
96+
<Card padding={3} tone="default" radius={2}>
97+
<Text size={1}>Loading users...</Text>
98+
</Card>
99+
)}
100+
</Stack>
101+
</Card>
102+
103+
{/* Received messages */}
104+
<Box flex={1} style={{height: '500px'}}>
105+
<Stack space={3}>
106+
<Text weight="semibold">Received Messages</Text>
107+
{receivedMessages.map((msg, idx) => (
108+
<Card key={idx} padding={3} radius={2}>
109+
<Text>{msg}</Text>
110+
</Card>
111+
))}
112+
</Stack>
113+
</Box>
114+
</>
115+
)
116+
}
61117

118+
const Framed = (): ReactElement => {
62119
return (
63120
<Container height="fill">
64121
<Card tone="transparent">
65122
<Stack padding={4} space={4}>
66123
<Text weight="semibold" size={2}>
67124
Frame Content
68125
</Text>
69-
70-
{/* Message input */}
71-
<Stack space={3}>
72-
<Label>Send message to parent</Label>
73-
<Box display="flex">
74-
<Box flex={1}>
75-
<TextInput
76-
ref={messageInputRef}
77-
onKeyDown={(e) => e.key === 'Enter' && sendMessageToParent()}
78-
disabled={!isConnected}
79-
/>
80-
</Box>
81-
<Button
82-
text="Send"
83-
tone="primary"
84-
onClick={sendMessageToParent}
85-
disabled={!isConnected}
86-
/>
87-
</Box>
88-
</Stack>
89-
90-
{/* Users section */}
91-
<Card padding={3} border radius={2}>
92-
<Stack space={3}>
93-
<Label>Users</Label>
94-
{users.length > 0 ? (
95-
<Stack space={2}>
96-
{users.map((user) => (
97-
<Card key={user.id} padding={3} tone="positive" radius={2}>
98-
<Stack space={2}>
99-
<Text size={1} weight="semibold">
100-
{user.name}
101-
</Text>
102-
<Text size={1}>{user.email}</Text>
103-
</Stack>
104-
</Card>
105-
))}
106-
</Stack>
107-
) : error ? (
108-
<Card padding={3} tone="critical" radius={2}>
109-
<Text size={1}>{error}</Text>
110-
</Card>
111-
) : (
112-
<Card padding={3} tone="default" radius={2}>
113-
<Text size={1}>Loading users...</Text>
114-
</Card>
115-
)}
116-
</Stack>
117-
</Card>
118-
119-
{/* Received messages */}
120-
<Box flex={1} style={{height: '500px'}}>
121-
<Stack space={3}>
122-
<Text weight="semibold">Received Messages</Text>
123-
{receivedMessages.map((msg, idx) => (
124-
<Card key={idx} padding={3} radius={2}>
125-
<Text>{msg}</Text>
126-
</Card>
127-
))}
128-
</Stack>
129-
</Box>
126+
<Suspense fallback={<div>Connecting to ParentApp...</div>}>
127+
<FramedContent />
128+
</Suspense>
130129
</Stack>
131130
</Card>
132131
</Container>

‎apps/kitchensink-react/src/DocumentCollection/DocumentDashboardInteractionsRoute.tsx

+5-16
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,12 @@ function FavoriteStatus({isFavorited}: {isFavorited: boolean}) {
4141

4242
function FavoriteButton({docHandle}: {docHandle: DocumentHandle}) {
4343
const studioResource = useStudioResource(docHandle)
44-
const {favorite, unfavorite, isConnected, isFavorited} = useManageFavorite(studioResource)
44+
const {favorite, unfavorite, isFavorited} = useManageFavorite(studioResource)
4545

4646
return (
4747
<ErrorBoundary fallbackRender={({error}) => <FavoriteStatusError error={error} />}>
4848
<Button
4949
mode="ghost"
50-
disabled={!isConnected}
5150
onClick={() => {
5251
if (isFavorited) {
5352
unfavorite()
@@ -62,11 +61,11 @@ function FavoriteButton({docHandle}: {docHandle: DocumentHandle}) {
6261
}
6362

6463
function ActionButtons(docHandle: DocumentHandle) {
65-
const {recordEvent, isConnected: isHistoryConnected} = useRecordDocumentHistoryEvent({
64+
const {recordEvent} = useRecordDocumentHistoryEvent({
6665
...docHandle,
6766
resourceType: 'studio',
6867
})
69-
const {navigateToStudioDocument, isConnected: isNavigateConnected} = useNavigateToStudioDocument(
68+
const {navigateToStudioDocument} = useNavigateToStudioDocument(
7069
docHandle,
7170
'https://test-studio.sanity.build',
7271
)
@@ -76,18 +75,8 @@ function ActionButtons(docHandle: DocumentHandle) {
7675
<Suspense fallback={<FavoriteStatusFallback />}>
7776
<FavoriteButton docHandle={docHandle} />
7877
</Suspense>
79-
<Button
80-
mode="ghost"
81-
disabled={!isHistoryConnected}
82-
onClick={() => recordEvent('viewed')}
83-
text="Record view"
84-
/>
85-
<Button
86-
mode="ghost"
87-
disabled={!isNavigateConnected}
88-
onClick={navigateToStudioDocument}
89-
text="Edit in Studio"
90-
/>
78+
<Button mode="ghost" onClick={() => recordEvent('viewed')} text="Record view" />
79+
<Button mode="ghost" onClick={navigateToStudioDocument} text="Edit in Studio" />
9180
</Flex>
9281
)
9382
}

‎apps/kitchensink-react/src/routes/DashboardWorkspacesRoute.tsx

+1-7
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import {Card, Code, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
33
import {type ReactElement} from 'react'
44

55
export function DashboardWorkspacesRoute(): ReactElement {
6-
const {workspacesByProjectIdAndDataset, error, isConnected} =
7-
useStudioWorkspacesByProjectIdDataset()
6+
const {workspacesByProjectIdAndDataset, error} = useStudioWorkspacesByProjectIdDataset()
87

98
return (
109
<Container width={2}>
@@ -13,11 +12,6 @@ export function DashboardWorkspacesRoute(): ReactElement {
1312

1413
<Card padding={4} radius={2} shadow={1}>
1514
<Stack space={4}>
16-
<Flex direction="column" gap={2}>
17-
<Text weight="semibold">Connection Status:</Text>
18-
<Text>{isConnected ? 'Connected' : 'Not Connected'}</Text>
19-
</Flex>
20-
2115
{error && (
2216
<Flex direction="column" gap={2}>
2317
<Text weight="semibold">Error:</Text>

0 commit comments

Comments
 (0)