index.tsx

import { count, desc, eq } from 'drizzle-orm'
import { createForm } from 'hono/action'
import { showRoutes } from 'hono/dev'
import { likes, posts } from '../db/schema'
import adminApp from './admin/index'
import { factory } from './factory'
import { useRequestContext } from 'hono/jsx-renderer'

const app = factory.createApp()
app.route('/', adminApp)

const LikeButton = async ({ postId }: { postId: number }) => {
  const c = useRequestContext()
  const result = await c.var.db
    .select({ count: count() })
    .from(likes)
    .where(eq(likes.postId, postId))
  return (
    <>
      <input type='hidden' name='postId' value={postId} />
      <button>{result[0].count} likes</button>
    </>
  )
}

const [Form] = createForm(app, async (data, c) => {
  if (data) {
    await c.var.db.insert(likes).values({
      postId: data.postId,
    })
  }
})

app.get('/', async (c) => {
  const result = await c.var.db
    .select()
    .from(posts)
    .orderBy(desc(posts.createdAt))
  return c.render(
    <section>
      {result.map((post, index) => {
        return (
          <aside>
            <h2>{post.title}</h2>
            <div>{post.body}</div>
            <Form>
              <LikeButton postId={post.id} />
            </Form>
          </aside>
        )
      })}
    </section>
  )
})

showRoutes(app)

export default app