Skip to content

Commit 5a88e25

Browse files
colepeterscolepeters
authored
feat!: removes auth & user profile example; updates for new hooks (#15)
1 parent 5b69757 commit 5a88e25

File tree

8 files changed

+195
-223
lines changed

8 files changed

+195
-223
lines changed

‎sdk-explorer/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
"@sanity/color": "^3.0.6",
1414
"@sanity/icons": "^3.5.7",
1515
"@sanity/logos": "^2.1.13",
16-
"@sanity/sdk": "0.0.0-alpha.8",
17-
"@sanity/sdk-react": "0.0.0-alpha.8",
16+
"@sanity/sdk": "0.0.0-alpha.18",
17+
"@sanity/sdk-react": "0.0.0-alpha.19",
1818
"@sanity/types": "^3.72.1",
1919
"@sanity/ui": "^2.11.4",
2020
"@tailwindcss/vite": "^4.0.0",

‎sdk-explorer/pnpm-lock.yaml

Lines changed: 119 additions & 90 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sdk-explorer/src/App.tsx

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import { SanityMonogram } from '@sanity/logos'
2-
import { AuthBoundary } from '@sanity/sdk-react/components'
3-
import { useAuthState, useLogOut } from '@sanity/sdk-react/hooks'
4-
import { Button, Card, Flex, Inline, Text } from '@sanity/ui'
2+
import { Card, Flex, Inline, Text } from '@sanity/ui'
53
import { BrowserRouter, Link, Route, Routes } from 'react-router'
64
import PreviewGrid from './document-collections/PreviewGrid/PreviewGrid'
75
import PreviewList from './document-collections/PreviewList/PreviewList'
86
import Home from './Home'
9-
import UserProfile from './users/UserProfile/UserProfile'
107

118
export default function App() {
12-
const authState = useAuthState()
13-
const logOut = useLogOut()
14-
159
return (
1610
<BrowserRouter>
1711
<Card style={{ position: 'relative' }}>
@@ -46,26 +40,20 @@ export default function App() {
4640
Home
4741
</Text>
4842
</Link>
49-
{authState?.type === 'logged-in' && (
50-
<Button mode='ghost' text='Log out' onClick={logOut} />
51-
)}
5243
</Inline>
5344
</Flex>
5445
</Card>
55-
<AuthBoundary>
56-
<Routes>
57-
<Route path='/' element={<Home />} />
58-
<Route
59-
path='/document-collections/preview-list'
60-
element={<PreviewList />}
61-
/>
62-
<Route
63-
path='/document-collections/preview-grid'
64-
element={<PreviewGrid />}
65-
/>
66-
<Route path='/users/user-profile' element={<UserProfile />} />
67-
</Routes>
68-
</AuthBoundary>
46+
<Routes>
47+
<Route path='/' element={<Home />} />
48+
<Route
49+
path='/document-collections/preview-list'
50+
element={<PreviewList />}
51+
/>
52+
<Route
53+
path='/document-collections/preview-grid'
54+
element={<PreviewGrid />}
55+
/>
56+
</Routes>
6957
</Card>
7058
</BrowserRouter>
7159
)

‎sdk-explorer/src/Home.tsx

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -44,37 +44,19 @@ export default function Home() {
4444
to='/document-collections/preview-list'
4545
title='Preview list'
4646
description='A list of document previews'
47-
hooks={['useDocuments', 'usePreview']}
47+
hooks={['useInfiniteList', 'useProjection']}
4848
styling='Sanity UI'
4949
/>
5050
<ExampleCard
5151
to='/document-collections/preview-grid'
5252
title='Preview grid'
5353
description='A grid of document previews'
54-
hooks={['useDocuments', 'usePreview']}
54+
hooks={['useInfiniteList', 'useProjection']}
5555
styling='Tailwind'
5656
/>
5757
</Stack>
5858
</Stack>
5959
</Card>
60-
61-
<Card padding={4} radius={2} shadow={3}>
62-
<Stack space={4}>
63-
<Text as='h2' size={4} weight='medium'>
64-
Users
65-
</Text>
66-
67-
<Stack space={3}>
68-
<ExampleCard
69-
to='/users/user-profile'
70-
title='User profile'
71-
description='Information about the currently authenticated user'
72-
hooks={['useAuthState', 'useCurrentUser']}
73-
styling='Sanity UI'
74-
/>
75-
</Stack>
76-
</Stack>
77-
</Card>
7860
</Stack>
7961
</Container>
8062
)

‎sdk-explorer/src/document-collections/PreviewGrid/PreviewGrid.tsx

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
11
import { DocumentHandle } from '@sanity/sdk'
2-
import { useDocuments, usePreview } from '@sanity/sdk-react/hooks'
2+
import { useInfiniteList, useProjection } from '@sanity/sdk-react'
33
import { Spinner } from '@sanity/ui'
44
import { Suspense, useRef } from 'react'
55
import ExampleLayout from '../../ExampleLayout'
66
import './styles.css'
77

8+
// @todo replace with type from SDK
9+
interface ProjectionResults {
10+
results: {
11+
title: string
12+
subtitle: string
13+
coverImage: string
14+
}
15+
isPending: boolean
16+
}
17+
818
// The DocumentPreview component uses the `usePreview` hook to render a document preview interface
919
function DocumentPreview({ document }: { document: DocumentHandle }) {
1020
// Generate a ref for the outer element
11-
// This keeps the usePreview hook from resolving if the preview is not currently displayed in the viewport
21+
// This keeps the useProjection hook from resolving if the preview is not currently displayed in the viewport
1222
const ref = useRef(null)
1323

14-
// Get the preview's title, subtitle, and media fields,
15-
// plus an `isPending` flag to indicate if preview value resolutions are pending
24+
// Project the title, subtitle, and cover image values for the document,
25+
// plus an `isPending` flag to indicate if projection value resolutions are pending
1626
const {
17-
results: { title, subtitle, media },
27+
results: { title, subtitle, coverImage },
1828
isPending,
19-
} = usePreview({ document, ref })
29+
}: ProjectionResults = useProjection({
30+
document,
31+
ref,
32+
projection: `{
33+
title,
34+
'subtitle': array::join(authors[]->{'name': firstName + ' ' + lastName}.name, ', '),
35+
'coverImage': cover.asset->url,
36+
}`,
37+
})
2038

2139
return (
2240
<button
@@ -28,7 +46,7 @@ function DocumentPreview({ document }: { document: DocumentHandle }) {
2846
>
2947
<img
3048
alt=''
31-
src={media?.url}
49+
src={coverImage}
3250
className='aspect-square w-full rounded-sm bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8'
3351
style={{ width: 400 }}
3452
/>
@@ -41,9 +59,9 @@ function DocumentPreview({ document }: { document: DocumentHandle }) {
4159
function PreviewGrid() {
4260
// Use the `useDocuments` hook to return an index of document handles for all of our 'book' type documents
4361
// Sort the documents by the author's last name, then the release date
44-
const { results: books, isPending } = useDocuments({
62+
const { data: books, isPending } = useInfiniteList({
4563
filter: '_type == "book"',
46-
sort: [
64+
orderings: [
4765
{ field: 'authors[0]->lastName', direction: 'asc' },
4866
{ field: 'releaseDate', direction: 'asc' },
4967
],
@@ -57,7 +75,7 @@ function PreviewGrid() {
5775
<ExampleLayout
5876
title='Preview grid'
5977
codeUrl='https://github.com/sanity-io/sdk-examples/blob/main/sdk-explorer/src/document-collections/PreviewGrid/PreviewGrid.tsx'
60-
hooks={['useDocuments', 'usePreview']}
78+
hooks={['useInfiniteList', 'useProjection']}
6179
styling='Tailwind'
6280
>
6381
<div className='grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8'>

‎sdk-explorer/src/document-collections/PreviewList/PreviewList.tsx

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { DocumentHandle } from '@sanity/sdk'
2-
import { useDocuments, usePreview } from '@sanity/sdk-react/hooks'
2+
import { useInfiniteList, useProjection } from '@sanity/sdk-react'
33
import { Button, Card, Flex, Inline, Spinner, Stack, Text } from '@sanity/ui'
44
import { Suspense, useRef } from 'react'
55
import ExampleLayout from '../../ExampleLayout'
@@ -14,18 +14,36 @@ function Loading() {
1414
)
1515
}
1616

17+
// @todo replace with type from SDK
18+
interface ProjectionResults {
19+
results: {
20+
title: string
21+
subtitle: string
22+
coverImage: string
23+
}
24+
isPending: boolean
25+
}
26+
1727
// The DocumentPreview component uses the `usePreview` hook to render a document preview interface
1828
function DocumentPreview({ document }: { document: DocumentHandle }) {
1929
// Generate a ref for the outer element
20-
// This keeps the usePreview hook from resolving if the preview is not currently displayed in the viewport
30+
// This keeps the useProjection hook from firing if the preview is not currently displayed in the viewport
2131
const ref = useRef(null)
2232

23-
// Get the preview's title, subtitle, and media fields,
24-
// plus an `isPending` flag to indicate if preview value resolutions are pending
33+
// Project the title, subtitle, and cover image values for the document,
34+
// plus an `isPending` flag to indicate if projection value resolutions are pending
2535
const {
26-
results: { title, subtitle, media },
36+
results: { title, subtitle, coverImage },
2737
isPending,
28-
} = usePreview({ document, ref })
38+
}: ProjectionResults = useProjection({
39+
document,
40+
ref,
41+
projection: `{
42+
title,
43+
'subtitle': array::join(authors[]->{'name': firstName + ' ' + lastName}.name, ', '),
44+
'coverImage': cover.asset->url,
45+
}`,
46+
})
2947

3048
return (
3149
<Button
@@ -37,11 +55,9 @@ function DocumentPreview({ document }: { document: DocumentHandle }) {
3755
style={{ opacity: isPending ? 0.5 : 1 }}
3856
>
3957
<Inline space={4}>
40-
{media?.type === 'image-asset' && (
41-
<Card tone='transparent' shadow={2}>
42-
<img src={media.url} alt='' width='128' />
43-
</Card>
44-
)}
58+
<Card tone='transparent' shadow={2}>
59+
<img src={coverImage} alt='' width='128' />
60+
</Card>
4561
<Stack space={3}>
4662
<Text as='h2' weight='medium' size={4}>
4763
{title}
@@ -56,9 +72,9 @@ function DocumentPreview({ document }: { document: DocumentHandle }) {
5672
function PreviewList() {
5773
// Use the `useDocuments` hook to return an index of document handles for all of our 'book' type documents
5874
// Sort the documents by the author's last name, then the release date
59-
const { results: books, isPending } = useDocuments({
75+
const { data: books, isPending } = useInfiniteList({
6076
filter: '_type == "book"',
61-
sort: [
77+
orderings: [
6278
{ field: 'authors[0]->lastName', direction: 'asc' },
6379
{ field: 'releaseDate', direction: 'asc' },
6480
],
@@ -76,7 +92,7 @@ function PreviewList() {
7692
<ExampleLayout
7793
title='Preview list'
7894
codeUrl='https://github.com/sanity-io/sdk-examples/blob/main/sdk-explorer/src/document-collections/PreviewList/PreviewList.tsx'
79-
hooks={['useDocuments', 'usePreview']}
95+
hooks={['useInfiniteList', 'useProjection']}
8096
styling='Sanity UI'
8197
>
8298
<Stack space={4}>

‎sdk-explorer/src/main.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import { createSanityInstance } from '@sanity/sdk'
2-
import { SanityProvider } from '@sanity/sdk-react/context'
2+
import { SanityProvider } from '@sanity/sdk-react'
33
import { Flex, Spinner, ThemeProvider } from '@sanity/ui'
44
import { buildTheme } from '@sanity/ui/theme'
55
import { StrictMode, Suspense } from 'react'
66
import { createRoot } from 'react-dom/client'
77
import { createGlobalStyle } from 'styled-components'
88
import App from './App.tsx'
99
import './inter.css'
10-
import { schema } from './schema.ts'
1110

1211
const theme = buildTheme()
1312

1413
const sanityInstance = createSanityInstance({
1514
projectId: 'flahoy03',
1615
dataset: 'production',
17-
schema,
1816
})
1917

2018
const GlobalStyle = createGlobalStyle`
@@ -40,7 +38,7 @@ createRoot(document.getElementById('root')!).render(
4038
<GlobalStyle />
4139
<ThemeProvider theme={theme}>
4240
<Suspense fallback={<Loading />}>
43-
<SanityProvider sanityInstance={sanityInstance}>
41+
<SanityProvider sanityInstances={[sanityInstance]}>
4442
<App />
4543
</SanityProvider>
4644
</Suspense>

‎sdk-explorer/src/users/UserProfile/UserProfile.tsx

Lines changed: 0 additions & 59 deletions
This file was deleted.

0 commit comments

Comments
 (0)