rename tableOrdersAtom to tableSortsAtom

This commit is contained in:
Sidney Alcantara
2022-06-13 23:10:15 +10:00
parent c75168e030
commit 028ab2fa13
12 changed files with 57 additions and 57 deletions

View File

@@ -9,7 +9,7 @@ import {
UpdateDocFunction,
TableFilter,
TableRowRef,
TableOrder,
TableSort,
} from "@src/types/table";
/** User info and settings */
@@ -33,7 +33,7 @@ export type UserSettings = Partial<{
Partial<{
filters: TableFilter[];
hiddenFields: string[];
sorts: TableOrder[];
sorts: TableSort[];
}>
>;
}>;

View File

@@ -7,7 +7,7 @@ import {
TableSchema,
ColumnConfig,
TableFilter,
TableOrder,
TableSort,
TableRow,
UpdateDocFunction,
UpdateCollectionDocFunction,
@@ -59,8 +59,8 @@ export const tableColumnsReducer = (
/** Filters applied to the local view */
export const tableFiltersAtom = atom<TableFilter[]>([]);
/** Orders applied to the local view */
export const tableOrdersAtom = atom<TableOrder[]>([]);
/** Sorts applied to the local view */
export const tableSortsAtom = atom<TableSort[]>([]);
/** Store current page in URL */
export const tablePageHashAtom = atomWithHash("page", 0, {

View File

@@ -41,7 +41,7 @@ import {
tableIdAtom,
updateColumnAtom,
deleteColumnAtom,
tableOrdersAtom,
tableSortsAtom,
columnMenuAtom,
columnModalAtom,
tableFiltersPopoverAtom,
@@ -75,7 +75,7 @@ export default function ColumnMenu() {
const [tableId] = useAtom(tableIdAtom, tableScope);
const updateColumn = useSetAtom(updateColumnAtom, tableScope);
const deleteColumn = useSetAtom(deleteColumnAtom, tableScope);
const [tableOrders, setTableOrders] = useAtom(tableOrdersAtom, tableScope);
const [tableSorts, setTableSorts] = useAtom(tableSortsAtom, tableScope);
const [columnMenu, setColumnMenu] = useAtom(columnMenuAtom, tableScope);
const openColumnModal = useSetAtom(columnModalAtom, tableScope);
const openTableFiltersPopover = useSetAtom(
@@ -100,8 +100,8 @@ export default function ColumnMenu() {
const _sortKey = getFieldProp("sortKey", (column as any).type);
const sortKey = _sortKey ? `${column.key}.${_sortKey}` : column.key;
const isSorted = tableOrders[0]?.key === sortKey;
const isAsc = isSorted && tableOrders[0]?.direction === "asc";
const isSorted = tableSorts[0]?.key === sortKey;
const isAsc = isSorted && tableSorts[0]?.direction === "asc";
const userDocHiddenFields =
userSettings.tables?.[formatSubTableName(tableId)]?.hiddenFields ?? [];
@@ -119,7 +119,7 @@ export default function ColumnMenu() {
activeLabel: "Remove sort: descending",
icon: <ArrowDownwardIcon />,
onClick: () => {
setTableOrders(
setTableSorts(
isSorted && !isAsc ? [] : [{ key: sortKey, direction: "desc" }]
);
handleClose();
@@ -132,7 +132,7 @@ export default function ColumnMenu() {
activeLabel: "Remove sort: ascending",
icon: <ArrowUpwardIcon />,
onClick: () => {
setTableOrders(
setTableSorts(
isSorted && isAsc ? [] : [{ key: sortKey, direction: "asc" }]
);
handleClose();

View File

@@ -7,7 +7,7 @@ import IconSlash, {
ICON_SLASH_STROKE_DASHOFFSET,
} from "@src/components/IconSlash";
import { tableScope, tableOrdersAtom } from "@src/atoms/tableScope";
import { tableScope, tableSortsAtom } from "@src/atoms/tableScope";
import { FieldType } from "@src/constants/fields";
import { getFieldProp } from "@src/components/fields";
@@ -20,21 +20,21 @@ export interface IColumnHeaderSortProps {
}
export default function ColumnHeaderSort({ column }: IColumnHeaderSortProps) {
const [tableOrders, setTableOrders] = useAtom(tableOrdersAtom, tableScope);
const [tableSorts, setTableSorts] = useAtom(tableSortsAtom, tableScope);
const _sortKey = getFieldProp("sortKey", (column as any).type);
const sortKey = _sortKey ? `${column.key}.${_sortKey}` : column.key;
const currentSort: typeof SORT_STATES[number] =
tableOrders[0]?.key !== sortKey
tableSorts[0]?.key !== sortKey
? "none"
: tableOrders[0]?.direction || "none";
: tableSorts[0]?.direction || "none";
const nextSort =
SORT_STATES[SORT_STATES.indexOf(currentSort) + 1] ?? SORT_STATES[0];
const handleSortClick = () => {
if (nextSort === "none") setTableOrders([]);
else setTableOrders([{ key: sortKey, direction: nextSort }]);
if (nextSort === "none") setTableSorts([]);
else setTableSorts([{ key: sortKey, direction: nextSort }]);
};
if (column.type === FieldType.id) return null;

View File

@@ -25,7 +25,7 @@ import {
tableScope,
tableSettingsAtom,
tableFiltersAtom,
tableOrdersAtom,
tableSortsAtom,
} from "@src/atoms/tableScope";
import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
import { tableFiltersToFirestoreFilters } from "@src/hooks/useFirestoreCollectionWithAtom";
@@ -43,7 +43,7 @@ export default function Export({ onClose }: ITableModalProps) {
const [firebaseDb] = useAtom(firebaseDbAtom, globalScope);
const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
const [tableFilters] = useAtom(tableFiltersAtom, tableScope);
const [tableOrders] = useAtom(tableOrdersAtom, tableScope);
const [tableSorts] = useAtom(tableSortsAtom, tableScope);
const tableCollection = tableSettings.collection;
const isCollectionGroup = tableSettings.tableType === "collectionGroup";
@@ -55,17 +55,17 @@ export default function Export({ onClose }: ITableModalProps) {
// add filters
const filters = tableFiltersToFirestoreFilters(tableFilters);
// optional order results
const orders = tableOrders.map((order) =>
const sorts = tableSorts.map((order) =>
orderBy(order.key, order.direction)
);
// TODO: paginate
return firestoreQuery(collectionRef, ...filters, ...orders, limit(10_000));
return firestoreQuery(collectionRef, ...filters, ...sorts, limit(10_000));
}, [
firebaseDb,
tableCollection,
isCollectionGroup,
tableFilters,
tableOrders,
tableSorts,
]);
return (
@@ -82,7 +82,7 @@ export default function Export({ onClose }: ITableModalProps) {
header={
<>
<DialogContent style={{ flexGrow: 0, flexShrink: 0 }}>
{tableFilters.length !== 0 || tableOrders.length !== 0
{tableFilters.length !== 0 || tableSorts.length !== 0
? "The filters and sorting applied to the table will be applied to the export"
: "No filters or sorting will be applied on the exported data"}
. Limited to 10,000 rows.

View File

@@ -16,7 +16,7 @@ import {
tableScope,
updateTableSchemaAtom,
tableFiltersAtom,
tableOrdersAtom,
tableSortsAtom,
tableRowsAtom,
tableModalAtom,
} from "@src/atoms/tableScope";
@@ -39,7 +39,7 @@ export interface IStepProps {
export default function ImportExistingWizard({ onClose }: ITableModalProps) {
const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope);
const setTableFilters = useSetAtom(tableFiltersAtom, tableScope);
const setTableOrders = useSetAtom(tableOrdersAtom, tableScope);
const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
const [tableRows] = useAtom(tableRowsAtom, tableScope);
const setTableModal = useSetAtom(tableModalAtom, tableScope);
@@ -51,11 +51,11 @@ export default function ImportExistingWizard({ onClose }: ITableModalProps) {
setConfig((prev) => ({ ...merge(prev, value) }));
}, []);
// Reset table filters and orders on open
// Reset table filters and sorts on open
useEffect(() => {
setTableFilters([]);
setTableOrders([]);
}, [setTableFilters, setTableOrders]);
setTableSorts([]);
}, [setTableFilters, setTableSorts]);
if (tableRows.length === 0 || !updateTableSchema) {
setTableModal(RESET);

View File

@@ -25,7 +25,7 @@ import {
tableScope,
tableSettingsAtom,
tableFiltersAtom,
tableOrdersAtom,
tableSortsAtom,
addRowAtom,
} from "@src/atoms/tableScope";
@@ -33,7 +33,7 @@ export default function AddRow() {
const [userRoles] = useAtom(userRolesAtom, globalScope);
const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
const [tableFilters] = useAtom(tableFiltersAtom, tableScope);
const [tableOrders] = useAtom(tableOrdersAtom, tableScope);
const [tableSorts] = useAtom(tableSortsAtom, tableScope);
const addRow = useSetAtom(addRowAtom, tableScope);
const [idType, setIdType] = useAtom(tableAddRowIdTypeAtom, globalScope);
@@ -41,7 +41,7 @@ export default function AddRow() {
const [open, setOpen] = useState(false);
const [openIdModal, setOpenIdModal] = useState(false);
const forceRandomId = tableFilters.length > 0 || tableOrders.length > 0;
const forceRandomId = tableFilters.length > 0 || tableSorts.length > 0;
const handleClick = () => {
if (idType === "random" || (forceRandomId && idType === "decrement")) {

View File

@@ -32,7 +32,7 @@ import {
tableSchemaAtom,
tableColumnsOrderedAtom,
tableFiltersAtom,
tableOrdersAtom,
tableSortsAtom,
updateTableSchemaAtom,
tableFiltersPopoverAtom,
} from "@src/atoms/tableScope";
@@ -59,7 +59,7 @@ export default function Filters() {
const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
const [localFilters, setLocalFilters] = useAtom(tableFiltersAtom, tableScope);
const [, setTableOrders] = useAtom(tableOrdersAtom, tableScope);
const [, setTableSorts] = useAtom(tableSortsAtom, tableScope);
const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope);
const [{ defaultQuery }] = useAtom(tableFiltersPopoverAtom, tableScope);
@@ -112,12 +112,12 @@ export default function Filters() {
setLocalFilters(filtersToApply);
// Reset order so we dont have to make a new index
setTableOrders([]);
setTableSorts([]);
}, [
hasTableFilters,
hasUserFilters,
setLocalFilters,
setTableOrders,
setTableSorts,
setTableQuery,
tableFilters,
tableFiltersOverridable,

View File

@@ -32,7 +32,7 @@ import {
DeleteCollectionDocFunction,
NextPageState,
TableFilter,
TableOrder,
TableSort,
TableRow,
} from "@src/types/table";
import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
@@ -47,8 +47,8 @@ interface IUseFirestoreCollectionWithAtomOptions<T> {
collectionGroup?: boolean;
/** Attach filters to the query */
filters?: TableFilter[];
/** Attach orders to the query */
orders?: TableOrder[];
/** Attach sorts to the query */
sorts?: TableSort[];
/** Set query page */
page?: number;
/** Set query page size */
@@ -86,7 +86,7 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
pathSegments,
collectionGroup,
filters,
orders,
sorts,
page = 0,
pageSize = COLLECTION_PAGE_SIZE,
onError,
@@ -130,7 +130,7 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
page,
pageSize,
filters,
orders,
sorts,
onError
),
(next, prev) => {
@@ -142,9 +142,9 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
)
return false;
// If orders are not equal, update the query
// If sorts are not equal, update the query
// Overrides isLastPage check
if (JSON.stringify(next?.orders) !== JSON.stringify(prev?.orders))
if (JSON.stringify(next?.sorts) !== JSON.stringify(prev?.sorts))
return false;
return isLastPage || queryEqual(next?.query as any, prev?.query as any);
@@ -226,7 +226,7 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
]);
// Create variable for validity of query to pass to useEffect dependencies
// below, and prevent it being called when page, filters, or orders is updated
// below, and prevent it being called when page, filters, or sorts is updated
const queryValid = Boolean(memoizedQuery);
// Set updateDocAtom and deleteDocAtom values if they exist
useEffect(() => {
@@ -281,7 +281,7 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
export default useFirestoreCollectionWithAtom;
/**
* Create the Firestore query with page, filters, and orders constraints.
* Create the Firestore query with page, filters, and sorts constraints.
* Put code in a function so the results can be compared by useMemoValue.
*/
const getQuery = <T>(
@@ -292,7 +292,7 @@ const getQuery = <T>(
page: number,
pageSize: number,
filters: IUseFirestoreCollectionWithAtomOptions<T>["filters"],
orders: IUseFirestoreCollectionWithAtomOptions<T>["orders"],
sorts: IUseFirestoreCollectionWithAtomOptions<T>["sorts"],
onError: IUseFirestoreCollectionWithAtomOptions<T>["onError"]
) => {
if (!path || (Array.isArray(pathSegments) && pathSegments.some((x) => !x)))
@@ -324,12 +324,12 @@ const getQuery = <T>(
collectionRef,
queryLimit((page + 1) * pageSize),
...firestoreFilters,
...(orders?.map((order) => orderBy(order.key, order.direction)) || [])
...(sorts?.map((order) => orderBy(order.key, order.direction)) || [])
),
page,
limit,
firestoreFilters,
orders,
sorts,
};
} catch (e) {
if (onError) onError(e as FirestoreError);

View File

@@ -8,7 +8,7 @@ import {
tableSettingsAtom,
tableSchemaAtom,
tableFiltersAtom,
tableOrdersAtom,
tableSortsAtom,
tableRowsAtom,
auditChangeAtom,
} from "@src/atoms/tableScope";
@@ -28,7 +28,7 @@ function TableTestPage() {
const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
const setTableFilters = useSetAtom(tableFiltersAtom, tableScope);
const setTableOrders = useSetAtom(tableOrdersAtom, tableScope);
const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
const [tableRows] = useAtom(tableRowsAtom, tableScope);
const [auditChange] = useAtom(auditChangeAtom, tableScope);
@@ -86,11 +86,11 @@ function TableTestPage() {
<button onClick={() => setTableFilters([])}>Clear table filters</button>
<button
onClick={() => setTableOrders([{ key: "firstName", direction: "asc" }])}
onClick={() => setTableSorts([{ key: "firstName", direction: "asc" }])}
>
Set table orders
Set table sorts
</button>
<button onClick={() => setTableFilters([])}>Clear table orders</button>
<button onClick={() => setTableFilters([])}>Clear table sorts</button>
<ol>
{tableRows.map(({ _rowy_ref, ...data }) => (

View File

@@ -8,7 +8,7 @@ import {
tableSchemaAtom,
updateTableSchemaAtom,
tableFiltersAtom,
tableOrdersAtom,
tableSortsAtom,
tablePageAtom,
tableRowsDbAtom,
_updateRowDbAtom,
@@ -46,9 +46,9 @@ export const TableSourceFirestore = memo(function TableSourceFirestore() {
}
);
// Get table filters and orders
// Get table filters and sorts
const [filters] = useAtom(tableFiltersAtom, tableScope);
const [orders] = useAtom(tableOrdersAtom, tableScope);
const [sorts] = useAtom(tableSortsAtom, tableScope);
const [page] = useAtom(tablePageAtom, tableScope);
// Get documents from collection and store in tableRowsDbAtom
// and handle some errors with snackbars
@@ -65,7 +65,7 @@ export const TableSourceFirestore = memo(function TableSourceFirestore() {
tableSettings?.collection,
{
filters,
orders,
sorts,
page,
collectionGroup: isCollectionGroup,
onError: handleErrorCallback,

View File

@@ -157,7 +157,7 @@ export type TableFilter = {
value: any;
};
export type TableOrder = {
export type TableSort = {
key: string;
direction: Parameters<typeof orderBy>[1];
};