From 16f8a0fede8907395795e54380063bd756e86348 Mon Sep 17 00:00:00 2001 From: shams mosowi Date: Mon, 14 Oct 2019 08:59:25 +1100 Subject: [PATCH] hooks documentation --- src/components/Fields/LongText.tsx | 4 +-- src/hooks/useFiretable/useTable.ts | 31 +++++++++++++----------- src/hooks/useFiretable/useTableConfig.ts | 31 ++++++++++++++++++++++-- 3 files changed, 47 insertions(+), 19 deletions(-) diff --git a/src/components/Fields/LongText.tsx b/src/components/Fields/LongText.tsx index 0a1e561b..53742274 100644 --- a/src/components/Fields/LongText.tsx +++ b/src/components/Fields/LongText.tsx @@ -45,9 +45,7 @@ const LongText = (props: Props) => { setAnchorEl(event.currentTarget); }; const onClickAway = () => { - if (text !== value) { - onSubmit(text); - } + if (text !== value) onSubmit(text); }; const open = anchorEl !== null; const id = open ? "no-transition-popper" : undefined; diff --git a/src/hooks/useFiretable/useTable.ts b/src/hooks/useFiretable/useTable.ts index ea1d0f78..59b25541 100644 --- a/src/hooks/useFiretable/useTable.ts +++ b/src/hooks/useFiretable/useTable.ts @@ -7,22 +7,10 @@ import { algoliaUpdateDoc } from "../../firebase/callables"; import { FireTableFilter } from "."; import filter from "ramda/es/filter"; -const CAP = 500; +const CAP = 1000; // safety paramter sets the upper limit of number of docs fetched by this hook const tableReducer = (prevState: any, newProps: any) => { - if (newProps.type) { - switch (newProps.type) { - case "more": - if (prevState.limit < prevState.cap) - // rows count hardCap - return { ...prevState, limit: prevState.limit + 10 }; - else return { ...prevState }; - default: - break; - } - } else { - return { ...prevState, ...newProps }; - } + return { ...prevState, ...newProps }; }; const tableInitialState = { rows: [], @@ -104,6 +92,7 @@ const useTable = (initialOverrides: any) => { } }, (error: Error) => { + //TODO:callable to create new index if (error.message.includes("indexes?create_composite=")) { const url = "https://console.firebase.google.com/project/firetable-antler/database/firestore/" + @@ -139,6 +128,10 @@ const useTable = (initialOverrides: any) => { } }; }, [tableState.filters, tableState.limit, tableState.path]); + /** used deleting row/doc + * @param rowIndex local position + * @param documentId firestore document id + */ const deleteRow = (rowIndex: number, documentId: string) => { //remove row locally tableState.rows.splice(rowIndex, 1); @@ -148,6 +141,10 @@ const useTable = (initialOverrides: any) => { .doc(documentId) .delete(); }; + /** used for setting up the table listener + * @param tableCollection firestore collection path + * @param filters specify filters to be applied to the query + */ const setTable = (tableCollection: string, filters?: FireTableFilter) => { if (tableCollection !== tableState.path) { tableDispatch({ path: tableCollection, rows: [] }); @@ -155,6 +152,9 @@ const useTable = (initialOverrides: any) => { if (filters) tableDispatch({ filters }); }; + /** creating new document/row + * @param data(optional: default will create empty row) + */ const addRow = async (data?: any) => { const ref = await db.collection(tableState.path).add({ createdAt: firebase.firestore.FieldValue.serverTimestamp(), @@ -169,6 +169,9 @@ const useTable = (initialOverrides: any) => { }); } }; + /** used for incrementing the number of rows fetched + * @param additionalRows number additional rows to be fetched (optional: default is 20) + */ const moreRows = (additionalRows?: number) => { tableDispatch({ limit: tableState.limit + (additionalRows ? additionalRows : 20), diff --git a/src/hooks/useFiretable/useTableConfig.ts b/src/hooks/useFiretable/useTableConfig.ts index 5460a355..c1d57a4c 100644 --- a/src/hooks/useFiretable/useTableConfig.ts +++ b/src/hooks/useFiretable/useTableConfig.ts @@ -15,7 +15,9 @@ const useTableConfig = (tablePath: string) => { documentDispatch({ columns: doc.columns, rowHeight: doc.rowHeight }); } }, [tableConfigState.doc]); - + /** used for specifying the table in use + * @param table firestore collection path + */ const setTable = (table: string) => { documentDispatch({ path: `${table}/_FIRETABLE_`, @@ -24,6 +26,11 @@ const useTableConfig = (tablePath: string) => { loading: true, }); }; + /** used for creating a new column + * @param name of column. + * @param type of column + * @param data additional column properties + */ const add = (name: string, type: FieldType, data?: unknown) => { //TODO: validation const { columns } = tableConfigState; @@ -33,12 +40,22 @@ const useTableConfig = (tablePath: string) => { data: { columns: [...columns, { name, key, type, ...data }] }, }); }; + + /** used for updating the width of column + * @param index of column. + * @param width number of pixels, eg: 120 + */ const resize = (index: number, width: number) => { const { columns } = tableConfigState; columns[index].width = width; documentDispatch({ action: DocActions.update, data: { columns } }); }; type updatable = { field: string; value: unknown }; + + /** used for updating column properties such as type,name etc. + * @param index of column. + * @param {updatable[]} updatables properties to be updated + */ const updateColumn = (index: number, updatables: updatable[]) => { const { columns } = tableConfigState; updatables.forEach((updatable: updatable) => { @@ -46,12 +63,18 @@ const useTableConfig = (tablePath: string) => { }); documentDispatch({ action: DocActions.update, data: { columns } }); }; - + /** remove column by index + * @param index of column. + */ const remove = (index: number) => { const { columns } = tableConfigState; columns.splice(index, 1); documentDispatch({ action: DocActions.update, data: { columns } }); }; + /** reorder columns by key + * @param draggedColumnKey column being repositioned. + * @param droppedColumnKey column being . + */ const reorder = (draggedColumnKey: string, droppedColumnKey: string) => { const { columns } = tableConfigState; const draggedColumnIndex = _findIndex(columns, ["key", draggedColumnKey]); @@ -63,6 +86,10 @@ const useTableConfig = (tablePath: string) => { data: { columns: reorderedColumns }, }); }; + /** changing table configuration used for things such as row height + * @param key name of parameter eg. rowHeight + * @param value new value eg. 65 + */ const updateConfig = (key: string, value: unknown) => { documentDispatch({ action: DocActions.update,