🚧(wip) csv preview fetches data properly

with the help of @manuhabitela

Author: vviers

src/frontend/apps/drive/src/features/ui/preview/csv-preview/CsvPreview.tsx

@@ -1,23 +1,47 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 interface PreviewCsvProps {
     title?: string;
     src?: string;
   }
 
   export const PreviewCsv = ({ src, title }: PreviewCsvProps) => {
+
+    const [csvContent, setCsvContent] = useState<string | null>(null);
+
+    // Get grist-static csv script
     useEffect(() => {
       if (src) {
+        // Load the grist csv viewer script dynamically
         const script = document.createElement('script');
         script.src = 'https://grist-static.com/csv-viewer.js';
+        script.async = true;
         document.body.appendChild(script);
+        
+        // fetch CSV content
+        fetch(src, { credentials: 'include' })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`Failed to fetch CSV content: ${response.statusText}`);
+          }
+          return response.text();
+        })
+        .then(text => {
+          console.log("Fetched CSV content:", text);
+          setCsvContent(text);
+        })
+        .catch(err => {
+          console.error(err); // Optional: fallback or error handling
+        });
       }
     }, [src]);
+
     return (
         <div className='csv-preview'>
         <div className='csv-preview__app'>
-            <csv-viewer className='csv-preview' initial-data="/csvtest.csv" single-page="true" loader="true">
-            </csv-viewer>
+          {!!csvContent &&
+            <csv-viewer className='csv-preview' initial-content={csvContent} single-page="true" loader="true"></csv-viewer>
+          }
         </div>
     </div>
     );

src/frontend/apps/drive/src/features/ui/preview/grist-preview/PreviewGrist.tsx

@@ -14,8 +14,8 @@ interface PreviewGristProps {
         // Assuming bootstrapGrist is globally available
           if (window) {
             window.bootstrapGrist?.({
-                initialFile: "/gristtest.grist", // Todo: use src instead (gots to figure out that CORS issue with NGINX...)
-                name: title || "Grist document",
+              // Todo: need to make a PR in grist-static to fetch with credentials
+                initialFile: "/gristtest.grist",
                 elementId: 'grist-app',
                 singlePage: false,
           });