himself65 commented 3 weeks ago

Very simple logic using server action + useOptimistic + startTransition

https://github.com/dai-shi/waku/assets/14026360/9fb42a8e-0e2a-470b-bfd1-956b9c6aa127

I found that there's a flicking because refetch is actually an async network, but startTransition cannot await it

"use client"
import { startTransition, useOptimistic } from 'react'
import { unvote, vote } from '../../actions/index.js'
import { useRefetch } from 'waku/client'

export function BannerVote (
  props: {
    totalVotes: number
  }
) {
  const [optimisticVotes, setOptimisticVotes] = useOptimistic<number, number>(
    props.totalVotes, (current, value) => {
      return value + current
    }
  )

  const refetch = useRefetch()
  return (
    <div
      className="flex flex-row items-center justify-center gap-1"
    >
      <span>{optimisticVotes}</span>
      <button onClick={() => {
        startTransition(async () => {
          setOptimisticVotes(+1)
          await vote()
          await refetch('')
        })
      }}>
        +1
      </button>
      <button onClick={() => {
        startTransition(async () => {
          setOptimisticVotes(-1)
          await unvote()
          await refetch('')
        })
      }}>
        -1
      </button>
    </div>
  )
}

Server Actions

'use server'
import postgres from 'postgres'

const { PGHOST, PGDATABASE, PGUSER, PGPASSWORD } = process.env

const conn = postgres({
  host: PGHOST!,
  database: PGDATABASE!,
  username: PGUSER!,
  password: PGPASSWORD!,
  port: 5432,
  ssl: 'require'
})

export async function vote () {
  await conn`
    UPDATE blogs
    SET upvote_number = upvote_number + 1
    WHERE id = 1
  `
}

export async function unvote () {
  await conn`
    UPDATE blogs
    SET downvote_number = downvote_number + 1
    WHERE id = 1
  `
}

export async function getTotalVotes (): Promise<number> {
  const result = await conn`
    SELECT upvote_number, downvote_number
    FROM blogs
    WHERE id = 1
  `
  return result[0]!.upvote_number - result[0]!.downvote_number
}

himself65 commented 3 weeks ago

Please see preview in https://github.com/himself65/intro/pull/17