Implementr form

This commit is contained in:
2025-06-26 13:46:32 +02:00
parent 711fb34021
commit da0524a4fc
12 changed files with 903 additions and 4 deletions

View File

@@ -1,4 +1,5 @@
import { StatsCard } from "@/components/dashboard/stats-card"
import { UrlFormCard } from "@/components/dashboard/url-form-card"
import { getSession } from "@/lib/auth/session"
import { getDashboardStats } from "@/lib/dashboard/stats"
import { LinkIcon, MousePointerClick, TrendingUp } from "lucide-react"
@@ -24,8 +25,6 @@ export default async function Dashboard() {
return (
<div className="p-6">
<h1 className="text-2xl font-bold text-gray-900 mb-4">Dashboard</h1>
<p className="text-gray-600 mb-6">Welcome to your dashboard! Use the sidebar to navigate to different sections.</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
<StatsCard
title="Shortened URLs"
@@ -46,6 +45,8 @@ export default async function Dashboard() {
description={mostVisitedDescription}
/>
</div>
<UrlFormCard />
</div>
)
}

View File

@@ -0,0 +1,92 @@
"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 { z } from "zod"
type UrlFormValues = z.infer<typeof urlFormSchema>
export function UrlFormCard() {
const form = useForm<UrlFormValues>({
resolver: zodResolver(urlFormSchema),
defaultValues: {
url: "",
slug: ""
}
})
async function handleSubmit(data: UrlFormValues) {
const res = await addUrl(data)
}
return (
<Card>
<CardHeader>
<CardTitle>Create Short Link</CardTitle>
<CardDescription>
Enter a URL and create a custom slug for your short link.
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleSubmit)}
className="space-y-4"
>
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<FormLabel>Original URL</FormLabel>
<FormControl>
<Input
placeholder="https://example.com"
{...field}
/>
</FormControl>
<FormDescription>
The URL you want to shorten.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="slug"
render={({ field }) => (
<FormItem>
<FormLabel>Custom Slug</FormLabel>
<FormControl>
<Input
placeholder="my-custom-link"
{...field}
/>
</FormControl>
<FormDescription>
A unique identifier for your short link.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full"
disabled={form.formState.isSubmitting}
>
{form.formState.isSubmitting ? "Creating..." : "Create Short Link"}
</Button>
</form>
</Form>
</CardContent>
</Card>
)
}

167
src/components/ui/form.tsx Normal file
View File

@@ -0,0 +1,167 @@
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
Controller,
FormProvider,
useFormContext,
useFormState,
type ControllerProps,
type FieldPath,
type FieldValues,
} from "react-hook-form"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
const Form = FormProvider
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName
}
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState } = useFormContext()
const formState = useFormState({ name: fieldContext.name })
const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
const { id } = itemContext
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
type FormItemContextValue = {
id: string
}
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
const id = React.useId()
return (
<FormItemContext.Provider value={{ id }}>
<div
data-slot="form-item"
className={cn("grid gap-2", className)}
{...props}
/>
</FormItemContext.Provider>
)
}
function FormLabel({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
const { error, formItemId } = useFormField()
return (
<Label
data-slot="form-label"
data-error={!!error}
className={cn("data-[error=true]:text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
)
}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
)
}
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
const { formDescriptionId } = useFormField()
return (
<p
data-slot="form-description"
id={formDescriptionId}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message ?? "") : props.children
if (!body) {
return null
}
return (
<p
data-slot="form-message"
id={formMessageId}
className={cn("text-destructive text-sm", className)}
{...props}
>
{body}
</p>
)
}
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}

37
src/lib/actions/url.ts Normal file
View File

@@ -0,0 +1,37 @@
"use server"
import { getSession } from "../auth/session"
import { insertUrl } from "../db/urls"
import { urlFormSchema } from "../schema/url"
type Response = {
error: boolean
message: string
}
export async function addUrl(unsafeData: unknown): Promise<Response> {
const { session } = await getSession()
if (!session) {
return {
error: true,
message: "You must be logged in to create a short link."
}
}
const { error, data } = urlFormSchema.safeParse(unsafeData)
if (error) {
return {
error: true,
message: "Error parsing form data."
}
}
await insertUrl(data)
return {
error: false,
message: "Short link created successfully!"
}
}

15
src/lib/db/urls.ts Normal file
View File

@@ -0,0 +1,15 @@
import { eq } from "drizzle-orm";
import { db } from "../drizzle/db";
import { urls } from "../drizzle/schema";
export function insertUrl(data: typeof urls.$inferInsert) {
return db.insert(urls).values(data)
}
export function updateUrl(id: string, data: Omit<Partial<typeof urls.$inferInsert>, "id">) {
return db.update(urls).set(data).where(eq(urls.id, id))
}
export function deleteUrl(id: string) {
return db.delete(urls).where(eq(urls.id, id))
}

View File

@@ -0,0 +1,2 @@
ALTER TABLE "urls" ALTER COLUMN "id" SET DEFAULT gen_random_uuid();--> statement-breakpoint
ALTER TABLE "urls" ALTER COLUMN "title" DROP NOT NULL;

View File

@@ -0,0 +1,532 @@
{
"id": "3be7b31f-8b1b-457a-839a-2d490f48e833",
"prevId": "79b6d1a7-2d90-461c-bd57-51a42fc17b23",
"version": "7",
"dialect": "postgresql",
"tables": {
"public.account": {
"name": "account",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true
},
"account_id": {
"name": "account_id",
"type": "text",
"primaryKey": false,
"notNull": true
},
"provider_id": {
"name": "provider_id",
"type": "text",
"primaryKey": false,
"notNull": true
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true
},
"access_token": {
"name": "access_token",
"type": "text",
"primaryKey": false,
"notNull": false
},
"refresh_token": {
"name": "refresh_token",
"type": "text",
"primaryKey": false,
"notNull": false
},
"id_token": {
"name": "id_token",
"type": "text",
"primaryKey": false,
"notNull": false
},
"access_token_expires_at": {
"name": "access_token_expires_at",
"type": "timestamp",
"primaryKey": false,
"notNull": false
},
"refresh_token_expires_at": {
"name": "refresh_token_expires_at",
"type": "timestamp",
"primaryKey": false,
"notNull": false
},
"scope": {
"name": "scope",
"type": "text",
"primaryKey": false,
"notNull": false
},
"password": {
"name": "password",
"type": "text",
"primaryKey": false,
"notNull": false
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
},
"updated_at": {
"name": "updated_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
}
},
"indexes": {},
"foreignKeys": {
"account_user_id_user_id_fk": {
"name": "account_user_id_user_id_fk",
"tableFrom": "account",
"tableTo": "user",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.session": {
"name": "session",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true
},
"expires_at": {
"name": "expires_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
},
"token": {
"name": "token",
"type": "text",
"primaryKey": false,
"notNull": true
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
},
"updated_at": {
"name": "updated_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
},
"ip_address": {
"name": "ip_address",
"type": "text",
"primaryKey": false,
"notNull": false
},
"user_agent": {
"name": "user_agent",
"type": "text",
"primaryKey": false,
"notNull": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true
}
},
"indexes": {},
"foreignKeys": {
"session_user_id_user_id_fk": {
"name": "session_user_id_user_id_fk",
"tableFrom": "session",
"tableTo": "user",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"session_token_unique": {
"name": "session_token_unique",
"nullsNotDistinct": false,
"columns": [
"token"
]
}
},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.urls": {
"name": "urls",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "uuid",
"primaryKey": true,
"notNull": true,
"default": "gen_random_uuid()"
},
"url": {
"name": "url",
"type": "varchar",
"primaryKey": false,
"notNull": true
},
"slug": {
"name": "slug",
"type": "varchar",
"primaryKey": false,
"notNull": true
},
"title": {
"name": "title",
"type": "varchar",
"primaryKey": false,
"notNull": false
},
"max_visits": {
"name": "max_visits",
"type": "integer",
"primaryKey": false,
"notNull": false
},
"exp_date": {
"name": "exp_date",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": false
},
"forward_query_params": {
"name": "forward_query_params",
"type": "boolean",
"primaryKey": false,
"notNull": false,
"default": true
},
"crawable": {
"name": "crawable",
"type": "boolean",
"primaryKey": false,
"notNull": false,
"default": false
},
"created_at": {
"name": "created_at",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": false,
"default": "now()"
},
"updated_at": {
"name": "updated_at",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": false,
"default": "now()"
}
},
"indexes": {
"urls_slug_idx": {
"name": "urls_slug_idx",
"columns": [
{
"expression": "slug",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
},
"urls_url_idx": {
"name": "urls_url_idx",
"columns": [
{
"expression": "url",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
},
"exp_date_idx": {
"name": "exp_date_idx",
"columns": [
{
"expression": "exp_date",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"urls_slug_unique": {
"name": "urls_slug_unique",
"nullsNotDistinct": false,
"columns": [
"slug"
]
}
},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.user": {
"name": "user",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true
},
"email": {
"name": "email",
"type": "text",
"primaryKey": false,
"notNull": true
},
"email_verified": {
"name": "email_verified",
"type": "boolean",
"primaryKey": false,
"notNull": true
},
"image": {
"name": "image",
"type": "text",
"primaryKey": false,
"notNull": false
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
},
"updated_at": {
"name": "updated_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"user_email_unique": {
"name": "user_email_unique",
"nullsNotDistinct": false,
"columns": [
"email"
]
}
},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.verification": {
"name": "verification",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true
},
"identifier": {
"name": "identifier",
"type": "text",
"primaryKey": false,
"notNull": true
},
"value": {
"name": "value",
"type": "text",
"primaryKey": false,
"notNull": true
},
"expires_at": {
"name": "expires_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"primaryKey": false,
"notNull": false
},
"updated_at": {
"name": "updated_at",
"type": "timestamp",
"primaryKey": false,
"notNull": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.visits": {
"name": "visits",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "uuid",
"primaryKey": true,
"notNull": true
},
"url_id": {
"name": "url_id",
"type": "uuid",
"primaryKey": false,
"notNull": true
},
"ip_address": {
"name": "ip_address",
"type": "varchar",
"primaryKey": false,
"notNull": true
},
"user_agent": {
"name": "user_agent",
"type": "varchar",
"primaryKey": false,
"notNull": true
},
"created_at": {
"name": "created_at",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": false,
"default": "now()"
},
"updated_at": {
"name": "updated_at",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": false,
"default": "now()"
}
},
"indexes": {
"visits_url_id_idx": {
"name": "visits_url_id_idx",
"columns": [
{
"expression": "url_id",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {
"visits_url_id_urls_id_fk": {
"name": "visits_url_id_urls_id_fk",
"tableFrom": "visits",
"tableTo": "urls",
"columnsFrom": [
"url_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
}
},
"enums": {},
"schemas": {},
"sequences": {},
"roles": {},
"policies": {},
"views": {},
"_meta": {
"columns": {},
"schemas": {},
"tables": {}
}
}

View File

@@ -8,6 +8,13 @@
"when": 1750934261568,
"tag": "0000_cultured_colonel_america",
"breakpoints": true
},
{
"idx": 1,
"version": "7",
"when": 1750938276218,
"tag": "0001_flawless_goblin_queen",
"breakpoints": true
}
]
}

View File

@@ -7,10 +7,10 @@ const createdAt = timestamp("created_at", { withTimezone: true }).defaultNow()
const updatedAt = timestamp("updated_at", { withTimezone: true }).defaultNow().$onUpdate(() => new Date())
export const urls = pgTable("urls", {
id: uuid("id").primaryKey().notNull(),
id: uuid("id").primaryKey().notNull().defaultRandom(),
url: varchar("url").notNull(),
slug: varchar("slug").unique().notNull(),
title: varchar("title").notNull(),
title: varchar("title"),
maxVisits: integer("max_visits"),
expDate: timestamp("exp_date", { withTimezone: true }),
forwardQueryParams: boolean("forward_query_params").default(true),

13
src/lib/schema/url.ts Normal file
View File

@@ -0,0 +1,13 @@
import { z } from "zod";
export const urlFormSchema = z.object({
url: z.string().url("Please enter a valid URL"),
slug: z
.string()
.min(1, "Slug is required")
.max(50, "Slug must be 50 characters or less")
.regex(
/^[a-zA-Z0-9-_]+$/,
"Slug can only contain letters, numbers, hyphens, and underscores"
)
})