From 878302dd312208e41c407cc4573567145f791c47 Mon Sep 17 00:00:00 2001 From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Date: Tue, 5 Sep 2023 11:34:11 +0300 Subject: [PATCH] =?UTF-8?q?[ESLint=20rule]:=20recoil=20value=20and=20sette?= =?UTF-8?q?r=20should=20be=20named=20after=20their=20at=E2=80=A6=20(#1402)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Override unwanted changes Co-authored-by: v1b3m Co-authored-by: Toledodev Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> * Fix the tests Co-authored-by: v1b3m Co-authored-by: Toledodev Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> --------- Co-authored-by: v1b3m Co-authored-by: Toledodev Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> Co-authored-by: Charles Bochet --- front/.eslintrc.js | 1 + .../components/ActivityAssigneePicker.tsx | 4 +- ...enCreateActivityDrawerForSelectedRowIds.ts | 4 +- .../create/RightDrawerCreateActivity.tsx | 6 +- .../edit/RightDrawerEditActivity.tsx | 10 +- .../components/ClientConfigProvider.tsx | 12 +-- .../command-menu/components/CommandMenu.tsx | 10 +- .../command-menu/hooks/useCommandMenu.ts | 8 +- .../companies/components/CompanyPicker.tsx | 11 +-- .../components/CompanyPickerCell.tsx | 14 +-- .../components/HooksCompanyBoard.tsx | 4 +- .../components/NewCompanyProgressButton.tsx | 6 +- .../hooks/useCreateCompanyProgress.ts | 8 +- .../table/components/CompanyTable.tsx | 10 +- .../table/components/CompanyTableMockData.tsx | 6 +- .../people/components/PeoplePicker.tsx | 4 +- .../people/table/components/PeopleTable.tsx | 10 +- .../components/SpreadsheetImportProvider.tsx | 22 ++--- .../ui/action-bar/components/ActionBar.tsx | 4 +- .../ui/board/components/BoardColumnMenu.tsx | 6 +- .../board/components/EntityBoardActionBar.tsx | 4 +- .../components/EntityBoardContextMenu.tsx | 4 +- .../context-menu/components/ContextMenu.tsx | 8 +- .../ui/dialog/components/DialogProvider.tsx | 11 ++- .../ui/dropdown/components/DropdownButton.tsx | 2 +- .../FilterDropdownOperandButton.tsx | 16 ++-- .../FilterDropdownOperandSelect.tsx | 16 ++-- .../MultipleFiltersDropdownButton.tsx | 8 +- .../components/SortAndFilterBar.tsx | 4 +- .../components/SortDropdownButton.tsx | 4 +- .../hooks/useEntitySelectScroll.ts | 21 ++--- .../hooks/useEntitySelectSearch.ts | 25 ++--- .../navbar/components/NavCollapseButton.tsx | 7 +- .../components/NavbarAnimatedContainer.tsx | 6 +- .../ui/navbar/components/SupportChat.tsx | 30 +++--- .../components/RightDrawerTopBar.tsx | 4 +- .../snack-bar/components/SnackBarProvider.tsx | 6 +- .../modules/ui/step-bar/hooks/useStepBar.ts | 15 +-- .../ui/table/components/EntityTableBody.tsx | 6 +- .../components/EntityTableColumnMenu.tsx | 4 +- .../ui/table/components/EntityTableHeader.tsx | 44 ++++----- .../ui/table/components/EntityTableRow.tsx | 4 +- .../modules/ui/table/hooks/useTableColumns.ts | 11 +-- .../TableOptionsDropdownContent.tsx | 46 +++++----- .../components/TableUpdateViewButtonGroup.tsx | 37 ++++---- .../components/TableViewsDropdownButton.tsx | 28 +++--- .../drag-select/hooks/useDragSelect.ts | 4 +- .../modules/users/components/UserPicker.tsx | 4 +- .../src/modules/views/hooks/useTableViews.ts | 27 +++--- front/src/modules/views/hooks/useViews.ts | 21 +++-- packages/eslint-plugin-twenty/index.js | 2 + .../rules/matching-state-variable.js | 92 +++++++++++++++++++ 52 files changed, 400 insertions(+), 281 deletions(-) create mode 100644 packages/eslint-plugin-twenty/rules/matching-state-variable.js diff --git a/front/.eslintrc.js b/front/.eslintrc.js index cf053e15ef..48c5dd70d2 100644 --- a/front/.eslintrc.js +++ b/front/.eslintrc.js @@ -49,6 +49,7 @@ module.exports = { 'twenty/sort-css-properties-alphabetically': 'error', 'twenty/no-hardcoded-colors': 'error', 'twenty/styled-components-prefixed-with-styled': 'error', + 'twenty/matching-state-variable': 'error', 'func-style':['error', 'declaration', { 'allowArrowFunctions': true }], "@typescript-eslint/no-unused-vars": "off", "no-unused-vars": "off", diff --git a/front/src/modules/activities/components/ActivityAssigneePicker.tsx b/front/src/modules/activities/components/ActivityAssigneePicker.tsx index 96428a77e2..8fcf436b38 100644 --- a/front/src/modules/activities/components/ActivityAssigneePicker.tsx +++ b/front/src/modules/activities/components/ActivityAssigneePicker.tsx @@ -32,7 +32,7 @@ export function ActivityAssigneePicker({ onSubmit, onCancel, }: OwnProps) { - const [searchFilter] = useRecoilScopedState( + const [relationPickerSearchFilter] = useRecoilScopedState( relationPickerSearchFilterScopedState, ); const [updateActivity] = useUpdateActivityMutation(); @@ -40,7 +40,7 @@ export function ActivityAssigneePicker({ const users = useFilteredSearchEntityQuery({ queryHook: useSearchUserQuery, selectedIds: activity?.accountOwner?.id ? [activity?.accountOwner?.id] : [], - searchFilter: searchFilter, + searchFilter: relationPickerSearchFilter, mappingFunction: (user) => ({ entityType: Entity.User, id: user.id, diff --git a/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts b/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts index da1af377f8..f7359fe2a7 100644 --- a/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts +++ b/front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts @@ -11,7 +11,7 @@ import { import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer'; export function useOpenCreateActivityDrawerForSelectedRowIds() { - const selectedEntityIds = useRecoilValue(selectedRowIdsSelector); + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); const openCreateActivityDrawer = useOpenCreateActivityDrawer(); @@ -20,7 +20,7 @@ export function useOpenCreateActivityDrawerForSelectedRowIds() { entityType: ActivityTargetableEntityType, ) { const activityTargetableEntityArray: ActivityTargetableEntity[] = - selectedEntityIds.map((id) => ({ + selectedRowIds.map((id) => ({ type: entityType, id, })); diff --git a/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx b/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx index 80b19f7586..323f28f27c 100644 --- a/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx +++ b/front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx @@ -5,13 +5,13 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS import { RightDrawerActivity } from '../RightDrawerActivity'; export function RightDrawerCreateActivity() { - const activityId = useRecoilValue(viewableActivityIdState); + const viewableActivityId = useRecoilValue(viewableActivityIdState); return ( <> - {activityId && ( + {viewableActivityId && ( diff --git a/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx b/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx index f4fdeaf5e6..af2d07eab2 100644 --- a/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx +++ b/front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx @@ -5,7 +5,13 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS import { RightDrawerActivity } from '../RightDrawerActivity'; export function RightDrawerEditActivity() { - const activityId = useRecoilValue(viewableActivityIdState); + const viewableActivityId = useRecoilValue(viewableActivityIdState); - return <>{activityId && }; + return ( + <> + {viewableActivityId && ( + + )} + + ); } diff --git a/front/src/modules/client-config/components/ClientConfigProvider.tsx b/front/src/modules/client-config/components/ClientConfigProvider.tsx index 20b0e009e8..e0dd366663 100644 --- a/front/src/modules/client-config/components/ClientConfigProvider.tsx +++ b/front/src/modules/client-config/components/ClientConfigProvider.tsx @@ -12,8 +12,8 @@ export const ClientConfigProvider: React.FC = ({ children, }) => { const [, setAuthProviders] = useRecoilState(authProvidersState); - const [, setDebugMode] = useRecoilState(isDebugModeState); - const [, setSignInPrefilled] = useRecoilState(isSignInPrefilledState); + const [, setIsDebugMode] = useRecoilState(isDebugModeState); + const [, setIsSignInPrefilled] = useRecoilState(isSignInPrefilledState); const [, setTelemetry] = useRecoilState(telemetryState); const [isLoading, setIsLoading] = useState(true); const setSupportChat = useSetRecoilState(supportChatState); @@ -30,16 +30,16 @@ export const ClientConfigProvider: React.FC = ({ password: data?.clientConfig.authProviders.password, magicLink: false, }); - setDebugMode(data?.clientConfig.debugMode); - setSignInPrefilled(data?.clientConfig.signInPrefilled); + setIsDebugMode(data?.clientConfig.debugMode); + setIsSignInPrefilled(data?.clientConfig.signInPrefilled); setTelemetry(data?.clientConfig.telemetry); setSupportChat(data?.clientConfig.support); } }, [ data, setAuthProviders, - setDebugMode, - setSignInPrefilled, + setIsDebugMode, + setIsSignInPrefilled, setTelemetry, setIsLoading, loading, diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx index bf52cf08e6..935ff0a20d 100644 --- a/front/src/modules/command-menu/components/CommandMenu.tsx +++ b/front/src/modules/command-menu/components/CommandMenu.tsx @@ -33,7 +33,7 @@ export function CommandMenu() { const openActivityRightDrawer = useOpenActivityRightDrawer(); const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); const [search, setSearch] = useState(''); - const commands = useRecoilValue(commandMenuCommandsState); + const commandMenuCommands = useRecoilValue(commandMenuCommandsState); useScopedHotkeys( 'ctrl+k,meta+k', @@ -80,13 +80,13 @@ export function CommandMenu() { }); const activities = activityData?.searchResults ?? []; - const matchingNavigateCommand = commands.find( + const matchingNavigateCommand = commandMenuCommands.find( (cmd) => cmd.shortcuts?.join('') === search?.toUpperCase() && cmd.type === CommandType.Navigate, ); - const matchingCreateCommand = commands.find( + const matchingCreateCommand = commandMenuCommands.find( (cmd) => cmd.shortcuts?.join('') === search?.toUpperCase() && cmd.type === CommandType.Create, @@ -112,7 +112,7 @@ export function CommandMenu() { No results found. {!matchingCreateCommand && ( - {commands + {commandMenuCommands .filter((cmd) => cmd.type === CommandType.Create) .map((cmd) => ( - {commands + {commandMenuCommands .filter( (cmd) => (cmd.shortcuts?.join('').includes(search?.toUpperCase()) || diff --git a/front/src/modules/command-menu/hooks/useCommandMenu.ts b/front/src/modules/command-menu/hooks/useCommandMenu.ts index 96fe53551e..95e27625b0 100644 --- a/front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -9,9 +9,7 @@ import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState'; import { Command } from '../types/Command'; export function useCommandMenu() { - const [, setIsCommandMenuOpenedState] = useRecoilState( - isCommandMenuOpenedState, - ); + const [, setIsCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState); const setCommands = useSetRecoilState(commandMenuCommandsState); const { setHotkeyScopeAndMemorizePreviousScope, @@ -19,12 +17,12 @@ export function useCommandMenu() { } = usePreviousHotkeyScope(); function openCommandMenu() { - setIsCommandMenuOpenedState(true); + setIsCommandMenuOpened(true); setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenu); } function closeCommandMenu() { - setIsCommandMenuOpenedState(false); + setIsCommandMenuOpened(false); goBackToPreviousHotkeyScope(); } diff --git a/front/src/modules/companies/components/CompanyPicker.tsx b/front/src/modules/companies/components/CompanyPicker.tsx index 9864c2172c..4666e6c804 100644 --- a/front/src/modules/companies/components/CompanyPicker.tsx +++ b/front/src/modules/companies/components/CompanyPicker.tsx @@ -14,12 +14,11 @@ export type OwnProps = { }; export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) { - const [searchFilter, setSearchFilter] = useRecoilScopedState( - relationPickerSearchFilterScopedState, - ); + const [relationPickerSearchFilter, setRelationPickerSearchFilter] = + useRecoilScopedState(relationPickerSearchFilterScopedState); const companies = useFilteredSearchCompanyQuery({ - searchFilter, + searchFilter: relationPickerSearchFilter, selectedIds: companyId ? [companyId] : [], }); @@ -30,8 +29,8 @@ export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) { } useEffect(() => { - setSearchFilter(''); - }, [setSearchFilter]); + setRelationPickerSearchFilter(''); + }, [setRelationPickerSearchFilter]); return ( diff --git a/front/src/modules/companies/hooks/useCreateCompanyProgress.ts b/front/src/modules/companies/hooks/useCreateCompanyProgress.ts index 46135450aa..134c0f70b7 100644 --- a/front/src/modules/companies/hooks/useCreateCompanyProgress.ts +++ b/front/src/modules/companies/hooks/useCreateCompanyProgress.ts @@ -17,12 +17,12 @@ export function useCreateCompanyProgress() { ], }); - const [pipeline] = useRecoilState(currentPipelineState); + const [currentPipeline] = useRecoilState(currentPipelineState); return useRecoilCallback( ({ set }) => async (companyId: string, pipelineStageId: string) => { - if (!pipeline?.id) { + if (!currentPipeline?.id) { throw new Error('Pipeline not found'); } @@ -37,11 +37,11 @@ export function useCreateCompanyProgress() { variables: { uuid: newUuid, pipelineStageId: pipelineStageId, - pipelineId: pipeline?.id ?? '', + pipelineId: currentPipeline?.id ?? '', companyId: companyId, }, }); }, - [createOneCompanyPipelineProgress, pipeline], + [createOneCompanyPipelineProgress, currentPipeline], ); } diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 7730416d62..7260a716bd 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -21,11 +21,11 @@ import { companiesFilters } from '~/pages/companies/companies-filters'; import { availableSorts } from '~/pages/companies/companies-sorts'; export function CompanyTable() { - const orderBy = useRecoilScopedValue( + const sortsOrderBy = useRecoilScopedValue( sortsOrderByScopedSelector, TableRecoilScopeContext, ); - const whereFilters = useRecoilScopedValue( + const filtersWhere = useRecoilScopedValue( filtersWhereScopedSelector, TableRecoilScopeContext, ); @@ -55,8 +55,10 @@ export function CompanyTable() { getRequestResultKey="companies" useGetRequest={useGetCompaniesQuery} getRequestOptimisticEffect={getCompaniesOptimisticEffect} - orderBy={orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }]} - whereFilters={whereFilters} + orderBy={ + sortsOrderBy.length ? sortsOrderBy : [{ createdAt: SortOrder.Desc }] + } + whereFilters={filtersWhere} filterDefinitionArray={companiesFilters} setContextMenuEntries={setContextMenuEntries} setActionBarEntries={setActionBarEntries} diff --git a/front/src/modules/companies/table/components/CompanyTableMockData.tsx b/front/src/modules/companies/table/components/CompanyTableMockData.tsx index 40199dc7c5..18417a975a 100644 --- a/front/src/modules/companies/table/components/CompanyTableMockData.tsx +++ b/front/src/modules/companies/table/components/CompanyTableMockData.tsx @@ -10,7 +10,7 @@ import { companiesAvailableColumnDefinitions } from '../../constants/companiesAv import { mockedCompaniesData } from './companies-mock-data'; export function CompanyTableMockData() { - const [, setColumns] = useRecoilScopedState( + const [, setTableColumns] = useRecoilScopedState( tableColumnsScopedState, TableRecoilScopeContext, ); @@ -19,8 +19,8 @@ export function CompanyTableMockData() { useEffect(() => { setEntityTableData(mockedCompaniesData, []); - setColumns(companiesAvailableColumnDefinitions); - }, [setColumns, setEntityTableData]); + setTableColumns(companiesAvailableColumnDefinitions); + }, [setEntityTableData, setTableColumns]); return <>; } diff --git a/front/src/modules/people/components/PeoplePicker.tsx b/front/src/modules/people/components/PeoplePicker.tsx index e2b2cfd465..aaf12d18bb 100644 --- a/front/src/modules/people/components/PeoplePicker.tsx +++ b/front/src/modules/people/components/PeoplePicker.tsx @@ -25,14 +25,14 @@ export function PeoplePicker({ onCreate, excludePersonIds, }: OwnProps) { - const [searchFilter] = useRecoilScopedState( + const [relationPickerSearchFilter] = useRecoilScopedState( relationPickerSearchFilterScopedState, ); const people = useFilteredSearchEntityQuery({ queryHook: useSearchPeopleQuery, selectedIds: [personId ?? ''], - searchFilter: searchFilter, + searchFilter: relationPickerSearchFilter, mappingFunction: (person) => ({ entityType: Entity.Person, id: person.id, diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index fb08410c8a..0bbfc20011 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -21,11 +21,11 @@ import { peopleFilters } from '~/pages/people/people-filters'; import { availableSorts } from '~/pages/people/people-sorts'; export function PeopleTable() { - const orderBy = useRecoilScopedValue( + const sortsOrderBy = useRecoilScopedValue( sortsOrderByScopedSelector, TableRecoilScopeContext, ); - const whereFilters = useRecoilScopedValue( + const filtersWhere = useRecoilScopedValue( filtersWhereScopedSelector, TableRecoilScopeContext, ); @@ -54,8 +54,10 @@ export function PeopleTable() { getRequestResultKey="people" useGetRequest={useGetPeopleQuery} getRequestOptimisticEffect={getPeopleOptimisticEffect} - orderBy={orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }]} - whereFilters={whereFilters} + orderBy={ + sortsOrderBy.length ? sortsOrderBy : [{ createdAt: SortOrder.Desc }] + } + whereFilters={filtersWhere} filterDefinitionArray={peopleFilters} setContextMenuEntries={setContextMenuEntries} setActionBarEntries={setActionBarEntries} diff --git a/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx b/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx index 58dad0954f..27a01fd12c 100644 --- a/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx +++ b/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx @@ -10,11 +10,12 @@ type SpreadsheetImportProviderProps = React.PropsWithChildren; export const SpreadsheetImportProvider = ( props: SpreadsheetImportProviderProps, ) => { - const [spreadsheetImportInternalState, setSpreadsheetImportInternalState] = - useRecoilState(spreadsheetImportState); + const [spreadsheetImport, setSpreadsheetImport] = useRecoilState( + spreadsheetImportState, + ); function handleClose() { - setSpreadsheetImportInternalState({ + setSpreadsheetImport({ isOpen: false, options: null, }); @@ -23,14 +24,13 @@ export const SpreadsheetImportProvider = ( return ( <> {props.children} - {spreadsheetImportInternalState.isOpen && - spreadsheetImportInternalState.options && ( - - )} + {spreadsheetImport.isOpen && spreadsheetImport.options && ( + + )} ); }; diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx index 88df4e7386..bfbb4d0f91 100644 --- a/front/src/modules/ui/action-bar/components/ActionBar.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx @@ -33,11 +33,11 @@ const StyledContainerActionBar = styled.div` export function ActionBar({ selectedIds }: OwnProps) { const actionBarOpen = useRecoilValue(actionBarOpenState); - const contextMenuOpen = useRecoilValue(contextMenuIsOpenState); + const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState); const actionBarEntries = useRecoilValue(actionBarEntriesState); const wrapperRef = useRef(null); - if (selectedIds.length === 0 || !actionBarOpen || contextMenuOpen) { + if (selectedIds.length === 0 || !actionBarOpen || contextMenuIsOpen) { return null; } return ( diff --git a/front/src/modules/ui/board/components/BoardColumnMenu.tsx b/front/src/modules/ui/board/components/BoardColumnMenu.tsx index 49632e1a10..6c23866b0f 100644 --- a/front/src/modules/ui/board/components/BoardColumnMenu.tsx +++ b/front/src/modules/ui/board/components/BoardColumnMenu.tsx @@ -106,10 +106,12 @@ export function BoardColumnMenu({ } setCurrentMenu(menu); } - const [searchFilter] = useRecoilScopedState( + const [relationPickerSearchFilter] = useRecoilScopedState( relationPickerSearchFilterScopedState, ); - const companies = useFilteredSearchCompanyQuery({ searchFilter }); + const companies = useFilteredSearchCompanyQuery({ + searchFilter: relationPickerSearchFilter, + }); useListenClickOutside({ refs: [boardColumnMenuRef], diff --git a/front/src/modules/ui/board/components/EntityBoardActionBar.tsx b/front/src/modules/ui/board/components/EntityBoardActionBar.tsx index 149f48fddf..1a54301936 100644 --- a/front/src/modules/ui/board/components/EntityBoardActionBar.tsx +++ b/front/src/modules/ui/board/components/EntityBoardActionBar.tsx @@ -6,6 +6,6 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar'; import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector'; export function EntityBoardActionBar() { - const selectedBoardCards = useRecoilValue(selectedCardIdsSelector); - return ; + const selectedCardIds = useRecoilValue(selectedCardIdsSelector); + return ; } diff --git a/front/src/modules/ui/board/components/EntityBoardContextMenu.tsx b/front/src/modules/ui/board/components/EntityBoardContextMenu.tsx index a0b5821707..2ff9a61f34 100644 --- a/front/src/modules/ui/board/components/EntityBoardContextMenu.tsx +++ b/front/src/modules/ui/board/components/EntityBoardContextMenu.tsx @@ -6,6 +6,6 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu'; import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector'; export function EntityBoardContextMenu() { - const selectedBoardCards = useRecoilValue(selectedCardIdsSelector); - return ; + const selectedCardIds = useRecoilValue(selectedCardIdsSelector); + return ; } diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx index e55b1dd1c2..dc15689993 100644 --- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx @@ -40,8 +40,8 @@ const StyledContainerContextMenu = styled.div` `; export function ContextMenu({ selectedIds }: OwnProps) { - const position = useRecoilValue(contextMenuPositionState); - const contextMenuOpen = useRecoilValue(contextMenuIsOpenState); + const contextMenuPosition = useRecoilValue(contextMenuPositionState); + const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState); const contextMenuEntries = useRecoilValue(contextMenuEntriesState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); const setActionBarOpenState = useSetRecoilState(actionBarOpenState); @@ -55,14 +55,14 @@ export function ContextMenu({ selectedIds }: OwnProps) { }, }); - if (selectedIds.length === 0 || !contextMenuOpen) { + if (selectedIds.length === 0 || !contextMenuIsOpen) { return null; } return ( diff --git a/front/src/modules/ui/dialog/components/DialogProvider.tsx b/front/src/modules/ui/dialog/components/DialogProvider.tsx index 52bb329194..7126f462d9 100644 --- a/front/src/modules/ui/dialog/components/DialogProvider.tsx +++ b/front/src/modules/ui/dialog/components/DialogProvider.tsx @@ -9,7 +9,8 @@ import { DialogHotkeyScope } from '../types/DialogHotkeyScope'; import { Dialog } from './Dialog'; export function DialogProvider({ children }: React.PropsWithChildren) { - const [dialogState, setDialogState] = useRecoilState(dialogInternalState); + const [dialogInternal, setDialogInternal] = + useRecoilState(dialogInternalState); const { setHotkeyScopeAndMemorizePreviousScope, @@ -18,7 +19,7 @@ export function DialogProvider({ children }: React.PropsWithChildren) { // Handle dialog close event const handleDialogClose = (id: string) => { - setDialogState((prevState) => ({ + setDialogInternal((prevState) => ({ ...prevState, queue: prevState.queue.filter((snackBar) => snackBar.id !== id), })); @@ -26,17 +27,17 @@ export function DialogProvider({ children }: React.PropsWithChildren) { }; useEffect(() => { - if (dialogState.queue.length === 0) { + if (dialogInternal.queue.length === 0) { return; } setHotkeyScopeAndMemorizePreviousScope(DialogHotkeyScope.Dialog); - }, [dialogState.queue, setHotkeyScopeAndMemorizePreviousScope]); + }, [dialogInternal.queue, setHotkeyScopeAndMemorizePreviousScope]); return ( <> {children} - {dialogState.queue.map((dialog) => ( + {dialogInternal.queue.map((dialog) => ( } - onClick={() => setIsOperandSelectionUnfolded(true)} + onClick={() => setIsFilterDropdownOperandSelectUnfolded(true)} > {getOperandLabel(selectedOperandInDropdown)} diff --git a/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx b/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx index 2a234c79f1..3bb430e14d 100644 --- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx +++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx @@ -32,11 +32,13 @@ export function FilterDropdownOperandSelect({ filterDefinitionUsedInDropdown?.type, ); - const [isOperandSelectionUnfolded, setIsOperandSelectionUnfolded] = - useRecoilScopedState( - isFilterDropdownOperandSelectUnfoldedScopedState, - context, - ); + const [ + isFilterDropdownOperandSelectUnfolded, + setIsFilterDropdownOperandSelectUnfolded, + ] = useRecoilScopedState( + isFilterDropdownOperandSelectUnfoldedScopedState, + context, + ); const filterCurrentlyEdited = useFilterCurrentlyEdited(context); @@ -44,7 +46,7 @@ export function FilterDropdownOperandSelect({ function handleOperangeChange(newOperand: FilterOperand) { setSelectedOperandInDropdown(newOperand); - setIsOperandSelectionUnfolded(false); + setIsFilterDropdownOperandSelectUnfolded(false); if (filterDefinitionUsedInDropdown && filterCurrentlyEdited) { upsertFilter({ @@ -57,7 +59,7 @@ export function FilterDropdownOperandSelect({ } } - if (!isOperandSelectionUnfolded) { + if (!isFilterDropdownOperandSelectUnfolded) { return <>; } diff --git a/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx index dd60a11bd4..7b0acee048 100644 --- a/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/MultipleFiltersDropdownButton.tsx @@ -76,12 +76,14 @@ export function MultipleFiltersDropdownButton({ const setHotkeyScope = useSetHotkeyScope(); - const [isSortAndFilterBarOpen, setIsSortAndFilterBarOpen] = - useRecoilScopedState(sortAndFilterBarScopedState, context); + const [sortAndFilterBar, setSortAndFilterBar] = useRecoilScopedState( + sortAndFilterBarScopedState, + context, + ); function handleIsUnfoldedChange(unfolded: boolean) { if (unfolded && isPrimaryButton) { - setIsSortAndFilterBarOpen(!isSortAndFilterBarOpen); + setSortAndFilterBar(!sortAndFilterBar); } if ( diff --git a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx index 90b69c832c..421fd09560 100644 --- a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx +++ b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx @@ -119,7 +119,7 @@ function SortAndFilterBar({ context, ); - const [isSortAndFilterBarOpen] = useRecoilScopedState( + const [sortAndFilterBar] = useRecoilScopedState( sortAndFilterBarScopedState, context, ); @@ -144,7 +144,7 @@ function SortAndFilterBar({ if ( (!canToggle && !filtersWithDefinition.length && !sorts.length) || - !isSortAndFilterBarOpen + !sortAndFilterBar ) { return null; } diff --git a/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx index d8b3855dea..382fd618d9 100644 --- a/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx @@ -52,7 +52,7 @@ export function SortDropdownButton({ setSelectedSortDirection('asc'); }, []); - const [, setIsSortAndFilterBarOpen] = useRecoilScopedState( + const [, setSortAndFilterBar] = useRecoilScopedState( sortAndFilterBarScopedState, context, ); @@ -69,7 +69,7 @@ export function SortDropdownButton({ function handleAddSort(sort: SortType) { setIsUnfolded(false); onSortItemSelect(sort); - setIsSortAndFilterBarOpen(true); + setSortAndFilterBar(true); } return ( diff --git a/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts b/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts index 763170d303..e69e1cf906 100644 --- a/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts +++ b/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts @@ -17,12 +17,11 @@ export function useEntitySelectScroll< entities: CustomEntityForSelect[]; containerRef: React.RefObject; }) { - const [hoveredIndex, setHoveredIndex] = useRecoilScopedState( - relationPickerHoverIndexScopedState, - ); + const [relationPickerHoverIndex, setRelationPickerHoverIndex] = + useRecoilScopedState(relationPickerHoverIndexScopedState); function resetScroll() { - setHoveredIndex(0); + setRelationPickerHoverIndex(0); const currentHoveredRef = containerRef.current?.children[0] as HTMLElement; @@ -40,12 +39,12 @@ export function useEntitySelectScroll< useScopedHotkeys( Key.ArrowUp, () => { - setHoveredIndex((prevSelectedIndex) => + setRelationPickerHoverIndex((prevSelectedIndex) => Math.max(prevSelectedIndex - 1, 0), ); const currentHoveredRef = containerRef.current?.children[ - hoveredIndex + relationPickerHoverIndex ] as HTMLElement; if (currentHoveredRef) { @@ -61,18 +60,18 @@ export function useEntitySelectScroll< } }, RelationPickerHotkeyScope.RelationPicker, - [setHoveredIndex, entities], + [setRelationPickerHoverIndex, entities], ); useScopedHotkeys( Key.ArrowDown, () => { - setHoveredIndex((prevSelectedIndex) => + setRelationPickerHoverIndex((prevSelectedIndex) => Math.min(prevSelectedIndex + 1, (entities?.length ?? 0) - 1), ); const currentHoveredRef = containerRef.current?.children[ - hoveredIndex + relationPickerHoverIndex ] as HTMLElement; if (currentHoveredRef) { @@ -88,11 +87,11 @@ export function useEntitySelectScroll< } }, RelationPickerHotkeyScope.RelationPicker, - [setHoveredIndex, entities], + [setRelationPickerHoverIndex, entities], ); return { - hoveredIndex, + hoveredIndex: relationPickerHoverIndex, resetScroll, }; } diff --git a/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts b/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts index b5c341c2cf..cc91befcd9 100644 --- a/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts +++ b/front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts @@ -7,31 +7,34 @@ import { relationPickerHoverIndexScopedState } from '../states/relationPickerHov import { relationPickerSearchFilterScopedState } from '../states/relationPickerSearchFilterScopedState'; export function useEntitySelectSearch() { - const [, setHoveredIndex] = useRecoilScopedState( + const [, setRelationPickerHoverIndex] = useRecoilScopedState( relationPickerHoverIndexScopedState, ); - const [searchFilter, setSearchFilter] = useRecoilScopedState( - relationPickerSearchFilterScopedState, - ); + const [relationPickerSearchFilter, setRelationPickerSearchFilter] = + useRecoilScopedState(relationPickerSearchFilterScopedState); - const debouncedSetSearchFilter = debounce(setSearchFilter, 100, { - leading: true, - }); + const debouncedSetSearchFilter = debounce( + setRelationPickerSearchFilter, + 100, + { + leading: true, + }, + ); function handleSearchFilterChange( event: React.ChangeEvent, ) { debouncedSetSearchFilter(event.currentTarget.value); - setHoveredIndex(0); + setRelationPickerHoverIndex(0); } useEffect(() => { - setSearchFilter(''); - }, [setSearchFilter]); + setRelationPickerSearchFilter(''); + }, [setRelationPickerSearchFilter]); return { - searchFilter, + searchFilter: relationPickerSearchFilter, handleSearchFilterChange, }; } diff --git a/front/src/modules/ui/navbar/components/NavCollapseButton.tsx b/front/src/modules/ui/navbar/components/NavCollapseButton.tsx index 89be262775..07dfa0596b 100644 --- a/front/src/modules/ui/navbar/components/NavCollapseButton.tsx +++ b/front/src/modules/ui/navbar/components/NavCollapseButton.tsx @@ -54,7 +54,8 @@ export default function NavCollapseButton({ direction = 'left', hide, }: CollapseButtonProps) { - const [isNavOpen, setIsNavOpen] = useRecoilState(isNavbarOpenedState); + const [isNavbarOpened, setIsNavbarOpened] = + useRecoilState(isNavbarOpenedState); const iconSize = useIsMobile() ? navbarIconSize.mobile @@ -65,14 +66,14 @@ export default function NavCollapseButton({ {direction === 'left' ? ( setIsNavOpen(!isNavOpen)} + onClick={() => setIsNavbarOpened(!isNavbarOpened)} > ) : ( setIsNavOpen(!isNavOpen)} + onClick={() => setIsNavbarOpened(!isNavbarOpened)} > diff --git a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx index 4332eab4fe..a541780c5f 100644 --- a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx +++ b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx @@ -24,7 +24,7 @@ type NavbarProps = { }; export function NavbarAnimatedContainer({ children }: NavbarProps) { - const isMenuOpened = useRecoilValue(isNavbarOpenedState); + const isNavbarOpened = useRecoilValue(isNavbarOpenedState); const [, setIsNavbarSwitchingSize] = useRecoilState( isNavbarSwitchingSizeState, ); @@ -47,8 +47,8 @@ export function NavbarAnimatedContainer({ children }: NavbarProps) { setIsNavbarSwitchingSize(false); }} animate={{ - width: isMenuOpened ? leftBarWidth : '0', - opacity: isMenuOpened ? 1 : 0, + width: isNavbarOpened ? leftBarWidth : '0', + opacity: isNavbarOpened ? 1 : 0, }} transition={{ duration: theme.animation.duration.normal, diff --git a/front/src/modules/ui/navbar/components/SupportChat.tsx b/front/src/modules/ui/navbar/components/SupportChat.tsx index 497b60c97d..b7cbe84371 100644 --- a/front/src/modules/ui/navbar/components/SupportChat.tsx +++ b/front/src/modules/ui/navbar/components/SupportChat.tsx @@ -49,37 +49,37 @@ function configureFront(chatId: string) { export default function SupportChat() { const theme = useTheme(); - const user = useRecoilValue(currentUserState); - const supportChatConfig = useRecoilValue(supportChatState); + const currentUser = useRecoilValue(currentUserState); + const supportChat = useRecoilValue(supportChatState); const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false); useEffect(() => { if ( - supportChatConfig?.supportDriver === 'front' && - supportChatConfig.supportFrontChatId && + supportChat?.supportDriver === 'front' && + supportChat.supportFrontChatId && !isFrontChatLoaded ) { - configureFront(supportChatConfig.supportFrontChatId); + configureFront(supportChat.supportFrontChatId); setIsFrontChatLoaded(true); } - if (user?.email && isFrontChatLoaded) { + if (currentUser?.email && isFrontChatLoaded) { window.FrontChat?.('identity', { - email: user.email, - name: user.displayName, - userHash: user?.supportUserHash, + email: currentUser.email, + name: currentUser.displayName, + userHash: currentUser?.supportUserHash, }); } }, [ + currentUser?.displayName, + currentUser?.email, + currentUser?.supportUserHash, isFrontChatLoaded, - supportChatConfig?.supportDriver, - supportChatConfig.supportFrontChatId, - user?.displayName, - user?.email, - user?.supportUserHash, + supportChat?.supportDriver, + supportChat.supportFrontChatId, ]); function handleSupportClick() { - if (supportChatConfig?.supportDriver === 'front') { + if (supportChat?.supportDriver === 'front') { window.FrontChat?.('show'); } } diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx index ecb93bcc58..a89da1570a 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx @@ -30,7 +30,7 @@ const StyledTopBarWrapper = styled.div` export function RightDrawerTopBar() { const isMobile = useIsMobile(); - const activityId = useRecoilValue(viewableActivityIdState); + const viewableActivityId = useRecoilValue(viewableActivityIdState); return ( @@ -38,7 +38,7 @@ export function RightDrawerTopBar() { {!isMobile && } - + ); } diff --git a/front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx b/front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx index 641bd0f5af..125c9e7c27 100644 --- a/front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx +++ b/front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx @@ -53,13 +53,13 @@ const reducedVariants = { export function SnackBarProvider({ children }: React.PropsWithChildren) { const reducedMotion = useReducedMotion(); - const [snackBarState, setSnackBarState] = useRecoilState( + const [snackBarInternal, setSnackBarInternal] = useRecoilState( snackBarInternalState, ); // Handle snackbar close event const handleSnackBarClose = (id: string) => { - setSnackBarState((prevState) => ({ + setSnackBarInternal((prevState) => ({ ...prevState, queue: prevState.queue.filter((snackBar) => snackBar.id !== id), })); @@ -69,7 +69,7 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) { <> {children} - {snackBarState.queue.map((snackBar) => ( + {snackBarInternal.queue.map((snackBar) => ( ({ + setStepBarInternal((prevState) => ({ ...prevState, activeStep: prevState.activeStep + 1, })); } function prevStep() { - setStepsState((prevState) => ({ + setStepBarInternal((prevState) => ({ ...prevState, activeStep: prevState.activeStep - 1, })); } function reset() { - setStepsState((prevState) => ({ + setStepBarInternal((prevState) => ({ ...prevState, activeStep: 0, })); @@ -33,12 +34,12 @@ export function useStepBar({ initialStep }: StepsOptions) { const setStep = useCallback( (step: number) => { - setStepsState((prevState) => ({ + setStepBarInternal((prevState) => ({ ...prevState, activeStep: step, })); }, - [setStepsState], + [setStepBarInternal], ); useEffect(() => { @@ -54,6 +55,6 @@ export function useStepBar({ initialStep }: StepsOptions) { prevStep, reset, setStep, - activeStep: stepsState.activeStep, + activeStep: stepBarInternal.activeStep, }; } diff --git a/front/src/modules/ui/table/components/EntityTableBody.tsx b/front/src/modules/ui/table/components/EntityTableBody.tsx index ecf54bdea2..a0a9d7082d 100644 --- a/front/src/modules/ui/table/components/EntityTableBody.tsx +++ b/front/src/modules/ui/table/components/EntityTableBody.tsx @@ -25,7 +25,7 @@ const StyledSpace = styled.td` export function EntityTableBody() { const scrollWrapperRef = useScrollWrapperScopedRef(); - const rowIds = useRecoilValue(tableRowIdsState); + const tableRowIds = useRecoilValue(tableRowIdsState); const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState); const isFetchingEntityTableData = useRecoilValue( @@ -33,7 +33,7 @@ export function EntityTableBody() { ); const rowVirtualizer = useVirtual({ - size: rowIds.length, + size: tableRowIds.length, parentRef: scrollWrapperRef, overscan: 50, }); @@ -57,7 +57,7 @@ export function EntityTableBody() { )} {items.map((virtualItem) => { - const rowId = rowIds[virtualItem.index]; + const rowId = tableRowIds[virtualItem.index]; return ( diff --git a/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx b/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx index 03dd1b3210..e763943dcd 100644 --- a/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx +++ b/front/src/modules/ui/table/components/EntityTableColumnMenu.tsx @@ -33,7 +33,7 @@ export const EntityTableColumnMenu = ({ const ref = useRef(null); const theme = useTheme(); - const hiddenColumns = useRecoilScopedValue( + const hiddenTableColumns = useRecoilScopedValue( hiddenTableColumnsScopedSelector, TableRecoilScopeContext, ); @@ -56,7 +56,7 @@ export const EntityTableColumnMenu = ({ return ( - {hiddenColumns.map((column) => ( + {hiddenTableColumns.map((column) => ( { if (!initialPointerPositionX) return; - setOffset(positionX - initialPointerPositionX); + setResizeFieldOffset(positionX - initialPointerPositionX); }, - [setOffset, initialPointerPositionX], + [setResizeFieldOffset, initialPointerPositionX], ); const handleResizeHandlerEnd = useRecoilCallback( @@ -119,21 +121,21 @@ export function EntityTableHeader() { const nextWidth = Math.round( Math.max( - columnsByKey[resizedFieldKey].size + + tableColumnsByKey[resizedFieldKey].size + snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(), COLUMN_MIN_WIDTH, ), ); - if (nextWidth !== columnsByKey[resizedFieldKey].size) { - const nextColumns = columns.map((column) => + if (nextWidth !== tableColumnsByKey[resizedFieldKey].size) { + const nextColumns = tableColumns.map((column) => column.key === resizedFieldKey ? { ...column, size: nextWidth } : column, ); - setColumns(nextColumns); - setIsSortAndFilterBarOpen(true); + setTableColumns(nextColumns); + setSortAndFilterBar(true); } set(resizeFieldOffsetState, 0); @@ -142,10 +144,10 @@ export function EntityTableHeader() { }, [ resizedFieldKey, - columnsByKey, - columns, - setColumns, - setIsSortAndFilterBarOpen, + tableColumnsByKey, + tableColumns, + setTableColumns, + setSortAndFilterBar, ], ); @@ -173,13 +175,13 @@ export function EntityTableHeader() { - {visibleColumns.map((column) => ( + {visibleTableColumns.map((column) => ( @@ -194,7 +196,7 @@ export function EntityTableHeader() { ))} - {hiddenColumns.length > 0 && ( + {hiddenTableColumns.length > 0 && ( (function EntityTableRow({ rowId }, ref) { - const columns = useRecoilScopedValue( + const visibleTableColumns = useRecoilScopedValue( visibleTableColumnsScopedSelector, TableRecoilScopeContext, ); @@ -40,7 +40,7 @@ export const EntityTableRow = forwardRef< - {columns.map((column, columnIndex) => { + {visibleTableColumns.map((column, columnIndex) => { return ( diff --git a/front/src/modules/ui/table/hooks/useTableColumns.ts b/front/src/modules/ui/table/hooks/useTableColumns.ts index 8539888b3f..9d040b9d6e 100644 --- a/front/src/modules/ui/table/hooks/useTableColumns.ts +++ b/front/src/modules/ui/table/hooks/useTableColumns.ts @@ -19,7 +19,7 @@ export const useTableColumns = () => { tableColumnsByKeyScopedSelector, TableRecoilScopeContext, ); - const [, setIsSortAndFilterBarOpen] = useRecoilScopedState( + const [, setSortAndFilterBar] = useRecoilScopedState( sortAndFilterBarScopedState, TableRecoilScopeContext, ); @@ -37,14 +37,9 @@ export const useTableColumns = () => { ); setTableColumns(nextColumns); - setIsSortAndFilterBarOpen(true); + setSortAndFilterBar(true); }, - [ - setIsSortAndFilterBarOpen, - setTableColumns, - tableColumns, - tableColumnsByKey, - ], + [tableColumnsByKey, tableColumns, setTableColumns, setSortAndFilterBar], ); return { handleColumnVisibilityChange }; diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx index d5b6029d6b..d926b9ff2d 100644 --- a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx +++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx @@ -71,18 +71,18 @@ export function TableOptionsDropdownContent({ const viewEditInputRef = useRef(null); - const [viewEditMode, setViewEditMode] = useRecoilState( + const [tableViewEditMode, setTableViewEditMode] = useRecoilState( tableViewEditModeState, ); - const visibleColumns = useRecoilScopedValue( + const visibleTableColumns = useRecoilScopedValue( visibleTableColumnsScopedSelector, TableRecoilScopeContext, ); - const hiddenColumns = useRecoilScopedValue( + const hiddenTableColumns = useRecoilScopedValue( hiddenTableColumnsScopedSelector, TableRecoilScopeContext, ); - const viewsById = useRecoilScopedValue( + const tableViewsById = useRecoilScopedValue( tableViewsByIdState, TableRecoilScopeContext, ); @@ -92,7 +92,7 @@ export function TableOptionsDropdownContent({ const renderFieldActions = useCallback( (column: ColumnDefinition) => // Do not allow hiding last visible column - !column.isVisible || visibleColumns.length > 1 + !column.isVisible || visibleTableColumns.length > 1 ? [ , ] : undefined, - [handleColumnVisibilityChange, theme.icon.size.sm, visibleColumns.length], + [ + handleColumnVisibilityChange, + theme.icon.size.sm, + visibleTableColumns.length, + ], ); const resetViewEditMode = useCallback(() => { - setViewEditMode({ mode: undefined, viewId: undefined }); + setTableViewEditMode({ mode: undefined, viewId: undefined }); if (viewEditInputRef.current) { viewEditInputRef.current.value = ''; } - }, [setViewEditMode]); + }, [setTableViewEditMode]); const handleViewNameSubmit = useRecoilCallback( ({ set, snapshot }) => @@ -125,13 +129,13 @@ export function TableOptionsDropdownContent({ const name = viewEditInputRef.current?.value; - if (!viewEditMode.mode || !name) { + if (!tableViewEditMode.mode || !name) { return resetViewEditMode(); } const views = await snapshot.getPromise(tableViewsState(tableScopeId)); - if (viewEditMode.mode === 'create') { + if (tableViewEditMode.mode === 'create') { const viewToCreate = { id: v4(), name }; const nextViews = [...views, viewToCreate]; @@ -156,9 +160,9 @@ export function TableOptionsDropdownContent({ set(currentTableViewIdState(tableScopeId), viewToCreate.id); } - if (viewEditMode.mode === 'edit') { + if (tableViewEditMode.mode === 'edit') { const nextViews = views.map((view) => - view.id === viewEditMode.viewId ? { ...view, name } : view, + view.id === tableViewEditMode.viewId ? { ...view, name } : view, ); set(tableViewsState(tableScopeId), nextViews); @@ -171,8 +175,8 @@ export function TableOptionsDropdownContent({ onViewsChange, resetViewEditMode, tableScopeId, - viewEditMode.mode, - viewEditMode.viewId, + tableViewEditMode.mode, + tableViewEditMode.viewId, ], ); @@ -210,16 +214,16 @@ export function TableOptionsDropdownContent({ {!selectedOption && ( <> - {!!viewEditMode.mode ? ( + {!!tableViewEditMode.mode ? ( @@ -255,15 +259,15 @@ export function TableOptionsDropdownContent({ - {hiddenColumns.length > 0 && ( + {hiddenTableColumns.length > 0 && ( <> )} diff --git a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx index 9dacc17109..5c517f6e3a 100644 --- a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx +++ b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx @@ -51,40 +51,39 @@ export const TableUpdateViewButtonGroup = ({ const tableScopeId = useContextScopeId(TableRecoilScopeContext); - const currentViewId = useRecoilScopedValue( + const currentTableViewId = useRecoilScopedValue( currentTableViewIdState, TableRecoilScopeContext, ); - const currentColumns = useRecoilScopedValue( + const tableColumns = useRecoilScopedValue( tableColumnsScopedState, TableRecoilScopeContext, ); const setSavedColumns = useSetRecoilState( - savedTableColumnsScopedState(currentViewId), + savedTableColumnsScopedState(currentTableViewId), ); const canPersistColumns = useRecoilValue( - canPersistTableColumnsScopedSelector([tableScopeId, currentViewId]), + canPersistTableColumnsScopedSelector([tableScopeId, currentTableViewId]), ); - const selectedFilters = useRecoilScopedValue( + const filters = useRecoilScopedValue( filtersScopedState, TableRecoilScopeContext, ); const setSavedFilters = useSetRecoilState( - savedFiltersScopedState(currentViewId), + savedFiltersScopedState(currentTableViewId), ); const canPersistFilters = useRecoilValue( - canPersistFiltersScopedSelector([tableScopeId, currentViewId]), + canPersistFiltersScopedSelector([tableScopeId, currentTableViewId]), ); - const selectedSorts = useRecoilScopedValue( - sortsScopedState, - TableRecoilScopeContext, + const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext); + const setSavedSorts = useSetRecoilState( + savedSortsScopedState(currentTableViewId), ); - const setSavedSorts = useSetRecoilState(savedSortsScopedState(currentViewId)); const canPersistSorts = useRecoilValue( - canPersistSortsScopedSelector([tableScopeId, currentViewId]), + canPersistSortsScopedSelector([tableScopeId, currentTableViewId]), ); const setViewEditMode = useSetRecoilState(tableViewEditModeState); @@ -108,22 +107,22 @@ export const TableUpdateViewButtonGroup = ({ }, []); const handleViewSubmit = useCallback(async () => { - if (canPersistColumns) setSavedColumns(currentColumns); - if (canPersistFilters) setSavedFilters(selectedFilters); - if (canPersistSorts) setSavedSorts(selectedSorts); + if (canPersistColumns) setSavedColumns(tableColumns); + if (canPersistFilters) setSavedFilters(filters); + if (canPersistSorts) setSavedSorts(sorts); await Promise.resolve(onViewSubmit?.()); }, [ canPersistColumns, canPersistFilters, canPersistSorts, - currentColumns, + filters, onViewSubmit, - selectedFilters, - selectedSorts, setSavedColumns, setSavedFilters, setSavedSorts, + sorts, + tableColumns, ]); useScopedHotkeys( @@ -139,7 +138,7 @@ export const TableUpdateViewButtonGroup = ({