From e3831d716abf5cbbc7a21627fa143c7651554211 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Tue, 22 Nov 2022 17:36:17 +1100 Subject: [PATCH] =?UTF-8?q?fix=20serverDocCountAtom=20loading=20state=20di?= =?UTF-8?q?splaying=20=E2=80=9Cof=200=20rows=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/atoms/tableScope/table.ts | 7 ++-- .../TableToolbar/LoadedRowsStatus.tsx | 12 +++---- src/hooks/useFirestoreCollectionWithAtom.ts | 32 ++++++++++++------- 3 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/atoms/tableScope/table.ts b/src/atoms/tableScope/table.ts index 6681af87..fdf8820c 100644 --- a/src/atoms/tableScope/table.ts +++ b/src/atoms/tableScope/table.ts @@ -239,5 +239,8 @@ export type AuditChangeFunction = ( */ export const auditChangeAtom = atom(undefined); -/** Store total number of rows in firestore collection */ -export const serverDocCountAtom = atom(0) \ No newline at end of file +/** + * Store total number of rows in the table, respecting current filters. + * If `undefined`, the query hasn’t loaded yet. + */ +export const serverDocCountAtom = atom(undefined); diff --git a/src/components/TableToolbar/LoadedRowsStatus.tsx b/src/components/TableToolbar/LoadedRowsStatus.tsx index c57ab80d..6a1465fa 100644 --- a/src/components/TableToolbar/LoadedRowsStatus.tsx +++ b/src/components/TableToolbar/LoadedRowsStatus.tsx @@ -10,7 +10,7 @@ import { tableScope, tableRowsAtom, tableNextPageAtom, - serverDocCountAtom + serverDocCountAtom, } from "@src/atoms/tableScope"; import { spreadSx } from "@src/utils/ui"; @@ -58,20 +58,20 @@ const loadingIcon = ( function LoadedRowsStatus() { const [tableNextPage] = useAtom(tableNextPageAtom, tableScope); - const [serverDocCount] = useAtom(serverDocCountAtom, tableScope) - const [tableRows] = useAtom(tableRowsAtom, tableScope) - + const [serverDocCount] = useAtom(serverDocCountAtom, tableScope); + const [tableRows] = useAtom(tableRowsAtom, tableScope); if (tableNextPage.loading) return {loadingIcon}Loading more…; - return ( Loaded {!tableNextPage.available && "all "} - {tableRows.length} {tableNextPage.available && `of ${serverDocCount}`} row{serverDocCount !== 1 && "s"} + {tableRows.length} + {serverDocCount !== undefined && ` of ${serverDocCount}`} row + {(serverDocCount ?? tableRows.length) !== 1 && "s"} ); diff --git a/src/hooks/useFirestoreCollectionWithAtom.ts b/src/hooks/useFirestoreCollectionWithAtom.ts index 4896a609..fb4ec621 100644 --- a/src/hooks/useFirestoreCollectionWithAtom.ts +++ b/src/hooks/useFirestoreCollectionWithAtom.ts @@ -22,7 +22,7 @@ import { QueryConstraint, WhereFilterOp, documentId, - getCountFromServer + getCountFromServer, } from "firebase/firestore"; import { useErrorHandler } from "react-error-boundary"; @@ -64,7 +64,7 @@ interface IUseFirestoreCollectionWithAtomOptions { /** Update this atom when we’re loading the next page, and if there is a next page available. Uses same scope as `dataScope`. */ nextPageAtom?: PrimitiveAtom; /** Set this atom's value to the number of docs in the collection on each new snapshot */ - serverDocCountAtom?: PrimitiveAtom | undefined; + serverDocCountAtom?: PrimitiveAtom; } /** @@ -96,7 +96,7 @@ export function useFirestoreCollectionWithAtom( updateDocAtom, deleteDocAtom, nextPageAtom, - serverDocCountAtom + serverDocCountAtom, } = options || {}; const [firebaseDb] = useAtom(firebaseDbAtom, projectScope); @@ -120,7 +120,10 @@ export function useFirestoreCollectionWithAtom( void >(nextPageAtom || (dataAtom as any), dataScope); - const setServerDocCountAtom = useSetAtom(serverDocCountAtom || (dataAtom as any), dataScope) + const setServerDocCountAtom = useSetAtom( + serverDocCountAtom || (dataAtom as any), + dataScope + ); // Store if we’re at the last page to prevent a new query from being created const [isLastPage, setIsLastPage] = useState(false); @@ -198,8 +201,8 @@ export function useFirestoreCollectionWithAtom( // on each new snapshot, use the query to get and set the document count from the server if (serverDocCountAtom) { getCountFromServer(memoizedQuery.unlimitedQuery).then((value) => { - setServerDocCountAtom(value.data().count) - }) + setServerDocCountAtom(value.data().count); + }); } } catch (error) { if (onError) onError(error as FirestoreError); @@ -232,7 +235,8 @@ export function useFirestoreCollectionWithAtom( handleError, nextPageAtom, setNextPageAtom, - setServerDocCountAtom + serverDocCountAtom, + setServerDocCountAtom, ]); // Create variable for validity of query to pass to useEffect dependencies @@ -339,7 +343,7 @@ const getQuery = ( limit, firestoreFilters, sorts, - unlimitedQuery: query(collectionRef, ...firestoreFilters) + unlimitedQuery: query(collectionRef, ...firestoreFilters), }; } catch (e) { if (onError) onError(e as FirestoreError); @@ -389,11 +393,15 @@ export const tableFiltersToFirestoreFilters = (filters: TableFilter[]) => { firestoreFilters.push(where(documentId(), "==", filter.value)); continue; } else if (filter.operator === "color-equal") { - firestoreFilters.push(where(filter.key.concat(".hex"), "==", filter.value.hex.toString())) - continue + firestoreFilters.push( + where(filter.key.concat(".hex"), "==", filter.value.hex.toString()) + ); + continue; } else if (filter.operator === "color-not-equal") { - firestoreFilters.push(where(filter.key.concat(".hex"), "!=", filter.value.hex.toString())) - continue + firestoreFilters.push( + where(filter.key.concat(".hex"), "!=", filter.value.hex.toString()) + ); + continue; } firestoreFilters.push( where(filter.key, filter.operator as WhereFilterOp, filter.value)