Skip to content

Commit

Permalink
Create atom to fetch defaultTableSettings from.
Browse files Browse the repository at this point in the history
Use atom in useSave*** hooks to determine if popups are to be shown (and
if not, whether changes are to be applied automatically).
  • Loading branch information
nithinrdy committed Sep 21, 2023
1 parent e419480 commit 540373d
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 5 deletions.
7 changes: 7 additions & 0 deletions src/atoms/projectScope/user.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ export const themeOverriddenAtom = atomWithStorage(
false
);

/** User's default table settings (affecting saving and popup behavior) */
export const defaultTableSettingsAtom = atom((get) => {
const userSettings = get(userSettingsAtom);
console.log("defaultTableSettings", userSettings.defaultTableSettings);
return userSettings.defaultTableSettings;
});

/** Customized base theme based on project and user settings */
export const customizedThemesAtom = atom((get) => {
const publicSettings = get(publicSettingsAtom);
Expand Down
24 changes: 21 additions & 3 deletions src/components/Table/ColumnHeader/useSaveTableSorts.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useCallback, useState } from "react";
import { useAtom } from "jotai";
import { useAtom, useAtomValue } from "jotai";
import { SnackbarKey, useSnackbar } from "notistack";

import LoadingButton from "@mui/lab/LoadingButton";
Expand All @@ -11,17 +11,25 @@ import {
tableScope,
updateTableSchemaAtom,
} from "@src/atoms/tableScope";
import { projectScope, updateUserSettingsAtom } from "@src/atoms/projectScope";
import {
defaultTableSettingsAtom,
projectScope,
updateUserSettingsAtom,
} from "@src/atoms/projectScope";
import { TableSort } from "@src/types/table";

function useSaveTableSorts(canEditColumns: boolean) {
const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope);
const [updateUserSettings] = useAtom(updateUserSettingsAtom, projectScope);
const [tableId] = useAtom(tableIdAtom, tableScope);
const defaultTableSettings = useAtomValue(
defaultTableSettingsAtom,
projectScope
);
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const [snackbarId, setSnackbarId] = useState<SnackbarKey | null>(null);

// Offer to save when table sorts changes
// Offer to save when table sorts changes, depending on user settings
const trigger = useCallback(
(sorts: TableSort[]) => {
if (!updateTableSchema) throw new Error("Cannot update table schema");
Expand All @@ -33,6 +41,15 @@ function useSaveTableSorts(canEditColumns: boolean) {
});
}
if (!canEditColumns) return;
// If the user has disabled the popup, return early
if (defaultTableSettings?.saveSortingPopupDisabled) {
// If the user has `automaticallyApplySorting` set to true, apply the sorting before returning
if (defaultTableSettings?.automaticallyApplySorting) {
const updateTable = async () => await updateTableSchema({ sorts });
updateTable();
}
return;
}
if (snackbarId) {
closeSnackbar(snackbarId);
}
Expand All @@ -57,6 +74,7 @@ function useSaveTableSorts(canEditColumns: boolean) {
tableId,
closeSnackbar,
updateTableSchema,
defaultTableSettings,
]
);

Expand Down
26 changes: 24 additions & 2 deletions src/components/Table/useSaveColumnSizing.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { useSetAtom } from "jotai";
import { useAtomValue, useSetAtom } from "jotai";
import { useSnackbar } from "notistack";
import { useDebounce } from "use-debounce";
import { isEqual, isEmpty } from "lodash-es";
Expand All @@ -13,6 +13,10 @@ import {
updateColumnAtom,
IUpdateColumnOptions,
} from "@src/atoms/tableScope";
import {
defaultTableSettingsAtom,
projectScope,
} from "@src/atoms/projectScope";
import { DEBOUNCE_DELAY } from "./Table";
import { ColumnSizingState } from "@tanstack/react-table";

Expand All @@ -26,14 +30,31 @@ export function useSaveColumnSizing(
) {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const updateColumn = useSetAtom(updateColumnAtom, tableScope);
const defaultTableSettings = useAtomValue(
defaultTableSettingsAtom,
projectScope
);

// Debounce for saving to schema
const [debouncedColumnSizing] = useDebounce(columnSizing, DEBOUNCE_DELAY, {
equalityFn: isEqual,
});
// Offer to save when column sizing changes
// Offer to save when column sizing changes, depending on user settings
useEffect(() => {
if (!canEditColumns || isEmpty(debouncedColumnSizing)) return;
// If the user has disabled the popup, return early
if (defaultTableSettings?.saveColumnWidthPopupDisabled) {
// If the user has `automaticallyApplyColumnWidth` set to true, apply the column width before returning
if (defaultTableSettings?.automaticallyApplyColumnWidth) {
const updateTable = async () => {
for (const [key, value] of Object.entries(debouncedColumnSizing)) {
await updateColumn({ key, config: { width: value } });
}
};
updateTable();
}
return;
}

const snackbarId = enqueueSnackbar("Save column sizes for all users?", {
action: (
Expand All @@ -52,6 +73,7 @@ export function useSaveColumnSizing(
enqueueSnackbar,
closeSnackbar,
updateColumn,
defaultTableSettings,
]);

return null;
Expand Down

0 comments on commit 540373d

Please sign in to comment.