feat(preview-table): add serialized ref including parent recursively

src/components/fields/Formula/PreviewTable.tsx

@@ -23,14 +23,7 @@ const PreviewTable = ({ tableSchema }: { tableSchema: TableSchema }) => {
         scope={tableScope}
         initialValues={[
           [currentUserAtom, currentUser],
-          [
-            tableSettingsAtom,
-            {
-              ...tableSettings,
-              id: "preview-table",
-              collection: "preview-collection",
-            },
-          ],
+          [tableSettingsAtom, tableSettings],
           [tableRowsDbAtom, []],
         ]}
       >

src/components/fields/Formula/TableSourcePreview.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { useSetAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { useAtomCallback } from "jotai/utils";
 import { cloneDeep, findIndex, sortBy } from "lodash-es";
 
@@ -10,39 +10,24 @@ import {
   tableRowsDbAtom,
   tableSchemaAtom,
   tableScope,
+  tableSettingsAtom,
 } from "@src/atoms/tableScope";
 
 import { TableRow, TableSchema } from "@src/types/table";
 import { updateRowData } from "@src/utils/table";
-
-const initialRows = [
-  {
-    _rowy_ref: {
-      id: "zzzzzzzzzzzzzzzzzzzw",
-      path: "preview-collection/zzzzzzzzzzzzzzzzzzzw",
-    },
-  },
-  {
-    _rowy_ref: {
-      id: "zzzzzzzzzzzzzzzzzzzx",
-      path: "preview-collection/zzzzzzzzzzzzzzzzzzzx",
-    },
-  },
-  {
-    _rowy_ref: {
-      id: "zzzzzzzzzzzzzzzzzzzy",
-      path: "preview-collection/zzzzzzzzzzzzzzzzzzzy",
-    },
-  },
-];
+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(initialRows);
-  }, [setRows]);
+    setRows(
+      ["preview-doc-1", "preview-doc-2", "preview-doc-3"].map((docId) => ({
+        _rowy_ref: serializeRef(`${tableSettings.collection}/${docId}`),
+      }))
+    );
+  }, [setRows, tableSettings.collection]);
 
   useEffect(() => {
     setTableSchemaAtom(() => ({
@@ -52,7 +37,7 @@ const TableSourcePreview = ({ tableSchema }: { tableSchema: TableSchema }) => {
   }, [tableSchema, setTableSchemaAtom]);
 
   const readRowsDb = useAtomCallback(
-    useCallback((get) => get(tableRowsDbAtom) || initialRows, []),
+    useCallback((get) => get(tableRowsDbAtom) || [], []),
     tableScope
   );
 

src/components/fields/Formula/formula.d.ts

@@ -1,10 +1,9 @@
-type RowRef = Pick<FirebaseFirestore.DocumentReference, "id", "path">;
+type RowRef<T> = { id: string; path: string; parent: T };
+interface Ref extends RowRef<Ref> {}
 
 type FormulaContext = {
   row: Row;
-  ref: RowRef;
-  // storage: firebasestorage.Storage;
-  // db: FirebaseFirestore.Firestore;
+  ref: Ref;
 };
 
 type Formula = (context: FormulaContext) => "PLACEHOLDER_OUTPUT_TYPE";

src/components/fields/Formula/useFormula.tsx

@@ -5,7 +5,11 @@ import { useAtom } from "jotai";
 import { TableRow, TableRowRef } from "@src/types/table";
 import { tableColumnsOrderedAtom, tableScope } from "@src/atoms/tableScope";
 
-import { listenerFieldTypes, useDeepCompareMemoize } from "./util";
+import {
+  listenerFieldTypes,
+  serializeRef,
+  useDeepCompareMemoize,
+} from "./util";
 
 export const useFormula = ({
   row,
@@ -60,11 +64,13 @@ export const useFormula = ({
       setLoading(false);
     };
 
-    worker.postMessage({
-      formulaFn,
-      row: JSON.stringify(availableFields),
-      ref: { id: ref.id, path: ref.path },
-    });
+    worker.postMessage(
+      JSON.stringify({
+        formulaFn,
+        row: availableFields,
+        ref: serializeRef(ref.path),
+      })
+    );
 
     return () => {
       worker.terminate();

src/components/fields/Formula/util.tsx

@@ -24,6 +24,8 @@ 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 { DocumentData, DocumentReference } from "firebase/firestore";
 
 export function useDeepCompareMemoize<T>(value: T) {
   const ref = useRef<T>(value);
@@ -65,7 +67,7 @@ export const outputFieldTypes = Object.values(FieldType).filter(
     ].includes(type)
 );
 
-export const defaultFn = `const formula:Formula = async ({ row })=> {
+export const defaultFn = `const formula:Formula = async ({ row, ref })=> {
   // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
   
   // Example:
@@ -120,3 +122,23 @@ export const getDisplayCell = (type: FieldType) => {
       return ShortTextDisplayCell;
   }
 };
+
+export const serializeRef = (path: string, maxDepth = 20) => {
+  const pathArr = path.split("/");
+  const serializedRef = {
+    path: pathArr.join("/"),
+    id: pathArr.pop(),
+  } as any;
+  let curr: TableRowRef | Partial<DocumentReference<DocumentData>> =
+    serializedRef;
+  let depth = 0;
+  while (pathArr.length > 0 && curr && depth < maxDepth) {
+    (curr.parent as any) = {
+      path: pathArr.join("/"),
+      id: pathArr.pop(),
+    } as Partial<DocumentReference<DocumentData>>;
+    curr = curr.parent as any;
+    maxDepth++;
+  }
+  return serializedRef;
+};

src/components/fields/Formula/worker.ts

@@ -1,6 +1,6 @@
 onmessage = async ({ data }) => {
   try {
-    const { formulaFn, row, ref } = data;
+    const { formulaFn, row, ref } = JSON.parse(data);
     const AsyncFunction = async function () {}.constructor as any;
     const [_, fnBody] = formulaFn.match(/=>\s*({?[\s\S]*}?)$/);
     if (!fnBody) return;
@@ -9,7 +9,7 @@ onmessage = async ({ data }) => {
       "ref",
       `const fn = async () => \n${fnBody}\n return fn();`
     );
-    const result = await fn(JSON.parse(row), ref);
+    const result = await fn(row, ref);
     postMessage({ result });
   } catch (error: any) {
     console.error("Error: ", error);