From e1e5ea3bbd9e8d678dd601748523c891f793f34e Mon Sep 17 00:00:00 2001
From: ooithianhooi <ooithianhooi@gmail.com>
Date: Sat, 27 Jul 2024 22:09:43 +0800
Subject: [PATCH] feat: handle parsing of pros and cons in array

---
 app/modules/dashboard/DataDrawer.tsx | 13 +++++++++++--
 app/modules/dashboard/columns.tsx    |  5 ++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/modules/dashboard/DataDrawer.tsx b/app/modules/dashboard/DataDrawer.tsx
index 3d97d12..b59e751 100644
--- a/app/modules/dashboard/DataDrawer.tsx
+++ b/app/modules/dashboard/DataDrawer.tsx
@@ -18,6 +18,15 @@ const Title = ({ children }: { children: React.ReactNode }) => (
 );
 
 export function DataSheet({ open, onOpenChange, video }: Props) {
+  const parseProsCons = (prosCons: string | string[] | undefined) => {
+    if (!prosCons) return null;
+
+    if (Array.isArray(prosCons)) {
+      return prosCons.map((proCon, index) => <li key={index}>{proCon}</li>);
+    }
+    return <Markdown>{prosCons}</Markdown>;
+  };
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent className="overflow-y-scroll min-w-[50vw]">
@@ -44,11 +53,11 @@ export function DataSheet({ open, onOpenChange, video }: Props) {
 
           <div>
             <Title>Pros</Title>
-            <Markdown>{video?.summary?.pros}</Markdown>
+            {parseProsCons(video?.summary?.pros)}
           </div>
           <div>
             <Title>Cons</Title>
-            <Markdown>{video?.summary?.cons}</Markdown>
+            {parseProsCons(video?.summary?.cons)}
           </div>
 
           <div>
diff --git a/app/modules/dashboard/columns.tsx b/app/modules/dashboard/columns.tsx
index 8da311b..adfbf8f 100644
--- a/app/modules/dashboard/columns.tsx
+++ b/app/modules/dashboard/columns.tsx
@@ -7,8 +7,8 @@ import GoogleMapAnchor from './GoogleMapAnchor';
 
 type Summary = {
   introduction?: Introduction;
-  pros?: string;
-  cons?: string;
+  pros?: string | string[];
+  cons?: string | string[];
   summary?: string;
 };
 
@@ -50,7 +50,6 @@ export const columns: ColumnDef<Video>[] = [
     header: 'Location',
   },
   {
-    accessorKey: 'location',
     header: 'Google Maps',
     cell: ({ row }) => (
       <GoogleMapAnchor