✨ useGristTable hook

Author: Clemsazert

src/frontend/apps/impress/.env

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_SW_DEACTIVATED=
 NEXT_PUBLIC_PUBLISH_AS_MIT=true
+NEXT_PUBLIC_GRIST_API_KEY=

src/frontend/apps/impress/src/api/config.ts

@@ -20,3 +20,5 @@ export const backendUrl = () =>
  */
 export const baseApiUrl = (apiVersion: string = '1.0') =>
   `${backendUrl()}/api/v${apiVersion}/`;
+
+export const gristApiUrl = () => 'http://localhost:8484/api/';

src/frontend/apps/impress/src/api/gristApi.ts

@@ -0,0 +1,16 @@
+import { gristApiUrl } from './config';
+
+export const gristFetchApi = async (input: string, init?: RequestInit) => {
+  const apiUrl = `${gristApiUrl()}${input}`;
+  const bearerToken = `Bearer ${process.env.NEXT_PUBLIC_GRIST_API_KEY}`;
+
+  const headers = {
+    'Content-Type': 'application/json',
+    Authorization: bearerToken,
+  };
+
+  return await fetch(apiUrl, {
+    ...init,
+    headers,
+  });
+};

src/frontend/apps/impress/src/api/index.ts

@@ -1,6 +1,7 @@
 export * from './APIError';
 export * from './config';
 export * from './fetchApi';
+export * from './gristApi';
 export * from './helpers';
 export * from './types';
 export * from './utils';

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

@@ -5,6 +5,7 @@ import { TFunction } from 'i18next';
 import React, { useEffect } from 'react';
 
 import { Box, Icon } from '@/components';
+import { useGristTable } from '@/features/grist';
 
 import { DocsBlockNoteEditor } from '../../types';
 
@@ -14,22 +15,34 @@ export const DatabaseBlock = createReactBlockSpec(
     propSchema: {
       textAlignment: defaultProps.textAlignment,
       backgroundColor: defaultProps.backgroundColor,
+      documentId: {
+        type: 'string',
+        default: '',
+      },
+      tableId: {
+        type: 'string',
+        default: '',
+      },
     },
     content: 'inline',
   },
   {
-    render: ({ block, editor }) => {
-      // Temporary: sets a orange background color to a database block when added by
-      // the user, while keeping the colors menu on the drag handler usable for
-      // this custom block.
+    render: ({ block, editor, contentRef }) => {
+      const { tableData } = useGristTable({
+        tableId: block.props.tableId,
+        documentId: block.props.documentId,
+      });
+
       useEffect(() => {
         if (
           !block.content.length &&
           block.props.backgroundColor === 'default'
         ) {
           editor.updateBlock(block, { props: { backgroundColor: 'orange' } });
+        } else {
+          editor.updateBlock(block, { content: JSON.stringify(tableData) });
         }
-      }, [block, editor]);
+      }, [block, editor, tableData]);
 
       return (
         <Box
@@ -40,7 +53,7 @@ export const DatabaseBlock = createReactBlockSpec(
             flexDirection: 'row',
           }}
         >
-          <Box as="p">🏗️ Database block is in development</Box>{' '}
+          <Box as="p" className="inline-content" ref={contentRef} />
         </Box>
       );
     },

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

@@ -0,0 +1 @@
+export * from './useGristTable';

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

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+
+import { APIError, errorCauses, gristFetchApi } from '@/api';
+
+export type UseGristTableArguments = { documentId?: string; tableId?: string };
+
+export const useGristTable = ({
+  documentId,
+  tableId,
+}: UseGristTableArguments) => {
+  const [tableData, setTableData] = useState<unknown[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const url = `docs/${documentId}/tables/${tableId}/table`;
+      const response = await gristFetchApi(url);
+      if (!response.ok) {
+        throw new APIError(
+          'Failed to request ai transform',
+          await errorCauses(response),
+        );
+      }
+      return (await response.json()) as Promise<unknown[]>;
+    };
+
+    const createDocument = async (workspaceId: string) => {
+      const url = `workspaces/${workspaceId}/docs`;
+      const response = await gristFetchApi(url, {
+        method: 'POST',
+        body: JSON.stringify({ name: 'New Doc' }),
+      });
+      if (!response.ok) {
+        throw new APIError(
+          'Failed to create Grist document',
+          await errorCauses(response),
+        );
+      }
+      return (await response.json()) as Promise<string>;
+    };
+
+    const createTable = async (documentId: string) => {
+      const url = `docs/${documentId}/tables`;
+      const response = await gristFetchApi(url, {
+        method: 'POST',
+        body: JSON.stringify({
+          tables: [{ id: 'New Table', columns: [] }],
+        }),
+      });
+      if (!response.ok) {
+        throw new APIError(
+          'Failed to create Grist table',
+          await errorCauses(response),
+        );
+      }
+      return (await response.json()) as Promise<string>;
+    };
+
+    if (!documentId) {
+      const DEFAULT_WORKSPACE_ID = '2';
+      createDocument(DEFAULT_WORKSPACE_ID)
+        .then((newDocumentId) => {
+          createTable(newDocumentId)
+            .then((newTableId) => {
+              console.log(
+                `Created new Grist document with ID: ${newDocumentId} and table ID: ${newTableId}`,
+              );
+            })
+            .catch((error) => {
+              console.error('Error creating Grist table:', error);
+            });
+        })
+        .catch((error) => {
+          console.error('Error creating Grist document:', error);
+        });
+    }
+
+    if (!tableId) {
+      createTable(documentId ?? '')
+        .then((newTableId) => {
+          console.log(`Created new Grist table with ID: ${newTableId}`);
+        })
+        .catch((error) => {
+          console.error('Error creating Grist table:', error);
+        });
+    }
+
+    fetchData()
+      .then((res) => {
+        setTableData(res);
+      })
+      .catch((error) => {
+        console.error('Error fetching Grist table data:', error);
+      });
+  }, [documentId, tableId]);
+  return {
+    tableData,
+  };
+};