Frontend shortener table to display visitor count for each shortener

elysia/src/index.ts

@@ -11,7 +11,18 @@ app.get('/', () => 'Hello Elysia')
 app.get('/invalid', () => 'Invalid Shortener')
 
 app.get('/link', async () => {
-	const shorteners = await db.selectFrom('shortener').selectAll().execute()
+	const shorteners = await db
+		.selectFrom('shortener')
+		.leftJoin('visitor', 'visitor.shortener_id', 'shortener.id')
+		.select(({ fn }) => [
+			'shortener.id',
+			'shortener.link',
+			'shortener.code',
+			'shortener.created_at',
+			fn.count<number>('visitor.id').as('visitor_count'),
+		])
+		.groupBy('shortener.id')
+		.execute()
 
 	return { shorteners }
 })

react-frontend/src/App.tsx

@@ -45,6 +45,7 @@ type Shortener = {
 	id: number
 	link: string
 	code: string
+	visitor_count: string
 }
 
 export default function App() {
@@ -87,13 +88,24 @@ export default function App() {
 	)
 }
 
-const Navbar = ({ getShorteners }: { getShorteners: () => Promise<void> }) => {
+export const Navbar = ({
+	getShorteners,
+}: {
+	getShorteners?: () => Promise<void>
+}) => {
+	const navigate = useNavigate()
 	return (
 		<div className='flex justify-center border-b border-b-border px-2'>
 			<div className='flex w-full max-w-6xl items-center justify-between py-2'>
-				<div className='font-bold'>Shortener</div>
+				<div
+					className='cursor-pointer font-bold'
+					onClick={() => navigate('/')}>
+					Shortener
+				</div>
 				<div className='flex items-center gap-2'>
-					<CreateShortener getShorteners={getShorteners} />
+					{getShorteners && (
+						<CreateShortener getShorteners={getShorteners} />
+					)}
 					<ModeToggle />
 				</div>
 			</div>
@@ -114,7 +126,7 @@ const CreateShortener = ({
 			},
 			method: 'POST',
 			body: JSON.stringify({
-				link: link,
+				link: link.startsWith('https://') ? link : 'https://' + link,
 			}),
 		}).then(() => {
 			getShorteners()
@@ -194,6 +206,9 @@ const ShortenerTable = ({
 						<TableRow>
 							<TableHead>Link</TableHead>
 							<TableHead>Shortener</TableHead>
+							<TableHead className='text-right'>
+								Visitors
+							</TableHead>
 							<TableHead></TableHead>
 						</TableRow>
 					</TableHeader>
@@ -212,6 +227,9 @@ const ShortenerTable = ({
 											<Copy className='h-[1.2rem] w-[1.2rem]' />
 										</div>
 									</TableCell>
+									<TableCell className='text-right'>
+										{shortener.visitor_count}
+									</TableCell>
 									<TableCell>
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>