Merge pull request #8 from AntlerEngineering/feature/import-csv

import csv synced with algolia

src/components/Fields/Date.tsx

@@ -16,10 +16,12 @@ interface Props {
   row: { ref: firebase.firestore.DocumentReference; id: string };
   onSubmit: Function;
   fieldType: FieldType;
+  isScrolling: boolean;
 }
 
 const Date = (props: Props) => {
-  const { value, row, onSubmit, fieldType } = props;
+  const { value, row, onSubmit, fieldType, isScrolling } = props;
+  //if (isScrolling) return <div />;
   function handleDateChange(date: Date | null) {
     if (date) {
       onSubmit(date);

src/components/Fields/DocSelect.tsx

@@ -40,10 +40,11 @@ interface Props {
   row: { ref: firebase.firestore.DocumentReference; id: string };
   onSubmit: Function;
   collectionPath: string;
+  isScrolling: boolean;
 }
 
 const DocSelect = (props: Props) => {
-  const { value, row, onSubmit, collectionPath } = props;
+  const { value, row, onSubmit, collectionPath, isScrolling } = props;
   const [query, setQuery] = useState(value ? value : "");
   const [hits, setHits] = useState<{}>([]);
   const algoliaIndex = searchClient.initIndex(collectionPath);
@@ -52,7 +53,7 @@ const DocSelect = (props: Props) => {
     setHits(resp.hits);
   };
   useEffect(() => {
-    search(query);
+    //search(query);
   }, [query]);
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -63,6 +64,7 @@ const DocSelect = (props: Props) => {
   ) => {
     setAnchorEl(event.currentTarget);
   };
+  // if (isScrolling) return <div />;
 
   const open = Boolean(anchorEl);
   const id = open ? "no-transition-popper" : undefined;

src/components/Fields/Rating.tsx

@@ -7,10 +7,11 @@ interface Props {
   value: number;
   row: any;
   onSubmit: Function;
+  isScrolling: boolean;
 }
 const Rating = (props: Props) => {
-  const { value, row, onSubmit } = props;
-
+  const { value, row, onSubmit, isScrolling } = props;
+  //if (isScrolling) return <div />;
   return (
     <MuiRating
       // TODO: make it unique for each

src/components/ImportCSV.tsx

@@ -120,6 +120,22 @@ export default function ImportCSV(props: any) {
 
           {csvKeys.length !== 0 && (
             <Grid container direction="column">
+              {keyPairs.map((keyPair: any, index: number) => (
+                <Grid item className={classes.keyPair}>
+                  <Typography>{keyPair.csvKey}</Typography>
+                  <ArrowIcon />
+                  <Typography>{keyPair.columnKey}</Typography>
+                  <IconButton
+                    onClick={() => {
+                      let clonedPairs = [...keyPairs];
+                      clonedPairs.splice(index, 1);
+                      setKeyPairs(clonedPairs);
+                    }}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Grid>
+              ))}
               <Grid container direction="row" alignContent="center">
                 <FormControl className={classes.formControl}>
                   <InputLabel htmlFor="csv-keys">csv Fields</InputLabel>
@@ -168,22 +184,6 @@ export default function ImportCSV(props: any) {
                   <AddIcon />
                 </IconButton>
               </Grid>
-              {keyPairs.map((keyPair: any, index: number) => (
-                <Grid item className={classes.keyPair}>
-                  <Typography>{keyPair.csvKey}</Typography>
-                  <ArrowIcon />
-                  <Typography>{keyPair.columnKey}</Typography>
-                  <IconButton
-                    onClick={() => {
-                      let clonedPairs = [...keyPairs];
-                      clonedPairs.splice(index, 1);
-                      setKeyPairs(clonedPairs);
-                    }}
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </Grid>
-              ))}
             </Grid>
           )}
         </DialogContent>

src/components/Table/grid-fns.tsx

@@ -12,12 +12,9 @@ import Image from "../Fields/Image";
 import File from "../Fields/File";
 import LongText from "../Fields/LongText";
 import DocSelect from "../Fields/DocSelect";
-import { CLOUD_FUNCTIONS } from "firebase/callables";
-import { functions } from "../../firebase";
 
-const algoliaUpdateDoc = functions.httpsCallable(
-  CLOUD_FUNCTIONS.updateAlgoliaRecord
-);
+import { algoliaUpdateDoc } from "../../firebase/callables";
+
 const { AutoComplete } = Editors;
 
 export const editable = (fieldType: FieldType) => {

src/firebase/callables.ts

@@ -24,3 +24,13 @@ export const cloudFunction = (
       }
     });
 };
+
+export const algoliaUpdateDoc = (data: {
+  collection: string;
+  id: string;
+  doc: any;
+}) => functions.httpsCallable(CLOUD_FUNCTIONS.updateAlgoliaRecord)(data);
+
+export const algoliaDeleteDoc = functions.httpsCallable(
+  CLOUD_FUNCTIONS.deleteAlgoliaRecord
+);

src/hooks/useFiretable/useTable.ts

@@ -3,6 +3,8 @@ import { db } from "../../firebase";
 import { useEffect, useReducer } from "react";
 import equals from "ramda/es/equals";
 import firebase from "firebase/app";
+import { algoliaUpdateDoc } from "../../firebase/callables";
+
 const CAP = 500;
 
 const tableReducer = (prevState: any, newProps: any) => {
@@ -27,7 +29,7 @@ const tableInitialState = {
   path: null,
   filters: [],
   prevLimit: 0,
-  limit: 1000,
+  limit: 100,
   loading: true,
   sort: { field: "createdAt", direction: "asc" },
   cap: CAP,
@@ -137,12 +139,19 @@ const useTable = (initialOverrides: any) => {
     tableDispatch({ path: tableCollection });
   };
 
-  const addRow = (data?: any) => {
-    db.collection(tableState.path).add({
+  const addRow = async (data?: any) => {
+    const ref = await db.collection(tableState.path).add({
       createdAt: firebase.firestore.FieldValue.serverTimestamp(),
       updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
       ...data,
     });
+    if (data) {
+      algoliaUpdateDoc({
+        collection: ref.parent.path,
+        id: ref.id,
+        doc: { ...data },
+      });
+    }
   };
 
   const tableActions = { deleteRow, setTable, addRow };