rowyio · shamsmosowi · Jun 10, 2023 · May 15, 2023 · May 15, 2023 · May 15, 2023
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "remark-gfm": "^3.0.1",
     "seedrandom": "^3.0.5",
     "stream-browserify": "^3.0.0",
+    "sucrase": "^3.32.0",
     "swr": "^1.3.0",
     "tinymce": "^5",
     "tss-react": "^4.4.4",

diff --git a/src/components/fields/Formula/PreviewTable.tsx b/src/components/fields/Formula/PreviewTable.tsx
@@ -1,73 +1,46 @@
-import { Provider, useAtom } from "jotai";
-
-import { currentUserAtom } from "@src/atoms/projectScope";
-import {
-  tableRowsDbAtom,
-  tableScope,
-  tableSettingsAtom,
-} from "@src/atoms/tableScope";
-
 import TablePage from "@src/pages/Table/TablePage";
-import { TableSchema } from "@src/types/table";
-import { Box, InputLabel } from "@mui/material";
-import TableSourcePreview from "./TableSourcePreview";
+import { Box } from "@mui/material";
 
-const PreviewTable = ({ tableSchema }: { tableSchema: TableSchema }) => {
-  const [currentUser] = useAtom(currentUserAtom, tableScope);
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+const PreviewTable = () => {
   return (
-    <Box>
-      <InputLabel>Preview table</InputLabel>
-      <Provider
-        key={"preview-table"}
-        scope={tableScope}
-        initialValues={[
-          [currentUserAtom, currentUser],
-          [tableSettingsAtom, tableSettings],
-          [tableRowsDbAtom, []],
-        ]}
-      >
-        <TableSourcePreview tableSchema={tableSchema} />
-        <Box
-          sx={{
-            maxHeight: 300,
-            overflow: "auto",
-            marginTop: 1,
-            marginLeft: 0,
+    <Box
+      sx={{
+        maxHeight: 300,
+        overflow: "auto",
+        marginTop: 1,
+        marginLeft: 0,
 
-            // table toolbar
-            "& > div:first-child": {
-              display: "none",
-            },
-            // table grid
-            "& > div:nth-of-type(2)": {
-              height: "unset",
-            },
-            // emtpy state
-            "& .empty-state": {
-              display: "none",
-            },
-            // column actions - add column
-            '& [data-col-id="_rowy_column_actions"]': {
-              display: "none",
-            },
-            // row headers - sort by, column settings
-            '& [data-row-id="_rowy_header"] > button': {
-              display: "none",
-            },
-            // row headers - drag handler
-            '& [data-row-id="_rowy_header"] > .column-drag-handle': {
-              display: "none !important",
-            },
-            // row headers - resize handler
-            '& [data-row-id="_rowy_header"] >:last-child': {
-              display: "none !important",
-            },
-          }}
-        >
-          <TablePage disableModals={true} disableSideDrawer={true} />
-        </Box>
-      </Provider>
+        // table toolbar
+        "& > div:first-child": {
+          display: "none",
+        },
+        // table grid
+        "& > div:nth-of-type(2)": {
+          height: "unset",
+        },
+        // emtpy state
+        "& .empty-state": {
+          display: "none",
+        },
+        // column actions - add column
+        '& [data-col-id="_rowy_column_actions"]': {
+          display: "none",
+        },
+        // row headers - sort by, column settings
+        '& [data-row-id="_rowy_header"] > button': {
+          display: "none",
+        },
+        // row headers - drag handler
+        '& [data-row-id="_rowy_header"] > .column-drag-handle': {
+          display: "none !important",
+        },
+        // row headers - resize handler
+        '& [data-row-id="_rowy_header"] >:last-child': {
+          display: "none !important",
+        },
+      }}
+    >
+      <TablePage disableModals={true} disableSideDrawer={true} />
     </Box>
   );
 };

diff --git a/src/components/fields/Formula/Settings.tsx b/src/components/fields/Formula/Settings.tsx
@@ -1,14 +1,17 @@
 import { lazy, Suspense, useMemo } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { useAtom } from "jotai";
+import { Provider, useAtom } from "jotai";
 import MultiSelect from "@rowy/multiselect";
 
-import { Grid, InputLabel, Stack, FormHelperText } from "@mui/material";
+import { Grid, InputLabel, Stack, FormHelperText, Box } from "@mui/material";
 
 import {
   tableColumnsOrderedAtom,
+  tableRowsDbAtom,
   tableSchemaAtom,
   tableScope,
+  tableSettingsAtom,
+  updateFieldAtom,
 } from "@src/atoms/tableScope";
 
 import FieldSkeleton from "@src/components/SideDrawer/FieldSkeleton";
@@ -17,13 +20,20 @@ import FieldsDropdown from "@src/components/ColumnModals/FieldsDropdown";
 import { DEFAULT_COL_WIDTH, DEFAULT_ROW_HEIGHT } from "@src/components/Table";
 import { ColumnConfig } from "@src/types/table";
 
-import { defaultFn, listenerFieldTypes, outputFieldTypes } from "./util";
+import {
+  defaultFn,
+  listenerFieldTypes,
+  outputFieldTypes,
+  serializeRef,
+} from "./util";
 import PreviewTable from "./PreviewTable";
 import { getFieldProp } from "..";
 
 import formulaDefs from "./formula.d.ts?raw";
 import { WIKI_LINKS } from "@src/constants/externalLinks";
 import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
+import { currentUserAtom } from "@src/atoms/projectScope";
+import TableSourcePreview from "./TableSourcePreview";
 
 const CodeEditor = lazy(
   () =>
@@ -43,6 +53,8 @@ export default function Settings({
   onBlur,
   errors,
 }: ISettingsProps) {
+  const [currentUser] = useAtom(currentUserAtom, tableScope);
+  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
   const returnType = getFieldProp("dataType", config.renderFieldType) ?? "any";
@@ -58,6 +70,7 @@ export default function Settings({
             ...columns[key],
             fixed: false,
             width: DEFAULT_COL_WIDTH,
+            editable: true,
           };
         }
         if (columns[key].fieldName === fieldName) {
@@ -156,7 +169,21 @@ export default function Settings({
           />
         </Suspense>
       </div>
-      <PreviewTable tableSchema={previewTableSchema} />
+      <Box>
+        <InputLabel>Preview table</InputLabel>
+        <Provider
+          key={"preview-table"}
+          scope={tableScope}
+          initialValues={[
+            [currentUserAtom, currentUser],
+            [tableSchemaAtom, previewTableSchema],
+            [tableSettingsAtom, tableSettings],
+          ]}
+        >
+          <TableSourcePreview formulaFn={formulaFn} />
+          <PreviewTable />
+        </Provider>
+      </Box>
     </Stack>
   );
 }

diff --git a/src/components/fields/Formula/TableSourcePreview.ts b/src/components/fields/Formula/TableSourcePreview.ts
@@ -1,81 +1,94 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useAtom, useSetAtom } from "jotai";
-import { useAtomCallback } from "jotai/utils";
-import { cloneDeep, findIndex, sortBy } from "lodash-es";
+import { cloneDeep, findIndex, isEqual, sortBy } from "lodash-es";
 
 import {
   _deleteRowDbAtom,
   _updateRowDbAtom,
   tableNextPageAtom,
+  tableRowsAtom,
   tableRowsDbAtom,
-  tableSchemaAtom,
+  tableRowsLocalAtom,
   tableScope,
   tableSettingsAtom,
 } from "@src/atoms/tableScope";
 
-import { TableRow, TableSchema } from "@src/types/table";
-import { updateRowData } from "@src/utils/table";
+import { TableRow } from "@src/types/table";
+import { generateId, updateRowData } from "@src/utils/table";
 import { serializeRef } from "./util";
 
-const TableSourcePreview = ({ tableSchema }: { tableSchema: TableSchema }) => {
-  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
-  const setTableSchemaAtom = useSetAtom(tableSchemaAtom, tableScope);
-  const setRows = useSetAtom(tableRowsDbAtom, tableScope);
-  useEffect(() => {
-    setRows(
-      ["preview-doc-1", "preview-doc-2", "preview-doc-3"].map((docId) => ({
-        _rowy_ref: serializeRef(`${tableSettings.collection}/${docId}`),
-      }))
-    );
-  }, [setRows, tableSettings.collection]);
+const TableSourcePreview = ({ formulaFn }: { formulaFn: string }) => {
+  const prevFn = useRef(formulaFn);
+  const isInitialMount = useRef(true);
 
-  useEffect(() => {
-    setTableSchemaAtom(() => ({
-      ...tableSchema,
-      _rowy_ref: "preview",
-    }));
-  }, [tableSchema, setTableSchemaAtom]);
+  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+  const [rows, setRows] = useAtom(tableRowsDbAtom, tableScope);
+  const setUpdateRowDb = useSetAtom(_updateRowDbAtom, tableScope);
+  const setDeleteRowDb = useSetAtom(_deleteRowDbAtom, tableScope);
+  const setNextPageAtom = useSetAtom(tableNextPageAtom, tableScope);
 
-  const readRowsDb = useAtomCallback(
-    useCallback((get) => get(tableRowsDbAtom) || [], []),
-    tableScope
+  const generateRows = useCallback(
+    (rows: TableRow[]) =>
+      rows.map((row) => ({
+        ...row,
+        _rowy_ref: serializeRef(`${tableSettings.collection}/${generateId()}`),
+      })),
+    [tableSettings.collection]
   );
 
-  const setUpdateRowDb = useSetAtom(_updateRowDbAtom, tableScope);
-  setUpdateRowDb(() => async (path: string, update: Partial<TableRow>) => {
-    const rows = await readRowsDb();
-    const index = findIndex(rows, ["_rowy_ref.path", path]);
-    if (index === -1) {
-      setRows(
-        sortBy(
-          [
-            ...rows,
-            { ...update, _rowy_ref: { id: path.split("/").pop()!, path } },
-          ],
-          ["_rowy_ref.id"]
-        )
-      );
-    } else {
-      const updatedRows = [...rows];
-      updatedRows[index] = cloneDeep(rows[index]);
-      updatedRows[index] = updateRowData(updatedRows[index], update);
-      setRows(updatedRows);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      const emptyRow = {} as TableRow;
+      setRows(generateRows([emptyRow, emptyRow, emptyRow]));
     }
-    return Promise.resolve();
-  });
+  }, [setRows, generateRows, tableSettings.collection]);
 
-  const setDeleteRowDb = useSetAtom(_deleteRowDbAtom, tableScope);
-  setDeleteRowDb(() => async (path: string) => {
-    const rows = await readRowsDb();
-    const index = findIndex(rows, ["_rowy_ref.path", path]);
-    if (index > -1) {
-      setRows(rows.filter((_, idx) => idx !== index));
+  useEffect(() => {
+    if (!isEqual(prevFn.current, formulaFn)) {
+      prevFn.current = formulaFn;
+      setRows(rows.map((row) => ({ ...row, __mock_field__: Math.random() })));
     }
-    return Promise.resolve();
-  });
+  }, [rows, setRows, generateRows, formulaFn]);
 
-  const setNextPageAtom = useSetAtom(tableNextPageAtom, tableScope);
-  setNextPageAtom({ loading: false, available: false });
+  useEffect(() => {
+    setUpdateRowDb(() => (path: string, update: Partial<TableRow>) => {
+      const index = findIndex(rows, ["_rowy_ref.path", path]);
+      if (index === -1) {
+        setRows(
+          sortBy(
+            [
+              ...rows,
+              { ...update, _rowy_ref: { id: path.split("/").pop()!, path } },
+            ],
+            ["_rowy_ref.id"]
+          )
+        );
+      } else {
+        const updatedRows = [...rows];
+        updatedRows[index] = cloneDeep(rows[index]);
+        updatedRows[index] = updateRowData(updatedRows[index], update);
+        setRows(updatedRows);
+      }
+      return Promise.resolve();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setRows, setUpdateRowDb]);
+
+  useEffect(() => {
+    setDeleteRowDb(() => (path: string) => {
+      const index = findIndex(rows, ["_rowy_ref.path", path]);
+      if (index > -1) {
+        setRows(rows.filter((_, idx) => idx !== index));
+      }
+      return Promise.resolve();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setRows, setDeleteRowDb]);
+
+  useEffect(() => {
+    setNextPageAtom({ loading: false, available: false });
+  }, [setNextPageAtom]);
 
   return null;
 };

diff --git a/src/components/fields/Formula/useFormula.tsx b/src/components/fields/Formula/useFormula.tsx
@@ -85,6 +85,7 @@ export const useFormula = ({
   }, [useDeepCompareMemoize(listeners), formulaFn]);
 
   const updateField = useSetAtom(updateFieldAtom, tableScope);
+
   useEffect(() => {
     updateField({
       path: row._rowy_ref.path,

diff --git a/src/components/fields/Formula/util.tsx b/src/components/fields/Formula/util.tsx
@@ -24,7 +24,7 @@ import JsonDisplayCell from "@src/components/fields/Json/DisplayCell";
 import CodeDisplayCell from "@src/components/fields/Code/DisplayCell";
 import MarkdownDisplayCell from "@src/components/fields/Markdown/DisplayCell";
 import CreatedByDisplayCell from "@src/components/fields/CreatedBy/DisplayCell";
-import { TableRowRef } from "@src/types/table";
+import { TableRowRef, TableSettings } from "@src/types/table";
 import { DocumentData, DocumentReference } from "firebase/firestore";
 
 export function useDeepCompareMemoize<T>(value: T) {