Initial commit

Author: komzweb

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -1,8 +1,28 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Next.js Server Actions Form
 
-## Getting Started
+This example is based on [Forms with Next.js and Server Actions](https://github.com/vercel/next.js/tree/canary/examples/next-forms) published by [Next.js](https://nextjs.org/), with the following additions:
 
-First, run the development server:
+- Using [shadcn/ui](https://ui.shadcn.com/)
+  - Some components
+  - Dark mode
+- Using [Tailwind CSS](https://tailwindcss.com/)
+- Implementing form reset
+
+## Run locally
+
+First, create `.env.local` in the root and set your Vercel Postgres secrets to it:
+
+```
+POSTGRES_URL="************"
+POSTGRES_PRISMA_URL="************"
+POSTGRES_URL_NON_POOLING="************"
+POSTGRES_USER="************"
+POSTGRES_HOST="************"
+POSTGRES_PASSWORD="************"
+POSTGRES_DATABASE="************"
+```
+
+Then, run the development server:
 
 ```bash
 npm run dev
@@ -15,22 +35,3 @@ bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/actions.ts

@@ -0,0 +1,49 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { sql } from '@vercel/postgres'
+import { z } from 'zod'
+
+export async function createTodo(prevState: any, formData: FormData) {
+  const schema = z.object({
+    todo: z.string().nonempty(),
+  })
+  const data = schema.parse({
+    todo: formData.get('todo'),
+  })
+
+  try {
+    await sql`
+    INSERT INTO todos (text)
+    VALUES (${data.todo})
+  `
+
+    revalidatePath('/')
+    return { message: `Added todo ${data.todo}` }
+  } catch (e) {
+    return { message: 'Failed to create todo' }
+  }
+}
+
+export async function deleteTodo(prevState: any, formData: FormData) {
+  const schema = z.object({
+    id: z.string().nonempty(),
+    todo: z.string().nonempty(),
+  })
+  const data = schema.parse({
+    id: formData.get('id'),
+    todo: formData.get('todo'),
+  })
+
+  try {
+    await sql`
+      DELETE FROM todos
+      WHERE id = ${data.id};
+    `
+
+    revalidatePath('/')
+    return { message: `Deleted todo ${data.todo}` }
+  } catch (e) {
+    return { message: 'Failed to delete todo' }
+  }
+}

app/add-form.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useRef } from 'react'
+import { experimental_useFormState as useFormState } from 'react-dom'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { createTodo } from '@/app/actions'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const initialState = {
+  message: null,
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <Button
+      type="submit"
+      aria-disabled={pending}
+      className={`my-2 w-full ${
+        pending ? 'cursor-not-allowed opacity-50' : ''
+      }`}
+    >
+      Add
+    </Button>
+  )
+}
+
+export function AddForm() {
+  const [state, formAction] = useFormState(createTodo, initialState)
+  const ref = useRef<HTMLFormElement>(null)
+
+  return (
+    <form
+      ref={ref}
+      action={async (formData) => {
+        await formAction(formData)
+        ref.current?.reset()
+      }}
+    >
+      <Label htmlFor="todo">Enter Task</Label>
+      <Input type="text" id="todo" name="todo" autoComplete="off" required />
+      <SubmitButton />
+      <p aria-live="polite" className="sr-only" role="status">
+        {state?.message}
+      </p>
+    </form>
+  )
+}

app/delete-form.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { experimental_useFormState as useFormState } from 'react-dom'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { deleteTodo } from '@/app/actions'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+const initialState = {
+  message: null,
+}
+
+function DeleteButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <Button
+      type="submit"
+      aria-disabled={pending}
+      className={pending ? 'cursor-not-allowed opacity-50' : ''}
+    >
+      Delete
+    </Button>
+  )
+}
+
+export function DeleteForm({ id, todo }: { id: number; todo: string }) {
+  const [state, formAction] = useFormState(deleteTodo, initialState)
+
+  return (
+    <form action={formAction}>
+      <Input type="hidden" name="id" value={id} />
+      <Input type="hidden" name="todo" value={todo} />
+      <DeleteButton />
+      <p aria-live="polite" className="sr-only" role="status">
+        {state?.message}
+      </p>
+    </form>
+  )
+}

app/globals.css

@@ -1,27 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
   }
 }
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -1,6 +1,7 @@
 import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import { ThemeProvider } from '@/components/theme-provider'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,7 +17,16 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   )
 }