diff --git a/front/src/modules/ui/filter-n-sort/states/canPersistFiltersScopedState.ts b/front/src/modules/ui/filter-n-sort/states/canPersistFiltersScopedState.ts new file mode 100644 index 000000000..a704ca3d4 --- /dev/null +++ b/front/src/modules/ui/filter-n-sort/states/canPersistFiltersScopedState.ts @@ -0,0 +1,17 @@ +import { selectorFamily } from 'recoil'; + +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; + +import { filtersScopedState } from './filtersScopedState'; +import { savedFiltersScopedState } from './savedFiltersScopedState'; + +export const canPersistFiltersScopedState = selectorFamily({ + key: 'canPersistFiltersScopedState', + get: + ([scopeId, viewId]: [string, string | undefined]) => + ({ get }) => + !isDeeplyEqual( + get(savedFiltersScopedState(viewId)), + get(filtersScopedState(scopeId)), + ), +}); diff --git a/front/src/modules/ui/filter-n-sort/states/canPersistSortsScopedState.ts b/front/src/modules/ui/filter-n-sort/states/canPersistSortsScopedState.ts new file mode 100644 index 000000000..0502d758f --- /dev/null +++ b/front/src/modules/ui/filter-n-sort/states/canPersistSortsScopedState.ts @@ -0,0 +1,17 @@ +import { selectorFamily } from 'recoil'; + +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; + +import { savedSortsScopedState } from './savedSortsScopedState'; +import { sortsScopedState } from './sortsScopedState'; + +export const canPersistSortsScopedState = selectorFamily({ + key: 'canPersistSortsScopedState', + get: + ([scopeId, viewId]: [string, string | undefined]) => + ({ get }) => + !isDeeplyEqual( + get(savedSortsScopedState(viewId)), + get(sortsScopedState(scopeId)), + ), +}); diff --git a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx index f570c12b4..a93a2d7d4 100644 --- a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx +++ b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx @@ -1,7 +1,7 @@ import { useCallback, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useRecoilCallback, useSetRecoilState } from 'recoil'; +import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; import { Button, ButtonSize } from '@/ui/button/components/Button'; @@ -10,6 +10,8 @@ import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem'; import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton'; import { DropdownMenuContainer } from '@/ui/filter-n-sort/components/DropdownMenuContainer'; +import { canPersistFiltersScopedState } from '@/ui/filter-n-sort/states/canPersistFiltersScopedState'; +import { canPersistSortsScopedState } from '@/ui/filter-n-sort/states/canPersistSortsScopedState'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState'; import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState'; @@ -54,6 +56,12 @@ export const TableUpdateViewButtonGroup = ({ currentTableViewIdState, TableRecoilScopeContext, ); + const canPersistFilters = useRecoilValue( + canPersistFiltersScopedState([tableScopeId, currentViewId]), + ); + const canPersistSorts = useRecoilValue( + canPersistSortsScopedState([tableScopeId, currentViewId]), + ); const setViewEditMode = useSetRecoilState(tableViewEditModeState); const { openDropdownButton: openOptionsDropdownButton } = useDropdownButton({ @@ -104,7 +112,7 @@ export const TableUpdateViewButtonGroup = ({