admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: create view from selected filters and sorts + switch to newly created view on view creation (#1301)

Browse Source 
* feat: create view from selected filters and sorts

Closes #1292

* refactor: use selector to obtain table filters where query option

* refactor: activate exhaustive deps eslint rule for useRecoilCallback

* feat: switch to newly created view on view creation

Closes #1297

* refactor: code review

- use `useCallback` instead of `useRecoilCallback`
- rename `useTableViews` to `useViews`
- move filter-n-sort selectors to /states/selector subfolder
This commit is contained in:
Thaïs
2023-08-25 12:43:21 +02:00
committed by GitHub
parent de569f4c06
commit c3d6451dd0
23 changed files with 233 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
front/src/modules/ui/board/hooks/useCurrentCardSelected.ts
View File

@ -1,5 +1,5 @@
import { useContext } from 'react';
import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';
@ -9,10 +9,9 @@ import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
export function useCurrentCardSelected() {
const currentCardId = useContext(BoardCardIdContext);
const [isCardSelected] = useRecoilState(
const isCardSelected = useRecoilValue(
isCardSelectedFamilyState(currentCardId ?? ''),
);
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
const setCurrentCardSelected = useRecoilCallback(
({ set }) =>
@ -20,9 +19,9 @@ export function useCurrentCardSelected() {
if (!currentCardId) return;
set(isCardSelectedFamilyState(currentCardId), selected);
setActionBarOpenState(true);
set(actionBarOpenState, true);
},
[],
[currentCardId],
);
return {

4
front/src/modules/ui/filter-n-sort/states/selectors/canPersistFiltersScopedState.ts → front/src/modules/ui/filter-n-sort/states/selectors/canPersistFiltersScopedSelector.ts
View File

@ -5,8 +5,8 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { filtersScopedState } from '../filtersScopedState';
import { savedFiltersScopedState } from '../savedFiltersScopedState';
export const canPersistFiltersScopedState = selectorFamily({
key: 'canPersistFiltersScopedState',
export const canPersistFiltersScopedSelector = selectorFamily({
key: 'canPersistFiltersScopedSelector',
get:
([scopeId, viewId]: [string, string | undefined]) =>
({ get }) =>

4
front/src/modules/ui/filter-n-sort/states/selectors/canPersistSortsScopedState.ts → front/src/modules/ui/filter-n-sort/states/selectors/canPersistSortsScopedSelector.ts
View File

@ -5,8 +5,8 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { savedSortsScopedState } from '../savedSortsScopedState';
import { sortsScopedState } from '../sortsScopedState';
export const canPersistSortsScopedState = selectorFamily({
key: 'canPersistSortsScopedState',
export const canPersistSortsScopedSelector = selectorFamily({
key: 'canPersistSortsScopedSelector',
get:
([scopeId, viewId]: [string, string | undefined]) =>
({ get }) =>

13
front/src/modules/ui/filter-n-sort/states/selectors/filtersWhereScopedSelector.ts Normal file
View File

@ -0,0 +1,13 @@
import { selectorFamily } from 'recoil';
import { turnFilterIntoWhereClause } from '../../utils/turnFilterIntoWhereClause';
import { filtersScopedState } from '../filtersScopedState';
export const filtersWhereScopedSelector = selectorFamily({
key: 'filtersWhereScopedSelector',
get:
(param: string) =>
({ get }) => ({
AND: get(filtersScopedState(param)).map(turnFilterIntoWhereClause),
}),
});

5
front/src/modules/ui/filter-n-sort/states/savedFiltersByKeyScopedSelector.ts → front/src/modules/ui/filter-n-sort/states/selectors/savedFiltersByKeyScopedSelector.ts
View File

@ -1,8 +1,7 @@
import { selectorFamily } from 'recoil';
import type { Filter } from '../types/Filter';
import { savedFiltersScopedState } from './savedFiltersScopedState';
import type { Filter } from '../../types/Filter';
import { savedFiltersScopedState } from '../savedFiltersScopedState';
export const savedFiltersByKeyScopedSelector = selectorFamily({
key: 'savedFiltersByKeyScopedSelector',

5
front/src/modules/ui/filter-n-sort/states/savedSortsByKeyScopedSelector.ts → front/src/modules/ui/filter-n-sort/states/selectors/savedSortsByKeyScopedSelector.ts
View File

@ -1,8 +1,7 @@
import { selectorFamily } from 'recoil';
import type { SelectedSortType } from '../types/interface';
import { savedSortsScopedState } from './savedSortsScopedState';
import type { SelectedSortType } from '../../types/interface';
import { savedSortsScopedState } from '../savedSortsScopedState';
export const savedSortsByKeyScopedSelector = selectorFamily({
key: 'savedSortsByKeyScopedSelector',

5
front/src/modules/ui/filter-n-sort/states/sortsOrderByScopedSelector.ts → front/src/modules/ui/filter-n-sort/states/selectors/sortsOrderByScopedSelector.ts
View File

@ -1,8 +1,7 @@
import { selectorFamily } from 'recoil';
import { reduceSortsToOrderBy } from '../helpers';
import { sortsScopedState } from './sortsScopedState';
import { reduceSortsToOrderBy } from '../../helpers';
import { sortsScopedState } from '../sortsScopedState';
export const sortsOrderByScopedSelector = selectorFamily({
key: 'sortsOrderByScopedSelector',

2
front/src/modules/ui/table/components/EntityTableHeader.tsx
View File

@ -136,7 +136,7 @@ export function EntityTableHeader({ onColumnsChange }: EntityTableHeaderProps) {
setInitialPointerPositionX(null);
setResizedFieldId(null);
},
[resizedFieldId, columnsById, setResizedFieldId],
[resizedFieldId, columnsById, columns, onColumnsChange, setColumns],
);
useTrackPointer({

5
front/src/modules/ui/table/hooks/useLeaveTableFocus.ts
View File

@ -1,6 +1,5 @@
import { useRecoilCallback } from 'recoil';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
@ -13,8 +12,6 @@ export function useLeaveTableFocus() {
const disableSoftFocus = useDisableSoftFocus();
const closeCurrentCellInEditMode = useCloseCurrentCellInEditMode();
const setHotkeyScope = useSetHotkeyScope();
return useRecoilCallback(
({ snapshot }) =>
() => {
@ -37,6 +34,6 @@ export function useLeaveTableFocus() {
closeCurrentCellInEditMode();
disableSoftFocus();
},
[setHotkeyScope, closeCurrentCellInEditMode, disableSoftFocus],
[closeCurrentCellInEditMode, disableSoftFocus],
);
}

2
front/src/modules/ui/table/hooks/useSetEntityTableData.ts
View File

@ -50,6 +50,6 @@ export function useSetEntityTableData() {
set(isFetchingEntityTableDataState, false);
},
[],
[resetTableRowSelection, tableContextScopeId],
);
}

74
front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx
View File

@ -1,6 +1,6 @@
import { type FormEvent, useCallback, useRef, useState } from 'react';
import { useTheme } from '@emotion/react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { v4 } from 'uuid';
@ -16,6 +16,10 @@ import type {
ViewFieldDefinition,
ViewFieldMetadata,
} from '@/ui/editable-field/types/ViewField';
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';
import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
import {
IconChevronLeft,
IconFileImport,
@ -29,11 +33,12 @@ import {
visibleTableColumnsState,
} from '@/ui/table/states/tableColumnsState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
import {
currentTableViewIdState,
type TableView,
tableViewEditModeState,
tableViewsByIdState,
@ -60,6 +65,8 @@ export function TableOptionsDropdownContent({
}: TableOptionsDropdownButtonProps) {
const theme = useTheme();
const tableScopeId = useContextScopeId(TableRecoilScopeContext);
const { closeDropdownButton } = useDropdownButton({ key: 'options' });
const [selectedOption, setSelectedOption] = useState<Option | undefined>(
@ -72,10 +79,6 @@ export function TableOptionsDropdownContent({
const [viewEditMode, setViewEditMode] = useRecoilState(
tableViewEditModeState,
);
const [views, setViews] = useRecoilScopedState(
tableViewsState,
TableRecoilScopeContext,
);
const visibleColumns = useRecoilValue(visibleTableColumnsState);
const hiddenColumns = useRecoilValue(hiddenTableColumnsState);
const viewsById = useRecoilScopedValue(
@ -124,31 +127,56 @@ export function TableOptionsDropdownContent({
}
}, [setViewEditMode]);
const handleViewNameSubmit = useCallback(
(event?: FormEvent) => {
event?.preventDefault();
const handleViewNameSubmit = useRecoilCallback(
({ set, snapshot }) =>
async (event?: FormEvent) => {
event?.preventDefault();
if (viewEditMode.mode && viewEditInputRef.current?.value) {
const name = viewEditInputRef.current.value;
const nextViews =
viewEditMode.mode === 'create'
? [...views, { id: v4(), name }]
: views.map((view) =>
view.id === viewEditMode.viewId ? { ...view, name } : view,
);
const name = viewEditInputRef.current?.value;
(onViewsChange ?? setViews)(nextViews);
}
if (!viewEditMode.mode || !name) {
return resetViewEditMode();
}
resetViewEditMode();
},
const views = await snapshot.getPromise(tableViewsState(tableScopeId));
if (viewEditMode.mode === 'create') {
const viewToCreate = { id: v4(), name };
const nextViews = [...views, viewToCreate];
const selectedFilters = await snapshot.getPromise(
filtersScopedState(tableScopeId),
);
set(savedFiltersScopedState(viewToCreate.id), selectedFilters);
const selectedSorts = await snapshot.getPromise(
sortsScopedState(tableScopeId),
);
set(savedSortsScopedState(viewToCreate.id), selectedSorts);
set(tableViewsState(tableScopeId), nextViews);
await Promise.resolve(onViewsChange?.(nextViews));
set(currentTableViewIdState(tableScopeId), viewToCreate.id);
}
if (viewEditMode.mode === 'edit') {
const nextViews = views.map((view) =>
view.id === viewEditMode.viewId ? { ...view, name } : view,
);
set(tableViewsState(tableScopeId), nextViews);
await Promise.resolve(onViewsChange?.(nextViews));
}
return resetViewEditMode();
},
[
onViewsChange,
resetViewEditMode,
setViews,
tableScopeId,
viewEditMode.mode,
viewEditMode.viewId,
views,
],
);

2
front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
View File

@ -97,7 +97,7 @@ export const TableUpdateViewButtonGroup = ({
);
set(savedSortsScopedState(currentViewId), selectedSorts);
},
[currentViewId, onViewSubmit],
[currentViewId, onViewSubmit, tableScopeId],
);
useScopedHotkeys(

19
front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
View File

@ -73,6 +73,10 @@ export const TableViewsDropdownButton = ({
key: 'options',
});
const [, setCurrentViewId] = useRecoilScopedState(
currentTableViewIdState,
TableRecoilScopeContext,
);
const currentView = useRecoilScopedValue(
currentTableViewState,
TableRecoilScopeContext,
@ -81,10 +85,6 @@ export const TableViewsDropdownButton = ({
tableViewsState,
TableRecoilScopeContext,
);
const [, setCurrentViewId] = useRecoilScopedState(
currentTableViewIdState,
TableRecoilScopeContext,
);
const setViewEditMode = useSetRecoilState(tableViewEditModeState);
const {
@ -104,10 +104,10 @@ export const TableViewsDropdownButton = ({
set(filtersScopedState(tableScopeId), savedFilters);
set(sortsScopedState(tableScopeId), savedSorts);
setCurrentViewId(viewId);
set(currentTableViewIdState(tableScopeId), viewId);
setIsUnfolded(false);
},
[setCurrentViewId],
[tableScopeId],
);
const handleAddViewButtonClick = useCallback(() => {
@ -126,12 +126,15 @@ export const TableViewsDropdownButton = ({
);
const handleDeleteViewButtonClick = useCallback(
(event: MouseEvent<HTMLButtonElement>, viewId: string) => {
async (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
event.stopPropagation();
if (currentView?.id === viewId) setCurrentViewId(undefined);
(onViewsChange ?? setViews)(views.filter((view) => view.id !== viewId));
const nextViews = views.filter((view) => view.id !== viewId);
setViews(nextViews);
await Promise.resolve(onViewsChange?.(nextViews));
setIsUnfolded(false);
},
[currentView?.id, onViewsChange, setCurrentViewId, setViews, views],

4
front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts
View File

@ -27,7 +27,7 @@ export function usePreviousHotkeyScope() {
set(previousHotkeyScopeState, null);
},
[],
[setHotkeyScope],
);
const setHotkeyScopeAndMemorizePreviousScope = useRecoilCallback(
@ -40,7 +40,7 @@ export function usePreviousHotkeyScope() {
setHotkeyScope(scope, customScopes);
set(previousHotkeyScopeState, currentHotkeyScope);
},
[],
[setHotkeyScope],
);
return {