create-croissant 0.1.8 → 0.1.9

package/template/apps/web/src/routes/client-orpc.tsx

@@ -2,115 +2,130 @@ import * as React from "react"
 import { createFileRoute } from "@tanstack/react-router"
 import { Check, Pencil, Plus, Trash2 } from "lucide-react"
 import { toast } from "sonner"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useForm } from "@tanstack/react-form"
+import { z } from "zod"
 
 import { Button } from "@workspace/ui/components/button"
 import { Input } from "@workspace/ui/components/input"
+import {
+  Field,
+  FieldError,
+  FieldLabel,
+} from "@workspace/ui/components/field"
 
 import { orpc } from "../lib/orpc"
 
+const planetSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  description: z.string(),
+  distance: z.string().refine((val) => !isNaN(parseFloat(val)), "Must be a number"),
+  diameter: z.string().refine((val) => !isNaN(parseFloat(val)), "Must be a number"),
+})
+
 export const Route = createFileRoute("/client-orpc")({
   component: ClientORPC,
 })
 
 function ClientORPC() {
-  const [planets, setPlanets] = React.useState<Array<any>>([])
-  const [loading, setLoading] = React.useState(true)
+  const queryClient = useQueryClient()
   const [editingId, setEditingId] = React.useState<number | null>(null)
   
-  // Form states
-  const [name, setName] = React.useState("")
-  const [description, setDescription] = React.useState("")
-  const [distance, setDistance] = React.useState("0")
-  const [diameter, setDiameter] = React.useState("0")
+  const { data: planets = [], isLoading } = useQuery({
+    queryKey: ["planets"],
+    queryFn: () => orpc.getPlanets(),
+  })
 
-  const fetchPlanets = async () => {
-    try {
-      const res = await orpc.getPlanets()
-      setPlanets(res)
-    } catch (err) {
-      console.error(err)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  React.useEffect(() => {
-    fetchPlanets()
-  }, [])
+  const form = useForm({
+     defaultValues: {
+        name: "",
+        description: "",
+        distance: "0",
+        diameter: "0",
+      },
+      validators: {
+        onChange: planetSchema,
+      },
+      onSubmit: async ({ value }) => {
+      if (editingId) {
+        await updateMutation.mutateAsync({
+          id: editingId,
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        })
+      } else {
+        await createMutation.mutateAsync({
+          name: value.name,
+          description: value.description,
+          distanceFromSun: parseFloat(value.distance),
+          diameter: parseFloat(value.diameter),
+          hasRings: false,
+        })
+      }
+    },
+  })
 
   const resetForm = () => {
-    setName("")
-    setDescription("")
-    setDistance("0")
-    setDiameter("0")
+    form.reset()
     setEditingId(null)
   }
 
-  const handleAdd = async () => {
-    const toastId = toast.loading("Adding planet...")
-    try {
-      await orpc.createPlanet({
-        name,
-        description,
-        distanceFromSun: parseFloat(distance),
-        diameter: parseFloat(diameter),
-        hasRings: false,
-      })
-      await fetchPlanets()
+  const createMutation = useMutation({
+    mutationFn: (newPlanet: any) => orpc.createPlanet(newPlanet),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["planets"] })
       resetForm()
-      toast.success("Planet added successfully", { id: toastId })
-    } catch (err: any) {
-      console.error(err)
-      toast.error(err.message || "Failed to add planet", { id: toastId })
-    }
-  }
+      toast.success("Planet added successfully")
+    },
+    onError: (err: any) => {
+      toast.error(err.message || "Failed to add planet")
+    },
+  })
 
-  const handleUpdate = async (id: number) => {
-    const toastId = toast.loading("Updating planet...")
-    try {
-      await orpc.updatePlanet({
-        id,
-        name,
-        description,
-        distanceFromSun: parseFloat(distance),
-        diameter: parseFloat(diameter),
-        hasRings: false,
-      })
-      await fetchPlanets()
+  const updateMutation = useMutation({
+    mutationFn: (updatedPlanet: any) => orpc.updatePlanet(updatedPlanet),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["planets"] })
       resetForm()
-      toast.success("Planet updated successfully", { id: toastId })
-    } catch (err: any) {
-      console.error(err)
-      toast.error(err.message || "Failed to update planet", { id: toastId })
-    }
-  }
+      toast.success("Planet updated successfully")
+    },
+    onError: (err: any) => {
+      toast.error(err.message || "Failed to update planet")
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => orpc.deletePlanet({ id }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["planets"] })
+      toast.success("Planet deleted successfully")
+    },
+    onError: (err: any) => {
+      toast.error(err.message || "Failed to delete planet")
+    },
+  })
 
   const handleDelete = async (id: number) => {
     if (!confirm("Are you sure you want to delete this planet?")) return
-    const toastId = toast.loading("Deleting planet...")
-    try {
-      await orpc.deletePlanet({ id })
-      await fetchPlanets()
-      toast.success("Planet deleted successfully", { id: toastId })
-    } catch (err: any) {
-      console.error(err)
-      toast.error(err.message || "Failed to delete planet", { id: toastId })
-    }
+    await deleteMutation.mutateAsync(id)
   }
 
   const startEdit = (planet: any) => {
     setEditingId(planet.id)
-    setName(planet.name)
-    setDescription(planet.description || "")
-    setDistance(planet.distanceFromSun.toString())
-    setDiameter(planet.diameter.toString())
+    form.setFieldValue("name", planet.name)
+    form.setFieldValue("description", planet.description || "")
+    form.setFieldValue("distance", planet.distanceFromSun.toString())
+    form.setFieldValue("diameter", planet.diameter.toString())
   }
 
   return (
     <div className="flex flex-col gap-8">
       <div>
         <h1 className="text-2xl font-bold mb-2">Client + oRPC CRUD</h1>
-        <p className="text-muted-foreground">Manage planets directly from the client using oRPC mutations.</p>
+        <p className="text-muted-foreground">Manage planets directly from the client using TanStack Query, TanStack Form and oRPC.</p>
       </div>
 
       <div className="rounded-lg border p-6 bg-muted/30">
@@ -118,45 +133,120 @@ function ClientORPC() {
           {editingId ? <Pencil className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
           {editingId ? "Edit Planet" : "Add New Planet"}
         </h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Name</label>
-            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Mars" />
-          </div>
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Description</label>
-            <Input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="The red planet" />
-          </div>
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Distance (M km)</label>
-            <Input type="number" value={distance} onChange={(e) => setDistance(e.target.value)} />
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+        >
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <form.Field
+              name="name"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Name</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Mars"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="description"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Description</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="The red planet"
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="distance"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Distance (M km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
+            <form.Field
+              name="diameter"
+              children={(field) => (
+                <Field data-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+                  <FieldLabel htmlFor={field.name}>Diameter (km)</FieldLabel>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="number"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  {field.state.meta.isTouched && <FieldError errors={field.state.meta.errors} />}
+                </Field>
+              )}
+            />
           </div>
-          <div className="space-y-2">
-            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Diameter (km)</label>
-            <Input type="number" value={diameter} onChange={(e) => setDiameter(e.target.value)} />
+          <div className="mt-6 flex gap-2">
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <>
+                  {editingId ? (
+                    <>
+                      <Button 
+                        type="submit"
+                        className="flex items-center gap-2"
+                        disabled={!canSubmit || isSubmitting || updateMutation.isPending}
+                      >
+                        <Check className="h-4 w-4" /> {isSubmitting || updateMutation.isPending ? "Saving..." : "Save Changes"}
+                      </Button>
+                      <Button variant="outline" type="button" onClick={resetForm} disabled={isSubmitting || updateMutation.isPending}>
+                        Cancel
+                      </Button>
+                    </>
+                  ) : (
+                    <Button 
+                      type="submit"
+                      className="flex items-center gap-2"
+                      disabled={!canSubmit || isSubmitting || createMutation.isPending}
+                    >
+                      <Plus className="h-4 w-4" /> {isSubmitting || createMutation.isPending ? "Adding..." : "Add Planet"}
+                    </Button>
+                  )}
+                </>
+              )}
+            />
           </div>
-        </div>
-        <div className="mt-6 flex gap-2">
-          {editingId ? (
-            <>
-              <Button onClick={() => handleUpdate(editingId)} className="flex items-center gap-2">
-                <Check className="h-4 w-4" /> Save Changes
-              </Button>
-              <Button variant="outline" onClick={resetForm}>
-                Cancel
-              </Button>
-            </>
-          ) : (
-            <Button onClick={handleAdd} className="flex items-center gap-2">
-              <Plus className="h-4 w-4" /> Add Planet
-            </Button>
-          )}
-        </div>
+        </form>
       </div>
 
       <div className="space-y-4">
         <h2 className="font-semibold text-lg">Current Planets</h2>
-        {loading ? (
+        {isLoading ? (
           <p>Loading planets...</p>
         ) : planets.length === 0 ? (
           <p className="text-gray-500 italic">No planets found.</p>
@@ -179,7 +269,12 @@ function ClientORPC() {
                   <Button variant="outline" size="icon" onClick={() => startEdit(planet)}>
                     <Pencil className="h-4 w-4" />
                   </Button>
-                  <Button variant="destructive" size="icon" onClick={() => handleDelete(planet.id)}>
+                  <Button 
+                    variant="destructive" 
+                    size="icon" 
+                    onClick={() => handleDelete(planet.id)}
+                    disabled={deleteMutation.isPending}
+                  >
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </div>