fix: handle register response correctly

- get sorting data from backend

app/routes/forms.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
 import { useNavigate, Link } from "react-router"
-import { Plus, Search } from "lucide-react"
+import { Plus, Search, Filter, ArrowUpDown, Loader2 } from "lucide-react"
 import { Navbar } from "@/components/shared/navbar"
 import { Footer } from "@/components/shared/footer"
 import { FormInput } from "@/components/shared/form-input"
@@ -10,13 +10,25 @@ import { useAuth } from "@/app/context/auth-context"
 import { getForms } from "@/lib/api"
 import type { FormSummary } from "@/lib/types"
 
+type StatusFilter = "all" | "has_responses" | "no_responses"
+type SortBy = "created_at" | "updated_at"
+type SortDir = "newest" | "oldest"
+
+const DEBOUNCE_MS = 400
+
 export default function FormsPage() {
   const { user, loading } = useAuth()
   const navigate = useNavigate()
   const [search, setSearch] = useState("")
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
+  const [sortBy, setSortBy] = useState<SortBy>("created_at")
+  const [sortDir, setSortDir] = useState<SortDir>("newest")
   const [forms, setForms] = useState<FormSummary[]>([])
+  const [totalForms, setTotalForms] = useState(0)
   const [loadingForms, setLoadingForms] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isInitialLoad = useRef(true)
 
   useEffect(() => {
     if (!loading && !user) {
@@ -24,21 +36,62 @@ export default function FormsPage() {
     }
   }, [user, loading, navigate])
 
+  const fetchForms = useCallback(async (params: {
+    search: string
+    statusFilter: StatusFilter
+    sortBy: SortBy
+    sortDir: SortDir
+  }) => {
+    setError(null)
+    setLoadingForms(true)
+    try {
+      const data = await getForms({
+        search: params.search || undefined,
+        status: params.statusFilter === "all" ? undefined : params.statusFilter,
+        sort_by: params.sortBy,
+        sort_dir: params.sortDir,
+      })
+      setForms(data)
+      if (isInitialLoad.current) {
+        setTotalForms(data.length)
+        isInitialLoad.current = false
+      }
+    } catch {
+      setError("Failed to load forms. Please try again.")
+    } finally {
+      setLoadingForms(false)
+    }
+  }, [])
+
+  // Initial fetch
   useEffect(() => {
     if (!user) return
+    fetchForms({ search, statusFilter, sortBy, sortDir })
+  }, [user]) // eslint-disable-line react-hooks/exhaustive-deps
 
-    async function fetchForms() {
-      try {
-        const data = await getForms()
-        setForms(data)
-      } catch {
-        setError("Failed to load forms. Please try again.")
-      } finally {
-        setLoadingForms(false)
-      }
+  // Debounced fetch when filters change (skip initial)
+  useEffect(() => {
+    if (!user || isInitialLoad.current) return
+
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+
+    debounceRef.current = setTimeout(() => {
+      fetchForms({ search, statusFilter, sortBy, sortDir })
+    }, DEBOUNCE_MS)
+
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
     }
-    fetchForms()
-  }, [user])
+  }, [search, statusFilter, sortBy, sortDir, user, fetchForms])
+
+  const hasActiveFilters = search !== "" || statusFilter !== "all"
+
+  function clearAllFilters() {
+    setSearch("")
+    setStatusFilter("all")
+    setSortBy("created_at")
+    setSortDir("newest")
+  }
 
   if (loading || loadingForms) {
     return (
@@ -50,13 +103,6 @@ export default function FormsPage() {
 
   if (!user) return null
 
-  const filtered = forms.filter((form) => {
-    return (
-      form.title.toLowerCase().includes(search.toLowerCase()) ||
-      form.description.toLowerCase().includes(search.toLowerCase())
-    )
-  })
-
   return (
     <div className="flex min-h-screen flex-col bg-background">
       <Navbar />
@@ -78,21 +124,76 @@ export default function FormsPage() {
             </Link>
           </div>
 
-          <div className="mb-6">
-            <div className="relative max-w-md">
+          <div className="mb-6 flex flex-col gap-3">
+            <div className="relative w-full sm:max-w-md">
               <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <FormInput
-                placeholder="Search forms..."
+                placeholder="Search forms by title..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 className="pl-9"
               />
             </div>
+
+            <div className="grid grid-cols-2 gap-2 sm:flex sm:items-center sm:gap-2">
+              <div className="relative col-span-2 sm:col-span-1">
+                <Filter className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <select
+                  value={statusFilter}
+                  onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
+                  className="h-10 w-full appearance-none rounded-lg border border-border bg-card pl-8 pr-8 text-sm text-foreground shadow-sm focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
+                >
+                  <option value="all">All Status</option>
+                  <option value="has_responses">Has Responses</option>
+                  <option value="no_responses">No Responses</option>
+                </select>
+              </div>
+
+              <div className="relative">
+                <ArrowUpDown className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <select
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value as SortBy)}
+                  className="h-10 w-full appearance-none rounded-lg border border-border bg-card pl-8 pr-8 text-sm text-foreground shadow-sm focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
+                >
+                  <option value="created_at">Sort: Created</option>
+                  <option value="updated_at">Sort: Updated</option>
+                </select>
+              </div>
+
+              <div className="relative">
+                <select
+                  value={sortDir}
+                  onChange={(e) => setSortDir(e.target.value as SortDir)}
+                  className="h-10 w-full appearance-none rounded-lg border border-border bg-card pl-8 pr-8 text-sm text-foreground shadow-sm focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
+                >
+                  <option value="newest">Newest first</option>
+                  <option value="oldest">Oldest first</option>
+                </select>
+              </div>
+            </div>
           </div>
 
-          <p className="mb-4 text-sm text-muted-foreground">
-            Showing {filtered.length} of {forms.length} forms
-          </p>
+          <div className="mb-4 flex items-center justify-between">
+            <p className="text-sm text-muted-foreground">
+              {loadingForms ? (
+                <span className="inline-flex items-center gap-1.5">
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  Searching...
+                </span>
+              ) : (
+                <>Showing {forms.length}{totalForms > 0 ? ` of ${totalForms}` : ""} forms</>
+              )}
+            </p>
+            {hasActiveFilters && (
+              <button
+                onClick={clearAllFilters}
+                className="text-xs text-primary hover:underline"
+              >
+                Clear all filters
+              </button>
+            )}
+          </div>
 
           {error ? (
             <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16">
@@ -106,9 +207,9 @@ export default function FormsPage() {
                 Retry
               </FormButton>
             </div>
-          ) : filtered.length > 0 ? (
+          ) : forms.length > 0 ? (
             <div className="grid gap-5 sm:grid-cols-2">
-              {filtered.map((form) => (
+              {forms.map((form) => (
                 <FormCard key={form.id} form={form} />
               ))}
             </div>
@@ -121,7 +222,7 @@ export default function FormsPage() {
                 variant="ghost"
                 size="sm"
                 className="mt-3"
-                onClick={() => setSearch("")}
+                onClick={clearAllFilters}
               >
                 Clear filters
               </FormButton>

app/routes/home.tsx

@@ -1,13 +1,5 @@
-import type { Route } from "./+types/home";
-import { Welcome } from "../welcome/welcome";
+import { redirect } from "react-router";
 
-export function meta({}: Route.MetaArgs) {
-  return [
-    { title: "New React Router App" },
-    { name: "description", content: "Welcome to React Router!" },
-  ];
-}
-
-export default function Home() {
-  return <Welcome />;
+export function loader() {
+  throw redirect("/forms");
 }