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