feat(forms): add create form page with POST /api/form integration

2026-02-22 00:16:57 +07:00
parent 90e83050b9
commit 6a500e7ac0
1 changed files with 145 additions and 0 deletions
@@ -0,0 +1,145 @@
+import { useState, useEffect } from "react"
+import { useNavigate } from "react-router"
+import { ArrowLeft } from "lucide-react"
+import { Link } from "react-router"
+import { Navbar } from "@/components/shared/navbar"
+import { Footer } from "@/components/shared/footer"
+import { FormInput } from "@/components/shared/form-input"
+import { FormButton } from "@/components/shared/form-button"
+import { QuestionEditor } from "@/components/forms/question-editor"
+import { useAuth } from "@/app/context/auth-context"
+import { createForm } from "@/lib/api"
+import type { CreateQuestion } from "@/lib/types"
+
+const TYPES_WITH_OPTIONS = ["multiple_choice", "checkbox", "dropdown"]
+
+export default function CreateFormPage() {
+  const { user, loading: authLoading } = useAuth()
+  const navigate = useNavigate()
+
+  const [title, setTitle] = useState("")
+  const [description, setDescription] = useState("")
+  const [questions, setQuestions] = useState<CreateQuestion[]>([
+    { type: "short_text", title: "", required: false, position: 1, options: [] },
+  ])
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      navigate("/login")
+    }
+  }, [user, authLoading, navigate])
+
+  if (authLoading || !user) return null
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    if (!title.trim()) {
+      setError("Form title is required.")
+      return
+    }
+
+    const hasEmptyQuestion = questions.some((q) => !q.title.trim())
+    if (hasEmptyQuestion) {
+      setError("All questions must have a title.")
+      return
+    }
+
+    const hasEmptyOption = questions.some(
+      (q) =>
+        TYPES_WITH_OPTIONS.includes(q.type) &&
+        (q.options.length === 0 || q.options.some((o) => !o.label.trim()))
+    )
+    if (hasEmptyOption) {
+      setError("All options must have a label.")
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      const result = await createForm({
+        title: title.trim(),
+        description: description.trim(),
+        questions,
+      })
+      navigate(`/form/${result.id}`)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create form.")
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      <Navbar />
+
+      <main className="flex-1">
+        <div className="mx-auto max-w-3xl px-4 py-8 lg:px-8">
+          <Link
+            to="/forms"
+            className="mb-6 inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to forms
+          </Link>
+
+          <h1 className="mb-6 text-2xl font-bold text-foreground">
+            Create New Form
+          </h1>
+
+          <form onSubmit={handleSubmit}>
+            {error && (
+              <div className="mb-6 rounded-lg bg-destructive/10 px-4 py-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <div className="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
+              <div className="h-2 -mx-6 -mt-6 mb-6 rounded-t-xl bg-primary" />
+              <div className="flex flex-col gap-4">
+                <FormInput
+                  label="Form Title"
+                  placeholder="Enter form title"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                />
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-sm font-medium text-foreground">
+                    Description
+                  </label>
+                  <textarea
+                    placeholder="Enter form description"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    rows={3}
+                    className="rounded-lg border border-input bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20 resize-none"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <QuestionEditor questions={questions} onChange={setQuestions} />
+
+            <div className="mt-8 flex items-center justify-end gap-3">
+              <Link to="/forms">
+                <FormButton type="button" variant="ghost" size="md">
+                  Cancel
+                </FormButton>
+              </Link>
+              <FormButton type="submit" size="md" disabled={submitting}>
+                {submitting ? "Creating..." : "Create Form"}
+              </FormButton>
+            </div>
+          </form>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}