♻️ move table data inside grid component

Author: anaisberg

src/frontend/apps/impress/.env.development

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
 NEXT_PUBLIC_PUBLISH_AS_MIT=false
 NEXT_PUBLIC_SW_DEACTIVATED=true
+NEXT_PUBLIC_GRIST_API_KEY=

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock.tsx

@@ -9,7 +9,6 @@ import { Box, Icon, Text } from '@/components';
 
 import { DocsBlockNoteEditor } from '../../types';
 import { DatabaseSourceSelector } from '../DatabaseSourceSelector';
-import { DatabaseTableDisplay } from '../DatabaseTableDisplay';
 
 import { DatabaseGrid } from './DatabaseBlock/DatabaseGrid';
 
@@ -42,14 +41,11 @@ export const DatabaseBlock = createReactBlockSpec(
         >
           <Box as="div" />
           {block.props.documentId && block.props.tableId ? (
-            <Box>
-              <DatabaseTableDisplay
+            <Box style={{ height: '100%', width: '100%' }}>
+              <DatabaseGrid
                 documentId={block.props.documentId}
                 tableId={block.props.tableId}
               />
-              <Box style={{ height: '100%', width: '100%' }}>
-                <DatabaseGrid />
-              </Box>
             </Box>
           ) : (
             <Box

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/DatabaseGrid.tsx

@@ -3,17 +3,29 @@ import { AgGridReact } from 'ag-grid-react';
 import { useRef, useState } from 'react';
 
 import { Box } from '@/components';
+import { useGristTableData } from '@/features/grist';
 
 import { AddButtonComponent } from './AddColumnButton';
 
-export const DatabaseGrid = () => {
+export const DatabaseGrid = ({
+  documentId,
+  tableId,
+}: {
+  documentId: string;
+  tableId: string;
+}) => {
   const gridRef = useRef(null);
 
-  const [rowData, setRowData] = useState([
+  const { tableData } = useGristTableData({
+    documentId,
+    tableId,
+  });
+
+  const rowData = [
     { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
     { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
     { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
-  ]);
+  ];
 
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<ColDef[]>([

src/frontend/apps/impress/src/features/grist/useGristTableData.ts

@@ -11,7 +11,7 @@ export const useGristTableData = ({
   documentId,
   tableId,
 }: UseGristTableDataArguments) => {
-  const [tableData, setTableData] = useState<unknown[]>([]);
+  const [tableData, setTableData] = useState<Record<string, unknown>>({});
 
   useEffect(() => {
     const fetchData = async () => {
@@ -23,12 +23,12 @@ export const useGristTableData = ({
           await errorCauses(response),
         );
       }
-      return (await response.json()) as Promise<unknown[]>;
+      return (await response.json()) as Promise<unknown>;
     };
 
     fetchData()
       .then((res) => {
-        setTableData(res);
+        setTableData(res as Record<string, unknown>);
       })
       .catch((error) => {
         console.error('Error fetching Grist table data:', error);