[ESLint rule]: recoil value and setter should be named after their at… (#1402)

* Override unwanted changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> * Fix the tests Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
2023-09-05 11:34:11 +03:00
parent 0ec4b78aee
commit 878302dd31
52 changed files with 400 additions and 281 deletions
--- 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 (
--- 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],
--- 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 <ActionBar selectedIds={selectedBoardCards}></ActionBar>;
+  const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
+  return <ActionBar selectedIds={selectedCardIds}></ActionBar>;
 }
--- 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 <ContextMenu selectedIds={selectedBoardCards}></ContextMenu>;
+  const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
+  return <ContextMenu selectedIds={selectedCardIds}></ContextMenu>;
 }
--- 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<StyledContainerProps>`
 `;

 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 (
    <StyledContainerContextMenu
      className="context-menu"
      ref={wrapperRef}
-      position={position}
+      position={contextMenuPosition}
    >
      <StyledDropdownMenu>
        <StyledDropdownMenuItemsContainer>
--- 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) => (
        <Dialog
          key={dialog.id}
          {...dialog}
--- a/front/src/modules/ui/dropdown/components/DropdownButton.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownButton.tsx
@ -69,9 +69,9 @@ export function DropdownButton({
      setDropdownButtonCustomHotkeyScope(dropdownHotkeyScope);
    }
  }, [
-    setDropdownButtonCustomHotkeyScope,
    dropdownHotkeyScope,
    dropdownButtonCustomHotkeyScope,
+    setDropdownButtonCustomHotkeyScope,
  ]);

  return (
--- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandButton.tsx
+++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandButton.tsx
@ -21,13 +21,15 @@ export function FilterDropdownOperandButton({
    context,
  );

-  const [isOperandSelectionUnfolded, setIsOperandSelectionUnfolded] =
-    useRecoilScopedState(
-      isFilterDropdownOperandSelectUnfoldedScopedState,
-      context,
-    );
+  const [
+    isFilterDropdownOperandSelectUnfolded,
+    setIsFilterDropdownOperandSelectUnfolded,
+  ] = useRecoilScopedState(
+    isFilterDropdownOperandSelectUnfoldedScopedState,
+    context,
+  );

-  if (isOperandSelectionUnfolded) {
+  if (isFilterDropdownOperandSelectUnfolded) {
    return null;
  }

@ -35,7 +37,7 @@ export function FilterDropdownOperandButton({
    <DropdownMenuHeader
      key={'selected-filter-operand'}
      endIcon={<IconChevronDown size={theme.icon.size.md} />}
-      onClick={() => setIsOperandSelectionUnfolded(true)}
+      onClick={() => setIsFilterDropdownOperandSelectUnfolded(true)}
    >
      {getOperandLabel(selectedOperandInDropdown)}
    </DropdownMenuHeader>
--- 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 <></>;
  }

--- 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 (
--- 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<SortField>({
    context,
  );

-  const [isSortAndFilterBarOpen] = useRecoilScopedState(
+  const [sortAndFilterBar] = useRecoilScopedState(
    sortAndFilterBarScopedState,
    context,
  );
@ -144,7 +144,7 @@ function SortAndFilterBar<SortField>({

  if (
    (!canToggle && !filtersWithDefinition.length && !sorts.length) ||
-    !isSortAndFilterBarOpen
+    !sortAndFilterBar
  ) {
    return null;
  }
--- 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<SortField>({
    setSelectedSortDirection('asc');
  }, []);

-  const [, setIsSortAndFilterBarOpen] = useRecoilScopedState(
+  const [, setSortAndFilterBar] = useRecoilScopedState(
    sortAndFilterBarScopedState,
    context,
  );
@ -69,7 +69,7 @@ export function SortDropdownButton<SortField>({
  function handleAddSort(sort: SortType<SortField>) {
    setIsUnfolded(false);
    onSortItemSelect(sort);
-    setIsSortAndFilterBarOpen(true);
+    setSortAndFilterBar(true);
  }

  return (
--- 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<HTMLDivElement>;
 }) {
-  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,
  };
 }
--- 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<HTMLInputElement>,
  ) {
    debouncedSetSearchFilter(event.currentTarget.value);
-    setHoveredIndex(0);
+    setRelationPickerHoverIndex(0);
  }

  useEffect(() => {
-    setSearchFilter('');
-  }, [setSearchFilter]);
+    setRelationPickerSearchFilter('');
+  }, [setRelationPickerSearchFilter]);

  return {
-    searchFilter,
+    searchFilter: relationPickerSearchFilter,
    handleSearchFilterChange,
  };
 }
--- 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' ? (
        <StyledCollapseButton
          hide={hide}
-          onClick={() => setIsNavOpen(!isNavOpen)}
+          onClick={() => setIsNavbarOpened(!isNavbarOpened)}
        >
          <IconLayoutSidebarLeftCollapse size={iconSize} />
        </StyledCollapseButton>
      ) : (
        <StyledCollapseButton
          hide={hide}
-          onClick={() => setIsNavOpen(!isNavOpen)}
+          onClick={() => setIsNavbarOpened(!isNavbarOpened)}
        >
          <IconLayoutSidebarRightCollapse size={iconSize} />
        </StyledCollapseButton>
--- 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,
--- 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');
    }
  }
--- 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 (
    <StyledRightDrawerTopBar>
@ -38,7 +38,7 @@ export function RightDrawerTopBar() {
        <RightDrawerTopBarCloseButton />
        {!isMobile && <RightDrawerTopBarExpandButton />}
      </StyledTopBarWrapper>
-      <ActivityActionBar activityId={activityId ?? ''} />
+      <ActivityActionBar activityId={viewableActivityId ?? ''} />
    </StyledRightDrawerTopBar>
  );
 }
--- 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}
      <StyledSnackBarContainer>
-        {snackBarState.queue.map((snackBar) => (
+        {snackBarInternal.queue.map((snackBar) => (
          <StyledSnackBarMotionContainer
            key={snackBar.id}
            variants={reducedMotion ? reducedVariants : variants}
--- a/front/src/modules/ui/step-bar/hooks/useStepBar.ts
+++ b/front/src/modules/ui/step-bar/hooks/useStepBar.ts
@ -8,24 +8,25 @@ export type StepsOptions = {
 };

 export function useStepBar({ initialStep }: StepsOptions) {
-  const [stepsState, setStepsState] = useRecoilState(stepBarInternalState);
+  const [stepBarInternal, setStepBarInternal] =
+    useRecoilState(stepBarInternalState);

  function nextStep() {
-    setStepsState((prevState) => ({
+    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,
  };
 }
--- 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<SpaceProps>`
 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() {
        </tr>
      )}
      {items.map((virtualItem) => {
-        const rowId = rowIds[virtualItem.index];
+        const rowId = tableRowIds[virtualItem.index];

        return (
          <RowIdContext.Provider value={rowId} key={rowId}>
--- 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<HTMLDivElement>(null);
  const theme = useTheme();

-  const hiddenColumns = useRecoilScopedValue(
+  const hiddenTableColumns = useRecoilScopedValue(
    hiddenTableColumnsScopedSelector,
    TableRecoilScopeContext,
  );
@ -56,7 +56,7 @@ export const EntityTableColumnMenu = ({
  return (
    <StyledColumnMenu {...props} ref={ref}>
      <StyledDropdownMenuItemsContainer>
-        {hiddenColumns.map((column) => (
+        {hiddenTableColumns.map((column) => (
          <DropdownMenuItem
            key={column.key}
            actions={[
--- a/front/src/modules/ui/table/components/EntityTableHeader.tsx
+++ b/front/src/modules/ui/table/components/EntityTableHeader.tsx
@ -72,24 +72,26 @@ const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)`
 `;

 export function EntityTableHeader() {
-  const [offset, setOffset] = useRecoilState(resizeFieldOffsetState);
-  const [columns, setColumns] = useRecoilScopedState(
+  const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
+    resizeFieldOffsetState,
+  );
+  const [tableColumns, setTableColumns] = useRecoilScopedState(
    tableColumnsScopedState,
    TableRecoilScopeContext,
  );
-  const columnsByKey = useRecoilScopedValue(
+  const tableColumnsByKey = useRecoilScopedValue(
    tableColumnsByKeyScopedSelector,
    TableRecoilScopeContext,
  );
-  const hiddenColumns = useRecoilScopedValue(
+  const hiddenTableColumns = useRecoilScopedValue(
    hiddenTableColumnsScopedSelector,
    TableRecoilScopeContext,
  );
-  const visibleColumns = useRecoilScopedValue(
+  const visibleTableColumns = useRecoilScopedValue(
    visibleTableColumnsScopedSelector,
    TableRecoilScopeContext,
  );
-  const [, setIsSortAndFilterBarOpen] = useRecoilScopedState(
+  const [, setSortAndFilterBar] = useRecoilScopedState(
    sortAndFilterBarScopedState,
    TableRecoilScopeContext,
  );
@ -107,9 +109,9 @@ export function EntityTableHeader() {
  const handleResizeHandlerMove = useCallback(
    (positionX: number) => {
      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() {
          <SelectAllCheckbox />
        </th>

-        {visibleColumns.map((column) => (
+        {visibleTableColumns.map((column) => (
          <StyledColumnHeaderCell
            key={column.key}
            isResizing={resizedFieldKey === column.key}
            columnWidth={Math.max(
-              columnsByKey[column.key].size +
-                (resizedFieldKey === column.key ? offset : 0),
+              tableColumnsByKey[column.key].size +
+                (resizedFieldKey === column.key ? resizeFieldOffset : 0),
              COLUMN_MIN_WIDTH,
            )}
          >
@ -194,7 +196,7 @@ export function EntityTableHeader() {
          </StyledColumnHeaderCell>
        ))}
        <th>
-          {hiddenColumns.length > 0 && (
+          {hiddenTableColumns.length > 0 && (
            <StyledAddIconButtonWrapper>
              <IconButton
                size="medium"
--- a/front/src/modules/ui/table/components/EntityTableRow.tsx
+++ b/front/src/modules/ui/table/components/EntityTableRow.tsx
@ -24,7 +24,7 @@ export const EntityTableRow = forwardRef<
  HTMLTableRowElement,
  EntityTableRowProps
 >(function EntityTableRow({ rowId }, ref) {
-  const columns = useRecoilScopedValue(
+  const visibleTableColumns = useRecoilScopedValue(
    visibleTableColumnsScopedSelector,
    TableRecoilScopeContext,
  );
@ -40,7 +40,7 @@ export const EntityTableRow = forwardRef<
      <td>
        <CheckboxCell />
      </td>
-      {columns.map((column, columnIndex) => {
+      {visibleTableColumns.map((column, columnIndex) => {
        return (
          <ColumnContext.Provider value={column} key={column.key}>
            <EntityTableCell cellIndex={columnIndex} />
--- 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 };
--- 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<HTMLInputElement>(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<ViewFieldMetadata>) =>
      // Do not allow hiding last visible column
-      !column.isVisible || visibleColumns.length > 1
+      !column.isVisible || visibleTableColumns.length > 1
        ? [
            <IconButton
              key={`action-${column.key}`}
@ -107,16 +107,20 @@ export function TableOptionsDropdownContent({
            />,
          ]
        : 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({
    <StyledDropdownMenu>
      {!selectedOption && (
        <>
-          {!!viewEditMode.mode ? (
+          {!!tableViewEditMode.mode ? (
            <DropdownMenuInput
              ref={viewEditInputRef}
              autoFocus
              placeholder={
-                viewEditMode.mode === 'create' ? 'New view' : 'View name'
+                tableViewEditMode.mode === 'create' ? 'New view' : 'View name'
              }
              defaultValue={
-                viewEditMode.viewId
-                  ? viewsById[viewEditMode.viewId]?.name
+                tableViewEditMode.viewId
+                  ? tableViewsById[tableViewEditMode.viewId]?.name
                  : undefined
              }
            />
@ -255,15 +259,15 @@ export function TableOptionsDropdownContent({
          <TableOptionsDropdownSection
            renderActions={renderFieldActions}
            title="Visible"
-            columns={visibleColumns}
+            columns={visibleTableColumns}
          />
-          {hiddenColumns.length > 0 && (
+          {hiddenTableColumns.length > 0 && (
            <>
              <StyledDropdownMenuSeparator />
              <TableOptionsDropdownSection
                renderActions={renderFieldActions}
                title="Hidden"
-                columns={hiddenColumns}
+                columns={hiddenTableColumns}
              />
            </>
          )}
--- 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 = ({
        <Button
          title="Update view"
          disabled={
-            !currentViewId ||
+            !currentTableViewId ||
            (!canPersistColumns && !canPersistFilters && !canPersistSorts)
          }
          onClick={handleViewSubmit}
--- a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
+++ b/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
@ -92,15 +92,15 @@ export const TableViewsDropdownButton = ({
    key: 'options',
  });

-  const [, setCurrentViewId] = useRecoilScopedState(
+  const [, setCurrentTableViewId] = useRecoilScopedState(
    currentTableViewIdState,
    TableRecoilScopeContext,
  );
-  const currentView = useRecoilScopedValue(
+  const currentTableView = useRecoilScopedValue(
    currentTableViewState,
    TableRecoilScopeContext,
  );
-  const [views, setViews] = useRecoilScopedState(
+  const [tableViews, setTableViews] = useRecoilScopedState(
    tableViewsState,
    TableRecoilScopeContext,
  );
@ -153,15 +153,21 @@ export const TableViewsDropdownButton = ({
    async (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
      event.stopPropagation();

-      if (currentView?.id === viewId) setCurrentViewId(undefined);
+      if (currentTableView?.id === viewId) setCurrentTableViewId(undefined);

-      const nextViews = views.filter((view) => view.id !== viewId);
+      const nextViews = tableViews.filter((view) => view.id !== viewId);

-      setViews(nextViews);
+      setTableViews(nextViews);
      await Promise.resolve(onViewsChange?.(nextViews));
      setIsUnfolded(false);
    },
-    [currentView?.id, onViewsChange, setCurrentViewId, setViews, views],
+    [
+      currentTableView?.id,
+      onViewsChange,
+      setCurrentTableViewId,
+      setTableViews,
+      tableViews,
+    ],
  );

  useEffect(() => {
@ -181,10 +187,10 @@ export const TableViewsDropdownButton = ({
        <>
          <StyledViewIcon size={theme.icon.size.md} />
          <StyledViewName>
-            {currentView?.name || defaultViewName}{' '}
+            {currentTableView?.name || defaultViewName}{' '}
          </StyledViewName>
          <StyledDropdownLabelAdornments>
-            · {views.length} <IconChevronDown size={theme.icon.size.sm} />
+            · {tableViews.length} <IconChevronDown size={theme.icon.size.sm} />
          </StyledDropdownLabelAdornments>
        </>
      }
@ -195,7 +201,7 @@ export const TableViewsDropdownButton = ({
      HotkeyScope={HotkeyScope}
    >
      <StyledDropdownMenuItemsContainer>
-        {views.map((view) => (
+        {tableViews.map((view) => (
          <DropdownMenuItem
            key={view.id}
            actions={[
@ -204,7 +210,7 @@ export const TableViewsDropdownButton = ({
                onClick={(event) => handleEditViewButtonClick(event, view.id)}
                icon={<IconPencil size={theme.icon.size.sm} />}
              />,
-              views.length > 1 ? (
+              tableViews.length > 1 ? (
                <IconButton
                  key="delete"
                  onClick={(event) =>
--- a/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts
+++ b/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts
@ -3,12 +3,12 @@ import { useRecoilCallback, useRecoilState } from 'recoil';
 import { isDragSelectionStartEnabledState } from '../states/internal/isDragSelectionStartEnabledState';

 export function useDragSelect() {
-  const [, setIsDragSelectionStartEnabledInternal] = useRecoilState(
+  const [, setIsDragSelectionStartEnabled] = useRecoilState(
    isDragSelectionStartEnabledState,
  );

  function setDragSelectionStartEnabled(isEnabled: boolean) {
-    setIsDragSelectionStartEnabledInternal(isEnabled);
+    setIsDragSelectionStartEnabled(isEnabled);
  }

  const isDragSelectionStartEnabled = useRecoilCallback(