added visitor relations

src/lib/db/schema.ts

@@ -19,12 +19,16 @@ export const shortener = pgTable('shortener', {
 	userId: integer('user_id').notNull(),
 })
 
-export const shortenerRelations = relations(shortener, ({ one }) => ({
+export const shortenerRelations = relations(
+	shortener,
+	({ one, many }) => ({
 		user: one(user, {
 			fields: [shortener.userId],
 			references: [user.id],
 		}),
-}))
+		visitor: many(visitor),
+	}),
+)
 
 export const user = pgTable('user', {
 	id: serial('id').primaryKey().notNull(),
@@ -49,6 +53,13 @@ export const visitor = pgTable('visitor', {
 	country: varchar('country', { length: 255 }).notNull(),
 })
 
+export const visitorRelations = relations(visitor, ({ one }) => ({
+	shortener: one(shortener, {
+		fields: [visitor.shortenerId],
+		references: [shortener.id],
+	}),
+}))
+
 export const session = pgTable('session', {
 	token: varchar('token', { length: 255 }).notNull(),
 	userId: integer('user_id').notNull(),

src/routes/(app)/links/+page.server.ts

@@ -1,6 +1,4 @@
 import { db } from '$lib/db'
-import { shortener } from '$lib/db/schema'
-import { eq } from 'drizzle-orm'
 import type { PageServerLoad } from './$types'
 import { redirect } from '@sveltejs/kit'
 
@@ -11,10 +9,12 @@ export const load = (async (event) => {
 
 	const userId = event.locals.user
 
-	const shorteners = await db
-		.select()
-		.from(shortener)
-		.where(eq(shortener.userId, userId))
+	const shorteners = await db.query.shortener.findMany({
+		with: {
+			visitor: true,
+		},
+		where: (shortener, { eq }) => eq(shortener.userId, userId),
+	})
 
 	return { shorteners }
 }) satisfies PageServerLoad

src/routes/(app)/links/+page.svelte

@@ -8,6 +8,7 @@
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
 	import {
+		BarChart,
 		Link2,
 		Loader2,
 		MoreVertical,
@@ -86,7 +87,7 @@
 {#if data.shorteners.length > 0}
 	<div class="flex flex-col gap-4 p-4">
 		{#each data.shorteners as shortener}
-			<Card.Root>
+			<Card.Root class="w-full max-w-[500px]">
 				<Card.Header>
 					<Card.Title class="flex items-center gap-2">
 						<a
@@ -103,8 +104,16 @@
 					<Card.Description>{shortener.link}</Card.Description>
 				</Card.Header>
 				<Card.Content>
-					<div class="flex justify-between">
-						<div></div>
+					<div class="flex items-center justify-between">
+						<div class="flex gap-2">
+							<div
+								class="flex items-center justify-center gap-1 rounded bg-secondary px-3 py-1 text-sm">
+								<BarChart size={20} />
+								<div>
+									{shortener.visitor.length} visits
+								</div>
+							</div>
+						</div>
 						<DropdownMenu.Root>
 							<DropdownMenu.Trigger>
 								<MoreVertical />