From 8239a427887b15dad9a1625f3fd12aa42301379a Mon Sep 17 00:00:00 2001
From: Elias Gabriel <eliasgabrielcf@gmail.com>
Date: Thu, 17 Aug 2023 11:31:45 -0300
Subject: [PATCH] feat: add tags to video list

---
 src/app/(app)/uploads/components/columns.tsx | 31 +++++++++++++++-----
 src/app/(app)/uploads/data/schema.ts         |  9 ++++++
 src/app/(app)/uploads/video-list.tsx         |  3 +-
 src/app/api/videos/route.ts                  |  4 +++
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/app/(app)/uploads/components/columns.tsx b/src/app/(app)/uploads/components/columns.tsx
index b8643fa..6b70363 100644
--- a/src/app/(app)/uploads/components/columns.tsx
+++ b/src/app/(app)/uploads/components/columns.tsx
@@ -12,6 +12,7 @@ import { TranscriptionPreview } from '@/components/transcription-preview'
 import { CopyButton } from '@/components/copy-button'
 import { formatBytes } from '@/utils/format-bytes'
 import Link from 'next/link'
+import { Badge } from '@/components/ui/badge'
 
 dayjs.extend(relativeTime)
 
@@ -23,13 +24,29 @@ export const columns: ColumnDef<Video>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex flex-col">
-          <Link
-            href={`/videos/${row.original.id}`}
-            prefetch={false}
-            className="text-violet-500 hover:underline dark:text-violet-300"
-          >
-            {row.original.title}
-          </Link>
+          <div className="flex items-center gap-2">
+            <Link
+              href={`/videos/${row.original.id}`}
+              prefetch={false}
+              className="text-violet-500 hover:underline dark:text-violet-300"
+            >
+              {row.original.title}
+            </Link>
+
+            {row.original.tags && (
+              <div className="flex gap-1 py-0.5">
+                {row.original.tags?.map((tag) => (
+                  <Badge
+                    variant="secondary"
+                    key={tag.id}
+                    className="pointer-events-none rounded-sm px-1 font-normal"
+                  >
+                    {tag.slug}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
           <span className="text-xs text-muted-foreground">
             {row.original.id}
           </span>
diff --git a/src/app/(app)/uploads/data/schema.ts b/src/app/(app)/uploads/data/schema.ts
index 1549ce9..6dfa84e 100644
--- a/src/app/(app)/uploads/data/schema.ts
+++ b/src/app/(app)/uploads/data/schema.ts
@@ -16,6 +16,15 @@ export const videoSchema = z.object({
       id: z.string(),
     })
     .optional(),
+  tags: z
+    .array(
+      z.object({
+        id: z.string().uuid(),
+        slug: z.string(),
+        createdAt: z.coerce.date(),
+      }),
+    )
+    .optional(),
 })
 
 export type Video = z.infer<typeof videoSchema>
diff --git a/src/app/(app)/uploads/video-list.tsx b/src/app/(app)/uploads/video-list.tsx
index 64a556d..21778d4 100644
--- a/src/app/(app)/uploads/video-list.tsx
+++ b/src/app/(app)/uploads/video-list.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { DataTable } from './components/data-table'
 import axios from 'axios'
@@ -20,6 +20,7 @@ export function VideoList() {
         params: {
           pageIndex,
           pageSize,
+          tags: true,
         },
       })
 
diff --git a/src/app/api/videos/route.ts b/src/app/api/videos/route.ts
index 4cf9089..023e66a 100644
--- a/src/app/api/videos/route.ts
+++ b/src/app/api/videos/route.ts
@@ -15,6 +15,8 @@ export async function GET(request: Request) {
     .default(10)
     .parse(searchParams.get('pageSize'))
 
+  const tags = z.coerce.boolean().default(false).parse(searchParams.get('tags'))
+
   try {
     const [videos, count] = await Promise.all([
       prisma.video.findMany({
@@ -24,6 +26,8 @@ export async function GET(request: Request) {
               id: true,
             },
           },
+
+          tags,
         },
         orderBy: {
           createdAt: 'desc',