chunk csv file before preview (#11886)

closes https://github.com/twentyhq/twenty/issues/10971

packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx

@@ -1,7 +1,11 @@
+import { fetchCsvPreview } from '@/activities/files/utils/fetchCsvPreview';
 import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';
 import '@cyntler/react-doc-viewer/dist/index.css';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Trans } from '@lingui/react/macro';
+import { useEffect, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';
 
 const StyledDocumentViewerContainer = styled.div`
@@ -12,13 +16,6 @@ const StyledDocumentViewerContainer = styled.div`
   width: 100%;
   background: ${({ theme }) => theme.background.secondary};
 
-  .react-doc-viewer {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    background: none;
-  }
-
   #react-doc-viewer #header-bar {
     display: none;
   }
@@ -26,6 +23,17 @@ const StyledDocumentViewerContainer = styled.div`
   #react-doc-viewer #pdf-controls {
     display: none !important;
   }
+
+  #react-doc-viewer,
+  #proxy-renderer,
+  #msdoc-renderer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    background: none;
+  }
 `;
 
 type DocumentViewerProps = {
@@ -87,6 +95,7 @@ export const DocumentViewer = ({
   documentUrl,
 }: DocumentViewerProps) => {
   const theme = useTheme();
+  const [csvPreview, setCsvPreview] = useState<string | undefined>(undefined);
 
   const { extension } = getFileNameAndExtension(documentName);
   const fileExtension = extension?.toLowerCase().replace('.', '') ?? '';
@@ -94,12 +103,32 @@ export const DocumentViewer = ({
     ? MIME_TYPE_MAPPING[fileExtension]
     : undefined;
 
+  useEffect(() => {
+    if (fileExtension === 'csv') {
+      fetchCsvPreview(documentUrl).then((content) => {
+        setCsvPreview(content);
+      });
+    }
+  }, [documentUrl, fileExtension]);
+
+  if (fileExtension === 'csv' && !isDefined(csvPreview))
+    return (
+      <StyledDocumentViewerContainer>
+        <Trans>Loading csv ... </Trans>
+      </StyledDocumentViewerContainer>
+    );
+
   return (
     <StyledDocumentViewerContainer>
       <DocViewer
         documents={[
           {
-            uri: documentUrl,
+            uri:
+              fileExtension === 'csv' && isDefined(csvPreview)
+                ? window.URL.createObjectURL(
+                    new Blob([csvPreview], { type: 'text/csv' }),
+                  )
+                : documentUrl,
             fileName: documentName,
             fileType: mimeType,
           },

packages/twenty-front/src/modules/activities/files/utils/fetchCsvPreview.ts

@@ -0,0 +1,22 @@
+import Papa from 'papaparse';
+
+const DEFAULT_PREVIEW_ROWS = 50;
+
+export const fetchCsvPreview = async (url: string): Promise<string> => {
+  const response = await fetch(url);
+  const text = await response.text();
+
+  const result = Papa.parse(text, {
+    preview: DEFAULT_PREVIEW_ROWS,
+    skipEmptyLines: true,
+    header: true,
+  });
+
+  const data = result.data as Record<string, string>[];
+
+  const csvContent = Papa.unparse(data, {
+    header: true,
+  });
+
+  return csvContent;
+};