now we're talking

Author: stipsan

.prettierignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+pnpm-workspace.yaml

next-canary/sanity.types.ts

@@ -190,11 +190,10 @@ export type AllSanitySchemaTypes =
 export declare const internalGroqTypeReferenceTo: unique symbol
 // Source: ./src/app/Reactions.tsx
 // Variable: REACTION_QUERY
-// Query: *[_type == "reaction" && _id == $id][0]{emoji,reactions,"fetchedAt":now()}
+// Query: *[_type == "reaction" && _id == $id][0]{emoji,reactions}
 export type REACTION_QUERYResult = {
   emoji: string | null
   reactions: number | null
-  fetchedAt: string
 } | null
 
 // Source: ./src/app/layout.tsx
@@ -235,7 +234,7 @@ export type DYNAMIC_DEMO_QUERYResult = {
 
 declare module '@sanity/client' {
   interface SanityQueries {
-    '*[_type == "reaction" && _id == $id][0]{emoji,reactions,"fetchedAt":now()}': REACTION_QUERYResult
+    '*[_type == "reaction" && _id == $id][0]{emoji,reactions}': REACTION_QUERYResult
     '*[_id == "theme"][0]{background,text,"fetchedAt":now()}': THEME_QUERYResult
     '*[_type == "demo" && slug.current == $slug][0]{title,reactions[0..4]{_key,_ref},"fetchedAt":now()}': DEMO_QUERYResult
     '*[_type == "demo" && slug.current == $slug][0]{title,"fetchedAt":now()}': DYNAMIC_DEMO_QUERYResult

next-canary/src/app/ReactionButton.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import {AnimatePresence, motion} from 'framer-motion'
-import {startTransition, useEffect, useOptimistic, useState} from 'react'
-import {Square} from './Square'
+import {startTransition, use, useEffect, useOptimistic, useState} from 'react'
+import {ReactionFallback, Square} from './ReactionPrimitives'
 
 interface Emoji {
   key: string
@@ -22,7 +22,33 @@ function insert(emojis: Emoji[], delay: number) {
   return [...emojis, createEmoji(delay)]
 }
 
-export function ReactionButton(props: {onClick: () => void; emoji: string; reactions: number}) {
+function insertMany(emojis: Emoji[], needed: number) {
+  const stagger = 5_000 / needed
+  const nextEmojis = [...emojis]
+  for (let i = 0; i < needed; i++) {
+    nextEmojis.push(createEmoji(i * stagger))
+  }
+  return nextEmojis
+}
+
+export function ReactionButton(props: {
+  onClick: () => void
+  data: Promise<{
+    emoji: string | null
+    reactions: number | null
+  } | null>
+}) {
+  const {onClick} = props
+  const data = use(props.data)
+
+  if (!data?.emoji || typeof data.reactions !== 'number') {
+    return <ReactionFallback />
+  }
+
+  return <EmojiReactionButton onClick={onClick} emoji={data.emoji} reactions={data.reactions} />
+}
+
+function EmojiReactionButton(props: {onClick: () => void; emoji: string; reactions: number}) {
   const {onClick, emoji, reactions} = props
   const [initialReactions] = useState(reactions)
 
@@ -36,22 +62,12 @@ export function ReactionButton(props: {onClick: () => void; emoji: string; react
   useEffect(() => {
     if (nextReactions > emojis.length) {
       const needed = nextReactions - emojis.length
-      startTransition(() =>
-        setEmojis((emojis) => {
-          const nextEmojis = [...emojis]
-          for (let i = 0; i < needed; i++) {
-            nextEmojis.push(createEmoji(i * 60))
-          }
-          return nextEmojis
-        }),
-      )
+      startTransition(() => setEmojis((emojis) => insertMany(emojis, needed)))
     }
   }, [nextReactions, emojis.length])
 
   const pendingEmojis = emojis.filter(({done}) => !done)
 
-  // focus-within:ring-(--theme-text) focus-within:ring-offset-(--theme-background) focus-within:ring-2 focus-within:ring-offset-2 focus-within:duration-0
-
   return (
     <div className="bg-(--theme-text)/40 focus-within:ring-(--theme-text) focus-within:ring-offset-(--theme-background) relative aspect-square rounded-lg transition duration-1000 ease-in-out focus-within:ring-2 focus-within:ring-offset-2 focus-within:duration-0">
       <motion.button
@@ -69,13 +85,7 @@ export function ReactionButton(props: {onClick: () => void; emoji: string; react
       </motion.button>
       <AnimatePresence>
         {pendingEmojis.map(({key, delay}) => (
-          <FloatingEmoji
-            key={key}
-            _key={key}
-            emoji={props.emoji}
-            delay={delay}
-            setEmojis={setEmojis}
-          />
+          <FloatingEmoji key={key} _key={key} emoji={emoji} delay={delay} setEmojis={setEmojis} />
         ))}
       </AnimatePresence>
     </div>

next-canary/src/app/ReactionPrimitives.tsx

@@ -0,0 +1,22 @@
+export function ReactionFallback() {
+  return (
+    <ButtonContainer>
+      <button
+        disabled
+        className="bg-(--theme-text)/40 flex animate-pulse rounded-lg transition-colors duration-1000 ease-in-out"
+      >
+        <Square> </Square>
+      </button>
+    </ButtonContainer>
+  )
+}
+
+export function Square({children}: {children: React.ReactNode}) {
+  return (
+    <div className="inline-flex aspect-square size-12 items-center justify-center">{children}</div>
+  )
+}
+
+function ButtonContainer({children}: {children: React.ReactNode}) {
+  return <div className="relative aspect-square">{children}</div>
+}

next-canary/src/app/Reactions.tsx

@@ -2,7 +2,7 @@ import {sanityFetch} from '@/sanity/fetch'
 import {defineQuery} from 'groq'
 import {Suspense} from 'react'
 import {ReactionButton} from './ReactionButton'
-import {ButtonContainer, Square} from './Square'
+import {ReactionFallback} from './ReactionPrimitives'
 
 interface Props {
   data: {
@@ -30,11 +30,7 @@ const REACTION_QUERY = defineQuery(`*[_type == "reaction" && _id == $id][0]{emoj
 export async function Reaction(props: {_ref: string}) {
   const {_ref} = props
 
-  const {data} = await sanityFetch({query: REACTION_QUERY, params: {id: _ref}})
-
-  if (!data?.emoji || typeof data.reactions !== 'number') {
-    return <ReactionFallback />
-  }
+  const data = sanityFetch({query: REACTION_QUERY, params: {id: _ref}}).then(({data}) => data)
 
   return (
     <ReactionButton
@@ -48,8 +44,7 @@ export async function Reaction(props: {_ref: string}) {
           body: formData,
         })
       }}
-      emoji={data.emoji}
-      reactions={data.reactions}
+      data={data}
     />
   )
 }
@@ -65,19 +60,6 @@ export function ReactionsFallback(props: Props) {
   )
 }
 
-function ReactionFallback() {
-  return (
-    <ButtonContainer>
-      <button
-        disabled
-        className="bg-(--theme-text)/40 flex animate-pulse rounded-lg transition-colors duration-1000 ease-in-out"
-      >
-        <Square> </Square>
-      </button>
-    </ButtonContainer>
-  )
-}
-
 function Wrapper({children}: {children: React.ReactNode}) {
   return (
     <aside className="bg-(--theme-text)/30 fixed bottom-2 left-[50%] grid -translate-x-[50%] grid-flow-col grid-rows-1 gap-2 rounded-2xl p-2 transition-colors duration-1000 ease-in-out">

next-canary/src/app/SanityLive.tsx

@@ -16,12 +16,10 @@ export function SanityLive() {
         console.info('Sanity is live with automatic revalidation of published content')
         break
       case 'message':
-        console.log('Sanity Live message:', event)
         expireTags(event.tags)
         break
       case 'reconnect':
       case 'restart':
-        console.info('Sanity Live connection was lost, reconnecting...', event)
         router.refresh()
         break
     }