✨ create row in grist

Author: anaisberg

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

@@ -1,16 +1,24 @@
 import { Button } from '@openfun/cunningham-react';
 import { Dispatch, SetStateAction } from 'react';
 
+import { useGristCrudRecords } from '@/features/grist/useGristCrudRecords';
+
 import { DatabaseRow } from './types';
 import { createNewRow } from './utils';
 
 export const AddRowButton = ({
   columns,
   setRowData,
+  documentId,
+  tableId,
 }: {
+  documentId: string;
+  tableId: string;
   columns: string[];
   setRowData: Dispatch<SetStateAction<DatabaseRow[] | undefined>>;
 }) => {
+  const { createRecords } = useGristCrudRecords();
+
   const addRow = () => {
     const newRow = createNewRow({ columnNames: columns });
     setRowData((prev: DatabaseRow[] | undefined) => {
@@ -22,6 +30,8 @@ export const AddRowButton = ({
       updatedRows.splice(updatedRows.length - 1, 0, newRow);
       return updatedRows;
     });
+
+    void createRecords(documentId, tableId, [{ fields: newRow }]);
   };
 
   const color = '#817E77';

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

@@ -65,7 +65,11 @@ export const DatabaseGrid = ({
         newRowColSpan(params, columnNames.length + 1),
       cellRendererSelector: (
         params: ICellRendererParams<Record<string, string>>,
-      ) => addRowCellRenderer(params, columnNames, setRowData),
+      ) =>
+        addRowCellRenderer(params, columnNames, setRowData, {
+          documentId,
+          tableId,
+        }),
     }));
 
     setColDefs(columns);
@@ -95,7 +99,11 @@ export const DatabaseGrid = ({
         newRowColSpan(params, columnNames.length + 1),
       cellRendererSelector: (
         params: ICellRendererParams<Record<string, string>>,
-      ) => addRowCellRenderer(params, columnNames, setRowData),
+      ) =>
+        addRowCellRenderer(params, columnNames, setRowData, {
+          documentId,
+          tableId,
+        }),
     };
 
     setColDefs((prev) => {

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

@@ -44,11 +44,18 @@ export const addRowCellRenderer = (
   params: ICellRendererParams<Record<string, string>>,
   columns: string[] | undefined,
   setRowData: Dispatch<SetStateAction<DatabaseRow[] | undefined>>,
+  {
+    documentId,
+    tableId,
+  }: {
+    documentId: string;
+    tableId: string;
+  },
 ) => {
   if (params.data) {
     const addRowButton = {
       component: AddRowButton,
-      params: { columns, setRowData },
+      params: { columns, setRowData, documentId, tableId },
     };
     if (Object.values(params.data)[0] === ADD_NEW_ROW) {
       return addRowButton;

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

@@ -13,7 +13,7 @@ export const useGristCrudRecords = () => {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(records),
+        body: JSON.stringify({ records }),
       });
 
       if (!response.ok) {