Merge branch 'develop' of https://github.com/AntlerVC/firetable into develop

cloud_functions/functions/src/config.ts

@@ -8,7 +8,6 @@ export const db = admin.firestore();
 // Initialize Auth
 export const auth = admin.auth();
 
-//export const bucket = admin.storage().bucket("antler-vc");
 const settings = { timestampsInSnapshots: true };
 db.settings(settings);
 export const env = functions.config();

www/package.json

@@ -63,7 +63,7 @@
     "deploy": "firebase deploy"
   },
   "engines": {
-    "node": "10"
+    "node": ">=10"
   },
   "eslintConfig": {
     "extends": "react-app"

www/src/components/SideDrawer/Form/Autosave.tsx

@@ -16,12 +16,14 @@ export interface IAutosaveProps {
   control: Control;
   defaultValues: Values;
   docRef: firebase.firestore.DocumentReference;
+  row: any;
 }
 
 export default function Autosave({
   control,
   defaultValues,
   docRef,
+  row,
 }: IAutosaveProps) {
   const { currentUser } = useAppContext();
   const { tableState, sideDrawerRef } = useFiretableContext();
@@ -43,10 +45,6 @@ export default function Autosave({
     equalityFn: _isEqual,
   });
 
-  const row = sideDrawerRef?.current?.cell
-    ? tableState?.rows[sideDrawerRef?.current?.cell.row]
-    : {};
-
   useEffect(() => {
     if (!row || !row.ref) return;
     if (row.ref.id !== docRef.id) return;
@@ -57,7 +55,6 @@ export default function Autosave({
       _omitBy(debouncedValue, _isUndefined),
       (value, key) => _isEqual(value, row[key])
     );
-    console.log(updatedValues);
 
     if (Object.keys(updatedValues).length === 0) return;
 

www/src/components/SideDrawer/Form/index.tsx

@@ -134,6 +134,7 @@ export default function Form({ fields, values }: IFormProps) {
         control={control}
         defaultValues={defaultValues}
         docRef={docRef}
+        row={values}
       />
 
       <Grid container spacing={4} direction="column" wrap="nowrap">

www/src/components/SideDrawer/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import clsx from "clsx";
 import _isNil from "lodash/isNil";
 import _sortBy from "lodash/sortBy";
-
+import queryString from "query-string";
 import { Drawer, Fab } from "@material-ui/core";
 import ChevronIcon from "@material-ui/icons/KeyboardArrowLeft";
 import ChevronUpIcon from "@material-ui/icons/KeyboardArrowUp";
@@ -15,7 +15,7 @@ import ErrorBoundary from "components/ErrorBoundary";
 import { useStyles } from "./useStyles";
 import { useFiretableContext } from "contexts/firetableContext";
 import { FieldType } from "constants/fields";
-
+import useDoc from "hooks/useDoc";
 export const DRAWER_WIDTH = 600;
 export const DRAWER_COLLAPSED_WIDTH = 36;
 
@@ -53,6 +53,36 @@ export default function SideDrawer() {
     dataGridRef?.current?.selectCell({ rowIdx: row, idx });
   };
 
+  const [urlDocState, dispatchUrlDoc] = useDoc({});
+  useEffect(() => {
+    if (urlDocState.doc) {
+      setOpen(true);
+    }
+  }, [urlDocState]);
+  useEffect(() => {
+    const rowRef = queryString.parse(window.location.search).rowRef as string;
+    if (rowRef) {
+      console.log(rowRef);
+      dispatchUrlDoc({ path: decodeURIComponent(rowRef) });
+    }
+  }, []);
+  useEffect(() => {
+    if (cell) {
+      window.history.pushState(
+        "",
+        `${tableState?.tablePath}`,
+        `${window.location.pathname}?rowRef=${encodeURIComponent(
+          tableState?.rows[cell.row].ref.path
+        )}`
+      );
+      console.log(tableState?.tablePath, tableState?.rows[cell.row].id);
+      if (urlDocState.doc) {
+        urlDocState.unsubscribe();
+        dispatchUrlDoc({ path: "", doc: null });
+      }
+    }
+  }, [cell]);
+
   // Map columns to form fields
 
   const fields =
@@ -115,12 +145,22 @@ export default function SideDrawer() {
       >
         <ErrorBoundary>
           <div className={classes.drawerContents}>
-            {open && fields && cell && (
+            {open && fields && urlDocState.doc ? (
               <Form
-                key={cell.row}
+                key={urlDocState.path}
                 fields={fields}
-                values={tableState?.rows[cell.row] ?? {}}
+                values={urlDocState.doc ?? {}}
               />
+            ) : (
+              open &&
+              fields &&
+              cell && (
+                <Form
+                  key={cell.row}
+                  fields={fields}
+                  values={tableState?.rows[cell.row] ?? {}}
+                />
+              )
             )}
           </div>
         </ErrorBoundary>

www/src/hooks/useDoc.ts

@@ -42,12 +42,12 @@ const useDoc = (intialOverrides: any) => {
     const unsubscribe = db.doc(documentState.path).onSnapshot((snapshot) => {
       if (snapshot.exists) {
         const data = snapshot.data();
-
         const id = snapshot.id;
-        const doc = { ...data, id };
+        const ref = snapshot.ref;
+        const doc = { ...data, id, ref };
         documentDispatch({
           doc,
-          ref: snapshot.ref,
+          ref,
           loading: false,
         });
       } else {