let's make the ThemeButton work!

sanity-io · Nov 22, 2024 · 4030cf6 · 4030cf6
1 parent 3ab7015
commit 4030cf6
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 56 deletions.
diff --git a/next-14/src/app/ThemeButton.tsx b/next-14/src/app/ThemeButton.tsx
@@ -1,17 +1,17 @@
 'use client'
 
-import type {SyncTag} from '@sanity/client'
 import {useTransition} from 'react'
-import {randomColorTheme} from './actions'
 
-export function ThemeButton({tags}: {tags: SyncTag[]}) {
+export function ThemeButton() {
   const [pending, startTransition] = useTransition()
   return (
     <button
       disabled={pending}
       onClick={() =>
         startTransition(async () => {
-          await randomColorTheme(tags)
+          await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
+            method: 'PUT',
+          })
           // Wait 2 seconds to stagger requests a little bit
           await new Promise((resolve) => setTimeout(resolve, 2_000))
         })

diff --git a/next-14/src/app/actions.ts b/next-14/src/app/actions.ts
@@ -9,13 +9,3 @@ export async function expireTags(tags: SyncTag[]) {
   }
   console.log(`<SanityLive /> expired tags: ${tags.join(', ')}`)
 }
-
-export async function randomColorTheme(tags: SyncTag[]) {
-  const res = await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
-    method: 'PUT',
-  })
-  for (const tag of tags) {
-    revalidateTag(tag)
-  }
-  return res.json()
-}
diff --git a/next-14/src/app/layout.tsx b/next-14/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const {data, tags} = await sanityFetch({query: THEME_QUERY})
+  const {data} = await sanityFetch({query: THEME_QUERY})
 
   return (
     <html
@@ -35,7 +35,7 @@ export default async function RootLayout({
           )}
           {children}
           <Suspense>
-            <ThemeButton tags={tags!} />
+            <ThemeButton />
           </Suspense>
         </div>
         <Suspense>

diff --git a/next-15/src/app/ThemeButton.tsx b/next-15/src/app/ThemeButton.tsx
@@ -1,17 +1,17 @@
 'use client'
 
-import type {SyncTag} from '@sanity/client'
 import {useTransition} from 'react'
-import {randomColorTheme} from './actions'
 
-export function ThemeButton({tags}: {tags: SyncTag[]}) {
+export function ThemeButton() {
   const [pending, startTransition] = useTransition()
   return (
     <button
       disabled={pending}
       onClick={() =>
         startTransition(async () => {
-          await randomColorTheme(tags)
+          await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
+            method: 'PUT',
+          })
           // Wait 2 seconds to stagger requests a little bit
           await new Promise((resolve) => setTimeout(resolve, 2_000))
         })

diff --git a/next-15/src/app/actions.ts b/next-15/src/app/actions.ts
@@ -9,13 +9,3 @@ export async function expireTags(tags: SyncTag[]) {
   }
   console.log(`<SanityLive /> expired tags: ${tags.join(', ')}`)
 }
-
-export async function randomColorTheme(tags: SyncTag[]) {
-  const res = await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
-    method: 'PUT',
-  })
-  for (const tag of tags) {
-    revalidateTag(tag)
-  }
-  return res.json()
-}
diff --git a/next-15/src/app/layout.tsx b/next-15/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const {data, tags} = await sanityFetch({query: THEME_QUERY})
+  const {data} = await sanityFetch({query: THEME_QUERY})
 
   return (
     <html
@@ -35,7 +35,7 @@ export default async function RootLayout({
           )}
           {children}
           <Suspense>
-            <ThemeButton tags={tags!} />
+            <ThemeButton />
           </Suspense>
         </div>
         <Suspense>

diff --git a/next-canary/src/app/ThemeButton.tsx b/next-canary/src/app/ThemeButton.tsx
@@ -1,17 +1,17 @@
 'use client'
 
-import type {SyncTag} from '@sanity/client'
 import {useTransition} from 'react'
-import {randomColorTheme} from './actions'
 
-export function ThemeButton({tags}: {tags: SyncTag[]}) {
+export function ThemeButton() {
   const [pending, startTransition] = useTransition()
   return (
     <button
       disabled={pending}
       onClick={() =>
         startTransition(async () => {
-          await randomColorTheme(tags)
+          await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
+            method: 'PUT',
+          })
           // Wait 2 seconds to stagger requests a little bit
           await new Promise((resolve) => setTimeout(resolve, 2_000))
         })

diff --git a/next-canary/src/app/actions.ts b/next-canary/src/app/actions.ts
@@ -7,11 +7,3 @@ export async function expireTags(tags: SyncTag[]) {
   expireTag(...tags)
   console.log(`<SanityLive /> expired tags: ${tags.join(', ')}`)
 }
-
-export async function randomColorTheme(tags: SyncTag[]) {
-  const res = await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
-    method: 'PUT',
-  })
-  expireTag(...tags)
-  return res.json()
-}
diff --git a/next-canary/src/app/layout.tsx b/next-canary/src/app/layout.tsx
@@ -13,7 +13,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const {data, tags, fetchedAt} = await sanityFetch({query: THEME_QUERY})
+  const {data, fetchedAt} = await sanityFetch({query: THEME_QUERY})
 
   return (
     <html
@@ -31,7 +31,7 @@ export default async function RootLayout({
           </Suspense>
           {children}
           <Suspense>
-            <ThemeButton tags={tags!} />
+            <ThemeButton />
           </Suspense>
         </div>
         <Suspense>

diff --git a/next-enterprise/src/app/ThemeButton.tsx b/next-enterprise/src/app/ThemeButton.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import {useTransition} from 'react'
-import {randomColorTheme} from './actions'
 
 export function ThemeButton() {
   const [pending, startTransition] = useTransition()
@@ -10,7 +9,9 @@ export function ThemeButton() {
       disabled={pending}
       onClick={() =>
         startTransition(async () => {
-          await randomColorTheme()
+          await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
+            method: 'PUT',
+          })
           // Wait 2 seconds to stagger requests a little bit
           await new Promise((resolve) => setTimeout(resolve, 2_000))
         })

diff --git a/next-enterprise/src/app/actions.ts b/next-enterprise/src/app/actions.ts