refactor: move view recoil states to ui/view-bar folder (#1482)
* refactor: move view recoil states to ui/view-bar folder Closes #1481 * refactor: rename some view related Recoil states and selectors
This commit is contained in:
Thaïs
@ -14,29 +14,27 @@ import {
|
||||
IconTrash,
|
||||
} from '@/ui/icon';
|
||||
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
|
||||
import {
|
||||
currentTableViewIdState,
|
||||
currentTableViewState,
|
||||
type TableView,
|
||||
tableViewEditModeState,
|
||||
tableViewsState,
|
||||
} from '@/ui/table/states/tableViewsState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
|
||||
import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import DropdownButton from '@/ui/view-bar/components/DropdownButton';
|
||||
import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
|
||||
import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
|
||||
import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
|
||||
import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
|
||||
import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
|
||||
import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
|
||||
import { currentViewScopedSelector } from '@/ui/view-bar/states/selectors/currentViewScopedSelector';
|
||||
import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
|
||||
import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
|
||||
import { viewsScopedState } from '@/ui/view-bar/states/viewsScopedState';
|
||||
import type { View } from '@/ui/view-bar/types/View';
|
||||
import { ViewsHotkeyScope } from '@/ui/view-bar/types/ViewsHotkeyScope';
|
||||
import { assertNotNull } from '~/utils/assert';
|
||||
|
||||
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';
|
||||
import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
|
||||
import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
|
||||
import { TableViewsHotkeyScope } from '../../types/TableViewsHotkeyScope';
|
||||
|
||||
const StyledBoldDropdownMenuItemsContainer = styled(
|
||||
StyledDropdownMenuItemsContainer,
|
||||
@ -73,8 +71,8 @@ const StyledViewName = styled.span`
|
||||
|
||||
type TableViewsDropdownButtonProps = {
|
||||
defaultViewName: string;
|
||||
HotkeyScope: TableViewsHotkeyScope;
|
||||
onViewsChange?: (views: TableView[]) => void;
|
||||
HotkeyScope: ViewsHotkeyScope;
|
||||
onViewsChange?: (views: View[]) => void;
|
||||
};
|
||||
|
||||
export const TableViewsDropdownButton = ({
|
||||
@ -91,19 +89,19 @@ export const TableViewsDropdownButton = ({
|
||||
key: 'options',
|
||||
});
|
||||
|
||||
const [, setCurrentTableViewId] = useRecoilScopedState(
|
||||
currentTableViewIdState,
|
||||
const [, setCurrentViewId] = useRecoilScopedState(
|
||||
currentViewIdScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const currentTableView = useRecoilScopedValue(
|
||||
currentTableViewState,
|
||||
const currentView = useRecoilScopedValue(
|
||||
currentViewScopedSelector,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const [tableViews, setTableViews] = useRecoilScopedState(
|
||||
tableViewsState,
|
||||
const [views, setViews] = useRecoilScopedState(
|
||||
viewsScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const setViewEditMode = useSetRecoilState(tableViewEditModeState);
|
||||
const setViewEditMode = useSetRecoilState(viewEditModeState);
|
||||
|
||||
const {
|
||||
goBackToPreviousHotkeyScope,
|
||||
@ -114,19 +112,19 @@ export const TableViewsDropdownButton = ({
|
||||
({ set, snapshot }) =>
|
||||
async (viewId: string) => {
|
||||
const savedColumns = await snapshot.getPromise(
|
||||
savedTableColumnsScopedState(viewId),
|
||||
savedTableColumnsFamilyState(viewId),
|
||||
);
|
||||
const savedFilters = await snapshot.getPromise(
|
||||
savedFiltersScopedState(viewId),
|
||||
savedFiltersFamilyState(viewId),
|
||||
);
|
||||
const savedSorts = await snapshot.getPromise(
|
||||
savedSortsScopedState(viewId),
|
||||
savedSortsFamilyState(viewId),
|
||||
);
|
||||
|
||||
set(tableColumnsScopedState(tableScopeId), savedColumns);
|
||||
set(filtersScopedState(tableScopeId), savedFilters);
|
||||
set(sortsScopedState(tableScopeId), savedSorts);
|
||||
set(currentTableViewIdState(tableScopeId), viewId);
|
||||
set(currentViewIdScopedState(tableScopeId), viewId);
|
||||
setIsUnfolded(false);
|
||||
},
|
||||
[tableScopeId],
|
||||
@ -152,21 +150,15 @@ export const TableViewsDropdownButton = ({
|
||||
async (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
|
||||
event.stopPropagation();
|
||||
|
||||
if (currentTableView?.id === viewId) setCurrentTableViewId(undefined);
|
||||
if (currentView?.id === viewId) setCurrentViewId(undefined);
|
||||
|
||||
const nextViews = tableViews.filter((view) => view.id !== viewId);
|
||||
const nextViews = views.filter((view) => view.id !== viewId);
|
||||
|
||||
setTableViews(nextViews);
|
||||
setViews(nextViews);
|
||||
await Promise.resolve(onViewsChange?.(nextViews));
|
||||
setIsUnfolded(false);
|
||||
},
|
||||
[
|
||||
currentTableView?.id,
|
||||
onViewsChange,
|
||||
setCurrentTableViewId,
|
||||
setTableViews,
|
||||
tableViews,
|
||||
],
|
||||
[currentView?.id, onViewsChange, setCurrentViewId, setViews, views],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -186,10 +178,10 @@ export const TableViewsDropdownButton = ({
|
||||
<>
|
||||
<StyledViewIcon size={theme.icon.size.md} />
|
||||
<StyledViewName>
|
||||
{currentTableView?.name || defaultViewName}
|
||||
{currentView?.name || defaultViewName}
|
||||
</StyledViewName>
|
||||
<StyledDropdownLabelAdornments>
|
||||
· {tableViews.length} <IconChevronDown size={theme.icon.size.sm} />
|
||||
· {views.length} <IconChevronDown size={theme.icon.size.sm} />
|
||||
</StyledDropdownLabelAdornments>
|
||||
</>
|
||||
}
|
||||
@ -201,7 +193,7 @@ export const TableViewsDropdownButton = ({
|
||||
menuWidth="auto"
|
||||
>
|
||||
<StyledDropdownMenuItemsContainer>
|
||||
{tableViews.map((view) => (
|
||||
{views.map((view) => (
|
||||
<MenuItem
|
||||
key={view.id}
|
||||
iconButtons={[
|
||||
@ -210,7 +202,7 @@ export const TableViewsDropdownButton = ({
|
||||
onClick: (event: MouseEvent<HTMLButtonElement>) =>
|
||||
handleEditViewButtonClick(event, view.id),
|
||||
},
|
||||
tableViews.length > 1
|
||||
views.length > 1
|
||||
? {
|
||||
Icon: IconTrash,
|
||||
onClick: (event: MouseEvent<HTMLButtonElement>) =>
|
||||
|
||||
Reference in New Issue
Block a user