From 08d8b46decb92bb3743de02386243e48588d3ca9 Mon Sep 17 00:00:00 2001
From: David Nahodyl <david@gearboxgo.com>
Date: Fri, 7 Jun 2024 19:26:51 -0400
Subject: [PATCH] better examples

---
 playground/components/nav/NavBar.vue          |  4 +-
 .../{todo-precog.vue => register-precog.vue}  | 45 +++++++++----------
 playground/pages/{todo.vue => register.vue}   | 28 ++++++------
 .../server/api/register-precog/index.post.ts  | 30 +++++++++++++
 playground/server/api/register/index.post.ts  | 27 +++++++++++
 .../server/api/todo-precog/index.post.ts      | 25 -----------
 playground/server/api/todo/index.post.ts      | 24 ----------
 7 files changed, 93 insertions(+), 90 deletions(-)
 rename playground/pages/{todo-precog.vue => register-precog.vue} (53%)
 rename playground/pages/{todo.vue => register.vue} (56%)
 create mode 100644 playground/server/api/register-precog/index.post.ts
 create mode 100644 playground/server/api/register/index.post.ts
 delete mode 100644 playground/server/api/todo-precog/index.post.ts
 delete mode 100644 playground/server/api/todo/index.post.ts

diff --git a/playground/components/nav/NavBar.vue b/playground/components/nav/NavBar.vue
index 2367458..3a690f5 100644
--- a/playground/components/nav/NavBar.vue
+++ b/playground/components/nav/NavBar.vue
@@ -9,8 +9,8 @@ import ContentWidthContainer from "~/components/ContentWidthContainer.vue";
         <div class="flex">
           <NuxtLink href="/" class="px-4 py-2 hover:bg-gray-800"> Home </NuxtLink>
 
-          <NuxtLink href="/todo" class="px-4 py-2 hover:bg-gray-800"> Todo </NuxtLink>
-          <NuxtLink href="/todo-precog" class="px-4 py-2 hover:bg-gray-800"> Todo-Precognitive </NuxtLink>
+          <NuxtLink href="/register" class="px-4 py-2 hover:bg-gray-800"> Register </NuxtLink>
+          <NuxtLink href="/register-precog" class="px-4 py-2 hover:bg-gray-800"> Register-Precognitive </NuxtLink>
         </div>
       </div>
     </ContentWidthContainer>
diff --git a/playground/pages/todo-precog.vue b/playground/pages/register-precog.vue
similarity index 53%
rename from playground/pages/todo-precog.vue
rename to playground/pages/register-precog.vue
index bee478c..c79fd92 100644
--- a/playground/pages/todo-precog.vue
+++ b/playground/pages/register-precog.vue
@@ -5,8 +5,8 @@
 
 const entries = ref([]);
 
-const form = usePrecognitionForm("post", "/api/todo-precog", {
-  description: "",
+const form = usePrecognitionForm("post", "/api/register-precog", {
+  email: "",
   age: null,
 });
 
@@ -24,29 +24,24 @@ const submitForm = async () => {
   <div>
     <div class="flex gap-x-8">
       <form class="space-y-4" @submit.prevent="submitForm">
-        <div class="">
-          <LabeledInput
-            id="description"
-            v-model="form.description"
-            label="Description"
-            type="text"
-            name="description"
-            :errors="form.errors.description"
-            @change="form.validate('description')"
-          />
-        </div>
-        <div class="">
-          <LabeledInput
-            id="age"
-            v-model.number="form.age"
-            label="Age"
-            type="text"
-            name="age"
-            :errors="form.errors.age"
-            @change="form.validate('age')"
-            @focus="$event.target.select()"
-          />
-        </div>
+        <LabeledInput
+          id="email"
+          v-model="form.email"
+          label="Email"
+          type="text"
+          name="email"
+          :errors="form.errors.email"
+          @change="form.validate('email')"
+        />
+        <LabeledInput
+          id="age"
+          v-model.number="form.age"
+          label="Age"
+          type="text"
+          name="age"
+          :errors="form.errors.age"
+          @change="form.validate('age')"
+        />
 
         <div>
           <ButtonPrimary :disabled="form.processing || form.hasErrors"> Submit </ButtonPrimary>
diff --git a/playground/pages/todo.vue b/playground/pages/register.vue
similarity index 56%
rename from playground/pages/todo.vue
rename to playground/pages/register.vue
index cfe6d5a..377c9d1 100644
--- a/playground/pages/todo.vue
+++ b/playground/pages/register.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 const entries = ref([]);
 const form = useForm({
-  description: "",
+  email: "",
+  age: null,
 });
 
 const submitForm = async () => {
-  await form.post("/api/todo", {
+  await form.post("/api/register", {
     onSuccess: (response) => {
       entries.value.push(response._data);
     },
@@ -17,16 +18,15 @@ const submitForm = async () => {
   <div>
     <div class="flex gap-x-8">
       <form class="space-y-4" @submit.prevent="submitForm">
-        <div class="space-x-4">
-          <LabeledInput
-            id="description"
-            v-model="form.description"
-            label="Description"
-            type="text"
-            name="description"
-            :errors="form.errors.description"
-          />
-        </div>
+        <LabeledInput
+          id="email"
+          v-model="form.email"
+          label="Email"
+          type="text"
+          name="email"
+          :errors="form.errors.email"
+        />
+        <LabeledInput id="age" v-model.number="form.age" label="Age" type="text" name="age" :errors="form.errors.age" />
 
         <div>
           <ButtonPrimary :disabled="form.processing"> Submit </ButtonPrimary>
@@ -36,9 +36,9 @@ const submitForm = async () => {
     </div>
     <div class="pt-12">
       <pre />
-      <div class="text-lg font-bold uppercase">Entries</div>
+      <div class="text-lg font-bold uppercase">Registered Users</div>
       <div v-for="(entry, index) in entries" :key="index">
-        {{ entry.description }}
+        {{ entry.email }}
       </div>
     </div>
   </div>
diff --git a/playground/server/api/register-precog/index.post.ts b/playground/server/api/register-precog/index.post.ts
new file mode 100644
index 0000000..c94231c
--- /dev/null
+++ b/playground/server/api/register-precog/index.post.ts
@@ -0,0 +1,30 @@
+import { z } from "zod";
+
+const registrationSchema = z.object({
+  email: z.string().trim().email(),
+  age: z.number().min(18, "You must be at least 18 years old"),
+});
+
+export default definePrecognitionEventHandler(registrationSchema, async (event) => {
+  // This handler function won't run on precognition requests!
+  // It will only run on actual form submissions.
+
+  // validate the input
+  // This will throw a validation error response if the input is invalid
+  const validated = await getValidatedInput(event, registrationSchema);
+
+  // do something with the body
+  const newUser = {
+    id: 1,
+    email: validated.email,
+  };
+
+  // simulate a slow response to show the loading state o the front-end
+  await sleep(1000);
+
+  return newUser;
+});
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/playground/server/api/register/index.post.ts b/playground/server/api/register/index.post.ts
new file mode 100644
index 0000000..4242e06
--- /dev/null
+++ b/playground/server/api/register/index.post.ts
@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+const registrationSchema = z.object({
+  email: z.string().trim().email(),
+  age: z.number().min(18, "You must be at least 18 years old"),
+});
+
+export default defineEventHandler(async (event) => {
+  // validate the input
+  // This will throw a validation error response if the input is invalid
+  const validated = await getValidatedInput(event, registrationSchema);
+
+  // do something with the body
+  const newUser = {
+    id: 1,
+    email: validated.email,
+  };
+
+  // simulate a slow response to show the loading state o the front-end
+  await sleep(1000);
+
+  return newUser;
+});
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/playground/server/api/todo-precog/index.post.ts b/playground/server/api/todo-precog/index.post.ts
deleted file mode 100644
index caae9d7..0000000
--- a/playground/server/api/todo-precog/index.post.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { z } from "zod";
-
-const todoRequestSchema = z.object({
-  description: z.string().trim().min(1, "Description not long enough"),
-  age: z.number().min(18, "Must be at least 18 years old"),
-});
-
-export default definePrecognitionEventHandler(todoRequestSchema, async (event) => {
-  const validated = await getValidatedInput(event, todoRequestSchema);
-
-  // do something with the body
-  const newTodo = {
-    id: 1,
-    description: validated.description,
-  };
-
-  // simulate a slow response to show the loading state o the front-end
-  await sleep(1000);
-
-  return newTodo;
-});
-
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
diff --git a/playground/server/api/todo/index.post.ts b/playground/server/api/todo/index.post.ts
deleted file mode 100644
index 6efc3b9..0000000
--- a/playground/server/api/todo/index.post.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { z } from "zod";
-
-const todoRequestSchema = z.object({
-  description: z.string().trim().min(6, "Description not long enough").startsWith("todo:", 'Must start with "todo:"'),
-});
-
-export default defineEventHandler(async (event) => {
-  const validated = await getValidatedInput(event, todoRequestSchema);
-
-  // do something with the body
-  const newTodo = {
-    id: 1,
-    description: validated.description,
-  };
-
-  // simulate a slow response to show the loading state o the front-end
-  await sleep(1000);
-
-  return newTodo;
-});
-
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}