From 8510bd8671b55a8d3c293651da8ec8a7ec853a1e Mon Sep 17 00:00:00 2001
From: andresgutgon <andresgutgon@gmail.com>
Date: Fri, 6 Sep 2024 18:16:31 +0200
Subject: [PATCH] feat: wip

---
 .../_components/PreviewDatasetModal/index.tsx | 42 +++++++++++++++++--
 apps/web/src/stores/datasetPreviews.ts        |  6 +--
 packages/core/src/lib/readCsv.ts              |  5 +++
 3 files changed, 47 insertions(+), 6 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 086aff6b3..1770d92d9 100644
--- a/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx
+++ b/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx
@@ -1,5 +1,18 @@
 import { Dataset } from '@latitude-data/core/browser'
-import { Modal, ReactStateDispatch } from '@latitude-data/web-ui'
+
+import '@latitude-data/web-ui'
+
+import {
+  Modal,
+  ReactStateDispatch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Text,
+} from '@latitude-data/web-ui'
 import useDatasetPreview from '$/stores/datasetPreviews'
 
 function PreviewModal({
@@ -10,7 +23,7 @@ function PreviewModal({
   setPreview: ReactStateDispatch<Dataset | null>
 }) {
   const { data, isLoading } = useDatasetPreview({ dataset })
-  console.log('Preview', data, isLoading)
+  const rows = data?.data ?? []
   return (
     <Modal
       size='large'
@@ -19,7 +32,30 @@ function PreviewModal({
       description='First 100 rows of the dataset'
       onOpenChange={(open: boolean) => !open && setPreview(null)}
     >
-      Hola {isLoading}
+      {isLoading ? (<div>....</div>) : (
+        <Table>
+          <TableHeader>
+            <TableRow verticalPadding>
+              {data.headers.map((header, i) => (
+                <TableHead key={`${header}-${i}`}>
+                  <Text.H4>{header}</Text.H4>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row, rowIndex) => {
+              return (
+                <TableRow key={rowIndex} verticalPadding>
+                  {row.record.map((cell, cellIndex) => (
+                    <TableCell key={cellIndex}>{cell}</TableCell>
+                  ))}
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      )}
     </Modal>
   )
 }
diff --git a/apps/web/src/stores/datasetPreviews.ts b/apps/web/src/stores/datasetPreviews.ts
index 0b44e24fb..e324ca5c4 100644
--- a/apps/web/src/stores/datasetPreviews.ts
+++ b/apps/web/src/stores/datasetPreviews.ts
@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 
 import type { Dataset } from '@latitude-data/core/browser'
+import { CsvParsedData } from '@latitude-data/core/lib/readCsv'
 import { useToast } from '@latitude-data/web-ui'
 import { previewDatasetAction } from '$/actions/datasets/preview'
 import useCurrentWorkspace from '$/stores/currentWorkspace'
@@ -15,7 +16,6 @@ export default function useDatasetPreview(
   const { toast } = useToast()
   const fetcher = useCallback(async () => {
     const [data, error] = await previewDatasetAction({ id: dataset.id })
-    console.log('FETCHING')
     if (error) {
       toast({
         title: 'Error',
@@ -23,7 +23,7 @@ export default function useDatasetPreview(
         variant: 'destructive',
       })
 
-      return []
+      return { headers: [], data: [], rowCount: 0 }
     }
 
     return data
@@ -36,7 +36,7 @@ export default function useDatasetPreview(
   )
 
   return {
-    data,
+    data: data as CsvParsedData,
     isLoading: rest.isLoading,
   }
 }
diff --git a/packages/core/src/lib/readCsv.ts b/packages/core/src/lib/readCsv.ts
index d7045dbdc..190a0ccb3 100644
--- a/packages/core/src/lib/readCsv.ts
+++ b/packages/core/src/lib/readCsv.ts
@@ -18,6 +18,11 @@ type ParseResult = {
   record: Record<string, string>
   info: { columns: { name: string }[] }
 }
+export type CsvParsedData = {
+  headers: string[]
+  rowCount: number
+  data: ParseResult[]
+}
 export async function syncReadCsv(
   file: File | string,
   { delimiter = ';', limit = -1 }: ParseCsvOptions = {},