From 1d5dd15d49558af6f5b427bf7ebbd508b6d8ac49 Mon Sep 17 00:00:00 2001 From: Taken Date: Fri, 27 Jun 2025 21:45:54 +0200 Subject: [PATCH] Updated form --- .../_components/advanced-url-form-card.tsx | 216 --------- .../_components/edit-url-form-card.tsx | 229 ---------- .../_components/simple-url-form-card.tsx | 100 +++++ .../dashboard/_components/url-form-card.tsx | 421 ++++++++++++++++-- src/app/(admin)/dashboard/create/page.tsx | 4 +- .../(admin)/dashboard/edit/[id]/not-found.tsx | 4 +- src/app/(admin)/dashboard/edit/[id]/page.tsx | 4 +- src/app/(admin)/dashboard/page.tsx | 2 +- 8 files changed, 489 insertions(+), 491 deletions(-) delete mode 100644 src/app/(admin)/dashboard/_components/advanced-url-form-card.tsx delete mode 100644 src/app/(admin)/dashboard/_components/edit-url-form-card.tsx create mode 100644 src/app/(admin)/dashboard/_components/simple-url-form-card.tsx diff --git a/src/app/(admin)/dashboard/_components/advanced-url-form-card.tsx b/src/app/(admin)/dashboard/_components/advanced-url-form-card.tsx deleted file mode 100644 index c4aaaa8..0000000 --- a/src/app/(admin)/dashboard/_components/advanced-url-form-card.tsx +++ /dev/null @@ -1,216 +0,0 @@ -"use client" - -import { DatePicker } from "@/components/date-picker" -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" -import { Input } from "@/components/ui/input" -import { Switch } from "@/components/ui/switch" -import { createAdvanceUrl } from "@/lib/actions/url" -import { advancedUrlSchema } from "@/lib/schema/url" -import { zodResolver } from "@hookform/resolvers/zod" -import { useForm } from "react-hook-form" -import { toast } from "sonner" -import { z } from "zod" - -type AdvancedUrlFormValues = z.infer - -export function AdvancedUrlFormCard() { - const form = useForm({ - resolver: zodResolver(advancedUrlSchema), - defaultValues: { - url: "", - slug: "", - title: "", - maxVisits: 0, - expDate: undefined, - forwardQueryParams: true, - crawlable: false - } - }) - - async function handleSubmit(data: AdvancedUrlFormValues) { - const res = await createAdvanceUrl(data) - - if (res.error) { - toast.error(res.message) - } else { - toast.success(res.message) - form.reset() - } - } - - return ( - - - Create Advanced Short Link - - Create a short link with advanced configuration options. - - - -
- -
-
- ( - - Original URL - - - - - The URL you want to shorten. - - - - )} - /> - ( - - Custom Slug (Optional) - - - - - A unique identifier for your short link (max 10 characters). - - - - )} - /> - ( - -
- - Forward Query Parameters - - - Forward query parameters from the short link to the destination URL. - -
- - - - - )} - /> - ( - -
- - Crawlable (Optional) - - - Allow search engines to crawl and index this link. - -
- - - - - )} - /> -
-
- ( - - Title (Optional) - - - - - A descriptive title for your link (max 100 characters). - - - - )} - /> - ( - - Max Visits (Optional) - - field.onChange(e.target.value ? parseInt(e.target.value) : undefined)} - /> - - - Maximum number of visits before the link expires. - - - - )} - /> - ( - - Expiration Date (Optional) - - - - - When this link should expire and become inaccessible. - - - - )} - /> -
-
- -
- - - - ) -} diff --git a/src/app/(admin)/dashboard/_components/edit-url-form-card.tsx b/src/app/(admin)/dashboard/_components/edit-url-form-card.tsx deleted file mode 100644 index 4adf478..0000000 --- a/src/app/(admin)/dashboard/_components/edit-url-form-card.tsx +++ /dev/null @@ -1,229 +0,0 @@ -"use client" - -import { DatePicker } from "@/components/date-picker" -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" -import { Input } from "@/components/ui/input" -import { Switch } from "@/components/ui/switch" -import { updateUrl } from "@/lib/actions/url" -import { urls } from "@/lib/drizzle/schema" -import { editUrlSchema } from "@/lib/schema/url" -import { zodResolver } from "@hookform/resolvers/zod" -import { useRouter } from "next/navigation" -import { useForm } from "react-hook-form" -import { toast } from "sonner" -import { z } from "zod" - -type EditUrlFormValues = z.infer - -export function EditUrlFormCard({ data }: { data: typeof urls.$inferSelect }) { - const router = useRouter() - const form = useForm({ - resolver: zodResolver(editUrlSchema), - defaultValues: { - url: data.url, - slug: data.slug, - title: data.title || "", - maxVisits: data.maxVisits || undefined, - expDate: data.expDate || undefined, - forwardQueryParams: data.forwardQueryParams || undefined, - crawlable: data.crawlable || undefined - } - }) - - async function handleSubmit(formData: EditUrlFormValues) { - const res = await updateUrl(data.id, formData) - - if (res.error) { - toast.error(res.message) - } else { - toast.success(res.message) - router.push("/dashboard/list") - } - } - - return ( - - - Edit Short Link - - Update the details of your short link. - - - -
- -
-
- ( - - Original URL - - - - - The URL you want to shorten. - - - - )} - /> - ( - - Custom Slug (Optional) - - - - - A unique identifier for your short link (max 10 characters). - - - - )} - /> - ( - -
- - Forward Query Parameters - - - Forward query parameters from the short link to the destination URL. - -
- - - - - )} - /> - ( - -
- - Crawlable (Optional) - - - Allow search engines to crawl and index this link. - -
- - - - - )} - /> -
-
- ( - - Title (Optional) - - - - - A descriptive title for your link (max 100 characters). - - - - )} - /> - ( - - Max Visits (Optional) - - field.onChange(e.target.value ? parseInt(e.target.value) : undefined)} - /> - - - Maximum number of visits before the link expires. - - - - )} - /> - ( - - Expiration Date (Optional) - - - - - When this link should expire and become inaccessible. - - - - )} - /> -
-
-
- - -
-
- - - - ) -} diff --git a/src/app/(admin)/dashboard/_components/simple-url-form-card.tsx b/src/app/(admin)/dashboard/_components/simple-url-form-card.tsx new file mode 100644 index 0000000..6327b30 --- /dev/null +++ b/src/app/(admin)/dashboard/_components/simple-url-form-card.tsx @@ -0,0 +1,100 @@ +"use client" + +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { addUrl } from "@/lib/actions/url" +import { urlFormSchema } from "@/lib/schema/url" +import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" +import { toast } from "sonner" +import { z } from "zod" + +type UrlFormValues = z.infer + +export function UrlFormCard() { + const form = useForm({ + resolver: zodResolver(urlFormSchema), + defaultValues: { + url: "", + slug: "" + } + }) + + async function handleSubmit(data: UrlFormValues) { + const res = await addUrl(data) + + if (res.error) { + toast.error(res.message) + } else { + toast.success(res.message) + form.reset() + } + } + + return ( + + + Create Short Link + + Enter a URL and create a custom slug for your short link. + + + +
+ + ( + + Original URL + + + + + The URL you want to shorten. + + + + )} + /> + ( + + Custom Slug + + + + + A unique identifier for your short link. + + + + )} + /> + + + +
+ + ) +} diff --git a/src/app/(admin)/dashboard/_components/url-form-card.tsx b/src/app/(admin)/dashboard/_components/url-form-card.tsx index 6327b30..1962cfd 100644 --- a/src/app/(admin)/dashboard/_components/url-form-card.tsx +++ b/src/app/(admin)/dashboard/_components/url-form-card.tsx @@ -1,29 +1,39 @@ "use client" +import { DatePicker } from "@/components/date-picker" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" -import { addUrl } from "@/lib/actions/url" -import { urlFormSchema } from "@/lib/schema/url" +import { Switch } from "@/components/ui/switch" +import { createAdvanceUrl, updateUrl } from "@/lib/actions/url" +import { urls } from "@/lib/drizzle/schema" +import { advancedUrlSchema, editUrlSchema } from "@/lib/schema/url" import { zodResolver } from "@hookform/resolvers/zod" +import { useRouter } from "next/navigation" import { useForm } from "react-hook-form" import { toast } from "sonner" import { z } from "zod" -type UrlFormValues = z.infer +type AdvancedUrlFormValues = z.infer +type EditUrlFormValues = z.infer -export function UrlFormCard() { - const form = useForm({ - resolver: zodResolver(urlFormSchema), +function AdvancedUrlForm() { + const form = useForm({ + resolver: zodResolver(advancedUrlSchema), defaultValues: { url: "", - slug: "" + slug: "", + title: "", + maxVisits: 0, + expDate: undefined, + forwardQueryParams: true, + crawlable: false } }) - async function handleSubmit(data: UrlFormValues) { - const res = await addUrl(data) + async function handleSubmit(formData: AdvancedUrlFormValues) { + const res = await createAdvanceUrl(formData) if (res.error) { toast.error(res.message) @@ -34,19 +44,10 @@ export function UrlFormCard() { } return ( - - - Create Short Link - - Enter a URL and create a custom slug for your short link. - - - -
- + + +
+
Original URL - + + + The URL you want to shorten. + + + + )} + /> + ( + + Custom Slug (Optional) + + + + + A unique identifier for your short link (max 10 characters). + + + + )} + /> + ( + +
+ + Forward Query Parameters + + + Forward query parameters from the short link to the destination URL. + +
+ + + + )} + /> + ( + +
+ + Crawlable + + + Allow search engines to crawl and index this link. + +
+ + + + + )} + /> +
+
+ ( + + Title (Optional) + + + + + A descriptive title for your link (max 100 characters). + + + + )} + /> + ( + + Max Visits (Optional) + + field.onChange(e.target.value ? parseInt(e.target.value) : undefined)} + /> + + + Maximum number of visits before the link expires. + + + + )} + /> + ( + + Expiration Date (Optional) + + + + + When this link should expire and become inaccessible. + + + + )} + /> +
+
+ +
+ +
+
+ + ) +} + +function EditUrlForm({ data }: { data: typeof urls.$inferSelect }) { + const router = useRouter() + const form = useForm({ + resolver: zodResolver(editUrlSchema), + defaultValues: { + url: data.url, + slug: data.slug, + title: data.title || "", + maxVisits: data.maxVisits || undefined, + expDate: data.expDate || undefined, + forwardQueryParams: data.forwardQueryParams || undefined, + crawlable: data.crawlable || undefined + } + }) + + async function handleSubmit(formData: EditUrlFormValues) { + const res = await updateUrl(data.id, formData) + + if (res.error) { + toast.error(res.message) + } else { + toast.success(res.message) + router.push("/dashboard/list") + } + } + + const handleCancel = () => { + router.push("/dashboard/list") + } + + return ( +
+ +
+
+ ( + + Original URL + + + The URL you want to shorten. @@ -73,27 +256,187 @@ export function UrlFormCard() { Custom Slug - + - A unique identifier for your short link. + A unique identifier for your short link (max 10 characters). )} /> - - - + ( + +
+ + Forward Query Parameters + + + Forward query parameters from the short link to the destination URL. + +
+ + + + + )} + /> + ( + +
+ + Crawlable + + + Allow search engines to crawl and index this link. + +
+ + + + + )} + /> +
+
+ ( + + Title + + + + + A descriptive title for your link (max 100 characters). + + + + )} + /> + ( + + Max Visits + + field.onChange(e.target.value ? parseInt(e.target.value) : undefined)} + /> + + + Maximum number of visits before the link expires. + + + + )} + /> + ( + + Expiration Date + + + + + When this link should expire and become inaccessible. + + + + )} + /> +
+
+ +
+ + +
+ + + ) +} + +type UrlFormCardProps = { + editMode: true + data: typeof urls.$inferSelect +} | { + editMode?: false + data?: never +} + +export function UrlFormCard({ editMode, data }: UrlFormCardProps) { + const getTitle = () => { + switch (editMode) { + case true: + return "Edit Short Link" + default: + return "Create Short Link" + } + } + + const getDescription = () => { + switch (editMode) { + case true: + return "Update the details of your short link." + default: + return "Create a short link with advanced configuration options." + } + } + + const renderForm = () => { + switch (editMode) { + case true: + return + default: + return + } + } + + return ( + + + {getTitle()} + {getDescription()} + + + {renderForm()} ) diff --git a/src/app/(admin)/dashboard/create/page.tsx b/src/app/(admin)/dashboard/create/page.tsx index cacc9df..8dbf186 100644 --- a/src/app/(admin)/dashboard/create/page.tsx +++ b/src/app/(admin)/dashboard/create/page.tsx @@ -1,5 +1,5 @@ import { getSession } from "@/lib/auth/session" -import { AdvancedUrlFormCard } from "../_components/advanced-url-form-card" +import { UrlFormCard } from "../_components/url-form-card" export default async function DashboardCreatePage() { const { session, redirect } = await getSession() @@ -13,7 +13,7 @@ export default async function DashboardCreatePage() {

Create Short Link

- + ) } diff --git a/src/app/(admin)/dashboard/edit/[id]/not-found.tsx b/src/app/(admin)/dashboard/edit/[id]/not-found.tsx index 96c56d0..1ac52b8 100644 --- a/src/app/(admin)/dashboard/edit/[id]/not-found.tsx +++ b/src/app/(admin)/dashboard/edit/[id]/not-found.tsx @@ -10,7 +10,7 @@ export default function NotFound() { URL Not Found - The short link you're trying to edit could not be found. + The short link you're trying to edit could not be found. @@ -20,7 +20,7 @@ export default function NotFound() {

  • The link has been deleted
    • -
  • You don't have permission to edit this link
    • +
  • You don't have permission to edit this link
  • The link ID is invalid
diff --git a/src/app/(admin)/dashboard/edit/[id]/page.tsx b/src/app/(admin)/dashboard/edit/[id]/page.tsx index 83b5630..73b8e7a 100644 --- a/src/app/(admin)/dashboard/edit/[id]/page.tsx +++ b/src/app/(admin)/dashboard/edit/[id]/page.tsx @@ -1,7 +1,7 @@ import { getSession } from "@/lib/auth/session" import { getUrlById } from "@/lib/db/urls" import { notFound } from "next/navigation" -import { EditUrlFormCard } from "../../_components/edit-url-form-card" +import { UrlFormCard } from "../../_components/url-form-card" export default async function EditPage({ params @@ -27,7 +27,7 @@ export default async function EditPage({

Edit Short Link

- +
) } diff --git a/src/app/(admin)/dashboard/page.tsx b/src/app/(admin)/dashboard/page.tsx index bb7688e..5e88f5a 100644 --- a/src/app/(admin)/dashboard/page.tsx +++ b/src/app/(admin)/dashboard/page.tsx @@ -1,8 +1,8 @@ import { getSession } from "@/lib/auth/session" import { getDashboardStats } from "@/lib/dashboard/stats" import { LinkIcon, MousePointerClick, TrendingUp } from "lucide-react" +import { UrlFormCard } from "./_components/simple-url-form-card" import { StatsCard } from "./_components/stats-card" -import { UrlFormCard } from "./_components/url-form-card" export default async function Dashboard() { const { session, redirect } = await getSession()