Algolia update onSubmit, refactor onSubmit function for all fields

src/components/Fields/CheckBox.tsx

@@ -16,7 +16,7 @@ const CheckBox = (props: Props) => {
       name={`checkBox-controlled-${row.id}`}
       checked={!!value}
       onChange={e => {
-        onSubmit(row.ref, !value);
+        onSubmit(!value);
       }}
     />
   );

src/components/Fields/Date.tsx

@@ -22,7 +22,7 @@ const Date = (props: Props) => {
   const { value, row, onSubmit, fieldType } = props;
   function handleDateChange(date: Date | null) {
     if (date) {
-      onSubmit(row.ref, date);
+      onSubmit(date);
     }
   }
 

src/components/Fields/DocSelect.tsx

@@ -54,7 +54,7 @@ const DocSelect = (props: Props) => {
   const id = open ? "no-transition-popper" : undefined;
   const onClickAway = (event: any) => {
     if (event.target.id !== id) {
-      //  onSubmit(row.ref, text);
+      //  onSubmit();
       setAnchorEl(null);
     }
   };

src/components/Fields/File.tsx

@@ -44,7 +44,7 @@ const File = (props: Props) => {
     multiple: false,
   });
   const handleDelete = () => {
-    onSubmit(row.ref, []);
+    onSubmit([]);
   };
 
   return (

src/components/Fields/LongText.tsx

@@ -51,7 +51,7 @@ const LongText = (props: Props) => {
   const id = open ? "no-transition-popper" : undefined;
   const onClickAway = (event: any) => {
     if (event.target.id !== id) {
-      onSubmit(row.ref, text);
+      onSubmit(text);
       setAnchorEl(null);
     }
   };

src/components/Fields/MultiSelect.tsx

@@ -66,16 +66,16 @@ const MultiSelect = (props: Props) => {
   const handleChange = (e: any, v: any) => {
     if (!value) {
       // creates new array
-      onSubmit(row.ref, [v.props.value]);
+      onSubmit([v.props.value]);
     } else if (!value.includes(v.props.value)) {
       // adds to array
-      onSubmit(row.ref, [...value, v.props.value]);
+      onSubmit([...value, v.props.value]);
     } else {
       // removes from array
       let _updatedValues = [...value];
       const index = _updatedValues.indexOf(v.props.value);
       _updatedValues.splice(index, 1);
-      onSubmit(row.ref, _updatedValues);
+      onSubmit(_updatedValues);
     }
   };
 

src/components/Fields/Rating.tsx

@@ -17,7 +17,7 @@ const Rating = (props: Props) => {
       name={`rating-controlled-${row.id}`}
       value={value}
       onChange={(event, newValue) => {
-        onSubmit(row.ref, newValue);
+        onSubmit(newValue);
       }}
     />
   );

src/components/Table/grid-fns.tsx

@@ -12,7 +12,11 @@ import Image from "../Fields/Image";
 import File from "../Fields/File";
 import LongText from "../Fields/LongText";
 import DocSelect from "../Fields/DocSelect";
-
+import { cloudFunction, CLOUD_FUNCTIONS } from "firebase/callables";
+import { functions } from "../../firebase";
+const algoliaUpdateDoc = functions.httpsCallable(
+  CLOUD_FUNCTIONS.updateAlgoliaRecord
+);
 const { AutoComplete } = Editors;
 
 export const editable = (fieldType: FieldType) => {
@@ -31,24 +35,31 @@ export const editable = (fieldType: FieldType) => {
       return true;
   }
 };
-export const onSubmit = (key: string) => (
-  ref: firebase.firestore.DocumentReference,
-  value: any
-) => {
+export const onSubmit = (key: string, row: any) => async (value: any) => {
+  const collection = row.ref.parent.path;
+  const data = { collection, id: row.ref.id, doc: { [key]: value } };
   if (value !== null || value !== undefined) {
-    ref.update({ [key]: value });
+    row.ref.update({ [key]: value });
+    const callableRes = await algoliaUpdateDoc(data);
+    console.log(callableRes);
   }
 };
 
 export const DateFormatter = (key: string, fieldType: FieldType) => (
   props: any
 ) => {
-  return <Date {...props} onSubmit={onSubmit(key)} fieldType={fieldType} />;
+  return (
+    <Date
+      {...props}
+      onSubmit={onSubmit(key, props.row)}
+      fieldType={fieldType}
+    />
+  );
 };
 
 export const onGridRowsUpdated = (props: any) => {
   const { fromRowData, updated } = props;
-  fromRowData.ref.update(updated);
+  onSubmit(Object.keys(updated)[0], fromRowData)(Object.values(updated)[0]);
 };
 export const onCellSelected = (args: any) => {
   console.log(args);
@@ -64,14 +75,14 @@ export const cellFormatter = (column: any) => {
         return (
           <Rating
             {...props}
-            onSubmit={onSubmit(key)}
+            onSubmit={onSubmit(key, props.row)}
             value={typeof props.value === "number" ? props.value : 0}
           />
         );
       };
     case FieldType.checkBox:
       return (props: any) => {
-        return <CheckBox {...props} onSubmit={onSubmit(key)} />;
+        return <CheckBox {...props} onSubmit={onSubmit(key, props.row)} />;
       };
     case FieldType.url:
       return (props: any) => {
@@ -80,27 +91,43 @@ export const cellFormatter = (column: any) => {
     case FieldType.multiSelect:
       return (props: any) => {
         return (
-          <MultiSelect {...props} onSubmit={onSubmit(key)} options={options} />
+          <MultiSelect
+            {...props}
+            onSubmit={onSubmit(key, props.row)}
+            options={options}
+          />
         );
       };
     case FieldType.image:
       return (props: any) => {
-        return <Image {...props} onSubmit={onSubmit(key)} fieldName={key} />;
+        return (
+          <Image
+            {...props}
+            onSubmit={onSubmit(key, props.row)}
+            fieldName={key}
+          />
+        );
       };
     case FieldType.file:
       return (props: any) => {
-        return <File {...props} onSubmit={onSubmit(key)} fieldName={key} />;
+        return (
+          <File
+            {...props}
+            onSubmit={onSubmit(key, props.row)}
+            fieldName={key}
+          />
+        );
       };
     case FieldType.longText:
       return (props: any) => {
-        return <LongText {...props} onSubmit={onSubmit(key)} />;
+        return <LongText {...props} onSubmit={onSubmit(key, props.row)} />;
       };
     case FieldType.documentSelect:
       return (props: any) => {
         return (
           <DocSelect
             {...props}
-            onSubmit={onSubmit(key)}
+            onSubmit={onSubmit(key, props.row)}
             collectionPath={column.collectionPath}
           />
         );

src/firebase/callables.ts

@@ -1,6 +1,8 @@
 import { functions } from "./index";
 
-export enum CLOUD_FUNCTIONS {}
+export enum CLOUD_FUNCTIONS {
+  updateAlgoliaRecord = "updateAlgoliaRecord",
+}
 
 export const cloudFunction = (
   name: string,

src/firebase/index.ts

@@ -17,5 +17,5 @@ if (process.env.REACT_APP_ENV === "PRODUCTION") {
 export const auth = firebase.auth();
 export const db = firebase.firestore();
 export const bucket = firebase.storage();
-export const functions = firebase.app().functions();
+export const functions = firebase.functions();
 export const googleProvider = new firebase.auth.GoogleAuthProvider();

src/hooks/useFiretable/index.ts

@@ -40,7 +40,10 @@ const useFiretable = (collectionName: string) => {
       update: configActions.update,
       remove: configActions.remove,
     },
-    row: { add: tableActions.addRow, delete: tableActions.deleteRow },
+    row: {
+      add: tableActions.addRow,
+      delete: tableActions.deleteRow,
+    },
     set: setTable,
   };
 

src/hooks/useFiretable/useTable.ts

@@ -10,7 +10,7 @@ const tableReducer = (prevState: any, newProps: any) => {
     switch (newProps.type) {
       case "more":
         if (prevState.limit < prevState.cap)
-          // rows count hardcap
+          // rows count hardCap
           return { ...prevState, limit: prevState.limit + 10 };
         else return { ...prevState };
       default:
@@ -20,7 +20,7 @@ const tableReducer = (prevState: any, newProps: any) => {
     return { ...prevState, ...newProps };
   }
 };
-const tableIntialState = {
+const tableInitialState = {
   rows: [],
   prevFilters: null,
   prevPath: null,
@@ -33,10 +33,10 @@ const tableIntialState = {
   cap: CAP,
 };
 
-const useTable = (intialOverrides: any) => {
+const useTable = (initialOverrides: any) => {
   const [tableState, tableDispatch] = useReducer(tableReducer, {
-    ...tableIntialState,
-    ...intialOverrides,
+    ...tableInitialState,
+    ...initialOverrides,
   });
   const getRows = (
     filters: {
@@ -143,6 +143,7 @@ const useTable = (intialOverrides: any) => {
       updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
     });
   };
+
   const tableActions = { deleteRow, setTable, addRow };
   return [tableState, tableActions];
 };