238 lines
8.7 KiB
TypeScript
238 lines
8.7 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from "react"
|
|
import { useNavigate, Link } from "react-router"
|
|
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"
|
|
import { FormButton } from "@/components/shared/form-button"
|
|
import { FormCard } from "@/components/forms/form-card"
|
|
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) {
|
|
navigate("/login")
|
|
}
|
|
}, [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)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!user) return
|
|
fetchForms({ search, statusFilter, sortBy, sortDir })
|
|
}, [user])
|
|
|
|
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)
|
|
}
|
|
}, [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 (
|
|
<div className="flex min-h-screen items-center justify-center bg-background">
|
|
<p className="text-muted-foreground">Loading...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!user) return null
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background">
|
|
<Navbar />
|
|
|
|
<main className="flex-1">
|
|
<div className="mx-auto max-w-6xl px-4 py-8 lg:px-8">
|
|
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-foreground">My Forms</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Manage and preview all your forms in one place
|
|
</p>
|
|
</div>
|
|
<Link to="/forms/new">
|
|
<FormButton size="md">
|
|
<Plus className="h-4 w-4" />
|
|
New Form
|
|
</FormButton>
|
|
</Link>
|
|
</div>
|
|
|
|
<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 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>
|
|
|
|
<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">
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
<FormButton
|
|
variant="ghost"
|
|
size="sm"
|
|
className="mt-3"
|
|
onClick={() => window.location.reload()}
|
|
>
|
|
Retry
|
|
</FormButton>
|
|
</div>
|
|
) : forms.length > 0 ? (
|
|
<div className="grid gap-5 sm:grid-cols-2">
|
|
{forms.map((form, index) => (
|
|
<div key={form.id} className="animate-float-in" style={{ animationDelay: `${index * 0.08}s` }}>
|
|
<FormCard form={form} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16">
|
|
<p className="text-sm text-muted-foreground">
|
|
No forms found matching your criteria.
|
|
</p>
|
|
<FormButton
|
|
variant="ghost"
|
|
size="sm"
|
|
className="mt-3"
|
|
onClick={clearAllFilters}
|
|
>
|
|
Clear filters
|
|
</FormButton>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|