diff --git a/src/components/Fields/CheckBox.tsx b/src/components/Fields/CheckBox.tsx index 7b68ee17..47e59bad 100644 --- a/src/components/Fields/CheckBox.tsx +++ b/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); }} /> ); diff --git a/src/components/Fields/Date.tsx b/src/components/Fields/Date.tsx index 12d43a0a..e659edd6 100644 --- a/src/components/Fields/Date.tsx +++ b/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); } } diff --git a/src/components/Fields/DocSelect.tsx b/src/components/Fields/DocSelect.tsx index ca7f7c61..6a53b565 100644 --- a/src/components/Fields/DocSelect.tsx +++ b/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); } }; diff --git a/src/components/Fields/File.tsx b/src/components/Fields/File.tsx index 5b3df5e8..3e75e68a 100644 --- a/src/components/Fields/File.tsx +++ b/src/components/Fields/File.tsx @@ -44,7 +44,7 @@ const File = (props: Props) => { multiple: false, }); const handleDelete = () => { - onSubmit(row.ref, []); + onSubmit([]); }; return ( diff --git a/src/components/Fields/LongText.tsx b/src/components/Fields/LongText.tsx index cf2333e1..aa83bf05 100644 --- a/src/components/Fields/LongText.tsx +++ b/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); } }; diff --git a/src/components/Fields/MultiSelect.tsx b/src/components/Fields/MultiSelect.tsx index 997436cc..d9f27430 100644 --- a/src/components/Fields/MultiSelect.tsx +++ b/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); } }; diff --git a/src/components/Fields/Rating.tsx b/src/components/Fields/Rating.tsx index 8d5f9bb3..2f57bac7 100644 --- a/src/components/Fields/Rating.tsx +++ b/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); }} /> ); diff --git a/src/components/Table/grid-fns.tsx b/src/components/Table/grid-fns.tsx index 6a50ebd1..9641c375 100644 --- a/src/components/Table/grid-fns.tsx +++ b/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 ; + return ( + + ); }; 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 ( ); }; case FieldType.checkBox: return (props: any) => { - return ; + return ; }; case FieldType.url: return (props: any) => { @@ -80,27 +91,43 @@ export const cellFormatter = (column: any) => { case FieldType.multiSelect: return (props: any) => { return ( - + ); }; case FieldType.image: return (props: any) => { - return ; + return ( + + ); }; case FieldType.file: return (props: any) => { - return ; + return ( + + ); }; case FieldType.longText: return (props: any) => { - return ; + return ; }; case FieldType.documentSelect: return (props: any) => { return ( ); diff --git a/src/firebase/callables.ts b/src/firebase/callables.ts index faf0123e..8d1b808a 100644 --- a/src/firebase/callables.ts +++ b/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, diff --git a/src/firebase/index.ts b/src/firebase/index.ts index 75601f09..5b7aa377 100644 --- a/src/firebase/index.ts +++ b/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(); diff --git a/src/hooks/useFiretable/index.ts b/src/hooks/useFiretable/index.ts index 84b7e66a..744e10f0 100644 --- a/src/hooks/useFiretable/index.ts +++ b/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, }; diff --git a/src/hooks/useFiretable/useTable.ts b/src/hooks/useFiretable/useTable.ts index 2205c5ba..c8eddb9f 100644 --- a/src/hooks/useFiretable/useTable.ts +++ b/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]; };