[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/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) =>