From 1aab32962010447d57d2a3e809decfbb42f90a7a Mon Sep 17 00:00:00 2001
From: andresgutgon <andresgutgon@gmail.com>
Date: Sat, 7 Sep 2024 17:14:56 +0200
Subject: [PATCH] feat: wip

---
 .../_components/PreviewDatasetModal/index.tsx   | 17 ++++++++++++++---
 apps/web/src/stores/datasetPreviews.ts          |  2 +-
 packages/core/src/lib/readCsv.ts                |  2 +-
 packages/core/src/services/datasets/preview.ts  | 12 +++++++++++-
 packages/web-ui/src/ds/atoms/Icons/index.tsx    |  3 ++-
 .../src/ds/molecules/ErrorComponent/index.tsx   |  2 +-
 6 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx b/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx
index 1770d92d9..2b0f2b005 100644
--- a/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx
+++ b/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx
@@ -3,7 +3,9 @@ import { Dataset } from '@latitude-data/core/browser'
 import '@latitude-data/web-ui'
 
 import {
+  Button,
   Modal,
+  ModalTrigger,
   ReactStateDispatch,
   Table,
   TableBody,
@@ -23,7 +25,7 @@ function PreviewModal({
   setPreview: ReactStateDispatch<Dataset | null>
 }) {
   const { data, isLoading } = useDatasetPreview({ dataset })
-  const rows = data?.data ?? []
+  const rows = data?.rows ?? []
   return (
     <Modal
       size='large'
@@ -31,8 +33,17 @@ function PreviewModal({
       title={`${dataset.name} preview`}
       description='First 100 rows of the dataset'
       onOpenChange={(open: boolean) => !open && setPreview(null)}
+      footer={
+        <ModalTrigger>
+          <Button fancy variant='outline'>
+            Go back
+          </Button>
+        </ModalTrigger>
+      }
     >
-      {isLoading ? (<div>....</div>) : (
+      {isLoading ? (
+        <div>....</div>
+      ) : (
         <Table>
           <TableHeader>
             <TableRow verticalPadding>
@@ -47,7 +58,7 @@ function PreviewModal({
             {rows.map((row, rowIndex) => {
               return (
                 <TableRow key={rowIndex} verticalPadding>
-                  {row.record.map((cell, cellIndex) => (
+                  {row.map((cell, cellIndex) => (
                     <TableCell key={cellIndex}>{cell}</TableCell>
                   ))}
                 </TableRow>
diff --git a/apps/web/src/stores/datasetPreviews.ts b/apps/web/src/stores/datasetPreviews.ts
index e324ca5c4..2cd0e6cc2 100644
--- a/apps/web/src/stores/datasetPreviews.ts
+++ b/apps/web/src/stores/datasetPreviews.ts
@@ -23,7 +23,7 @@ export default function useDatasetPreview(
         variant: 'destructive',
       })
 
-      return { headers: [], data: [], rowCount: 0 }
+      return { headers: [], rows: [], rowCount: 0 }
     }
 
     return data
diff --git a/packages/core/src/lib/readCsv.ts b/packages/core/src/lib/readCsv.ts
index 190a0ccb3..77d3adcbe 100644
--- a/packages/core/src/lib/readCsv.ts
+++ b/packages/core/src/lib/readCsv.ts
@@ -20,8 +20,8 @@ type ParseResult = {
 }
 export type CsvParsedData = {
   headers: string[]
+  rows: string[][]
   rowCount: number
-  data: ParseResult[]
 }
 export async function syncReadCsv(
   file: File | string,
diff --git a/packages/core/src/services/datasets/preview.ts b/packages/core/src/services/datasets/preview.ts
index e8d89d34b..fdcdb920a 100644
--- a/packages/core/src/services/datasets/preview.ts
+++ b/packages/core/src/services/datasets/preview.ts
@@ -1,4 +1,5 @@
 import { Dataset } from '../../browser'
+import { Result } from '../../lib'
 import { DiskWrapper } from '../../lib/disk'
 import { syncReadCsv } from '../../lib/readCsv'
 
@@ -17,5 +18,14 @@ export async function previewDataset({
   const diskFile = disk.file(dataset.fileKey)
   const bytes = await diskFile.getBytes()
   const file = new TextDecoder().decode(bytes)
-  return syncReadCsv(file, { limit })
+  const readResult = await syncReadCsv(file, { limit })
+  if (readResult.error) readResult
+
+  const csv = readResult.value!
+  const rows = csv.data.map((row) => Object.values(row.record))
+  return Result.ok({
+    rowCount: csv.rowCount,
+    headers: csv.headers,
+    rows,
+  })
 }
diff --git a/packages/web-ui/src/ds/atoms/Icons/index.tsx b/packages/web-ui/src/ds/atoms/Icons/index.tsx
index f1e07f9aa..8439b91b0 100644
--- a/packages/web-ui/src/ds/atoms/Icons/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Icons/index.tsx
@@ -72,7 +72,7 @@ export type IconProps = {
   className?: string
 }
 
-type Size = 'normal' | 'large' | 'xlarge'
+type Size = 'normal' | 'large' | 'xlarge' | 'xxxlarge'
 
 export function Icon({
   name,
@@ -89,6 +89,7 @@ export function Icon({
         'w-4 h-4': size === 'normal',
         'w-6 h-6': size === 'large',
         'w-8 h-8': size === 'xlarge',
+        'w-14 h-14': size === 'xxxlarge',
         'animate-spin': spin,
       })}
     />
diff --git a/packages/web-ui/src/ds/molecules/ErrorComponent/index.tsx b/packages/web-ui/src/ds/molecules/ErrorComponent/index.tsx
index 0b2bb7a7b..81c76f8db 100644
--- a/packages/web-ui/src/ds/molecules/ErrorComponent/index.tsx
+++ b/packages/web-ui/src/ds/molecules/ErrorComponent/index.tsx
@@ -16,7 +16,7 @@ export function ErrorComponent({
           'text-destructive': type === 'red',
         })}
       >
-        <Icon name='logoMonochrome' className='w-14 h-14' />
+        <Icon name='logoMonochrome' size='xxxlarge'/>
         <Text.H5 align='center' color='foregroundMuted'>
           {message}
         </Text.H5>