🔧 (eslint) enabling 'react/no-unstable-nested-components' rule (actua…

…lbudget#1893)
FlorianLang06 · Nov 11, 2023 · f2d8e74 · f2d8e74
1 parent a99e45c
commit f2d8e74
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 121 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -45,6 +45,8 @@ module.exports = {
   reportUnusedDisableDirectives: true,
   rules: {
     'prettier/prettier': 'warn',
+
+    // Note: base rule explicitly disabled in favor of the TS one
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': [
       'warn',
@@ -63,6 +65,10 @@ module.exports = {
 
     'react/jsx-no-useless-fragment': 'warn',
     'react/self-closing-comp': 'warn',
+    'react/no-unstable-nested-components': [
+      'warn',
+      { allowAsProps: true, customValidators: ['formatter'] },
+    ],
 
     'rulesdir/typography': 'warn',
     'rulesdir/prefer-if-statement': 'warn',

diff --git a/packages/desktop-client/src/components/filters/SavedFilters.js b/packages/desktop-client/src/components/filters/SavedFilters.js
@@ -16,6 +16,112 @@ import GenericInput from '../util/GenericInput';
 
 import { AppliedFilters } from './FiltersMenu';
 
+function FilterMenu({ onClose, filterId, onFilterMenuSelect }) {
+  return (
+    <MenuTooltip width={200} onClose={onClose}>
+      <Menu
+        onMenuSelect={item => {
+          onFilterMenuSelect(item);
+        }}
+        items={[
+          ...(!filterId.id
+            ? [
+                { name: 'save-filter', text: 'Save new filter' },
+                { name: 'clear-filter', text: 'Clear all conditions' },
+              ]
+            : [
+                ...(filterId.id !== null && filterId.status === 'saved'
+                  ? [
+                      { name: 'rename-filter', text: 'Rename' },
+                      { name: 'delete-filter', text: 'Delete' },
+                      Menu.line,
+                      {
+                        name: 'save-filter',
+                        text: 'Save new filter',
+                        disabled: true,
+                      },
+                      { name: 'clear-filter', text: 'Clear all conditions' },
+                    ]
+                  : [
+                      { name: 'rename-filter', text: 'Rename' },
+                      { name: 'update-filter', text: 'Update condtions' },
+                      { name: 'reload-filter', text: 'Revert changes' },
+                      { name: 'delete-filter', text: 'Delete' },
+                      Menu.line,
+                      { name: 'save-filter', text: 'Save new filter' },
+                      { name: 'clear-filter', text: 'Clear all conditions' },
+                    ]),
+              ]),
+        ]}
+      />
+    </MenuTooltip>
+  );
+}
+
+function NameFilter({
+  onClose,
+  menuItem,
+  name,
+  setName,
+  adding,
+  onAddUpdate,
+  err,
+}) {
+  let inputRef = useRef();
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  return (
+    <MenuTooltip width={325} onClose={onClose}>
+      {menuItem !== 'update-filter' && (
+        <form>
+          <Stack
+            direction="row"
+            justify="flex-end"
+            align="center"
+            style={{ padding: 10 }}
+          >
+            <FormField style={{ flex: 1 }}>
+              <FormLabel
+                title="Filter Name"
+                htmlFor="name-field"
+                style={{ userSelect: 'none' }}
+              />
+              <GenericInput
+                inputRef={inputRef}
+                id="name-field"
+                field="string"
+                type="string"
+                value={name}
+                onChange={setName}
+              />
+            </FormField>
+            <Button
+              type="primary"
+              style={{ marginTop: 18 }}
+              onClick={e => {
+                e.preventDefault();
+                onAddUpdate();
+              }}
+            >
+              {adding ? 'Add' : 'Update'}
+            </Button>
+          </Stack>
+        </form>
+      )}
+      {err && (
+        <Stack direction="row" align="center" style={{ padding: 10 }}>
+          <Text style={{ color: theme.errorText }}>{err}</Text>
+        </Stack>
+      )}
+    </MenuTooltip>
+  );
+}
+
 function SavedFilterMenuButton({
   filters,
   conditionsOp,
@@ -29,18 +135,11 @@ function SavedFilterMenuButton({
   let [menuOpen, setMenuOpen] = useState(false);
   let [err, setErr] = useState(null);
   let [menuItem, setMenuItem] = useState(null);
-  let inputRef = useRef();
-  let name = filterId.name;
+  let [name, setName] = useState(filterId.name);
   let id = filterId.id;
   let res;
   let savedFilter;
 
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [NameFilter]);
-
   const onFilterMenuSelect = async item => {
     setMenuItem(item);
     switch (item) {
@@ -98,48 +197,6 @@ function SavedFilterMenuButton({
     }
   };
 
-  function FilterMenu({ onClose, filterId }) {
-    return (
-      <MenuTooltip width={200} onClose={onClose}>
-        <Menu
-          onMenuSelect={item => {
-            onFilterMenuSelect(item);
-          }}
-          items={[
-            ...(!filterId.id
-              ? [
-                  { name: 'save-filter', text: 'Save new filter' },
-                  { name: 'clear-filter', text: 'Clear all conditions' },
-                ]
-              : [
-                  ...(filterId.id !== null && filterId.status === 'saved'
-                    ? [
-                        { name: 'rename-filter', text: 'Rename' },
-                        { name: 'delete-filter', text: 'Delete' },
-                        Menu.line,
-                        {
-                          name: 'save-filter',
-                          text: 'Save new filter',
-                          disabled: true,
-                        },
-                        { name: 'clear-filter', text: 'Clear all conditions' },
-                      ]
-                    : [
-                        { name: 'rename-filter', text: 'Rename' },
-                        { name: 'update-filter', text: 'Update condtions' },
-                        { name: 'reload-filter', text: 'Revert changes' },
-                        { name: 'delete-filter', text: 'Delete' },
-                        Menu.line,
-                        { name: 'save-filter', text: 'Save new filter' },
-                        { name: 'clear-filter', text: 'Clear all conditions' },
-                      ]),
-                ]),
-          ]}
-        />
-      </MenuTooltip>
-    );
-  }
-
   async function onAddUpdate() {
     if (adding) {
       //create new flow
@@ -178,54 +235,6 @@ function SavedFilterMenuButton({
     }
   }
 
-  function NameFilter({ onClose }) {
-    return (
-      <MenuTooltip width={325} onClose={onClose}>
-        {menuItem !== 'update-filter' && (
-          <form>
-            <Stack
-              direction="row"
-              justify="flex-end"
-              align="center"
-              style={{ padding: 10 }}
-            >
-              <FormField style={{ flex: 1 }}>
-                <FormLabel
-                  title="Filter Name"
-                  htmlFor="name-field"
-                  style={{ userSelect: 'none' }}
-                />
-                <GenericInput
-                  inputRef={inputRef}
-                  id="name-field"
-                  field="string"
-                  type="string"
-                  value={name}
-                  onChange={e => (name = e)}
-                />
-              </FormField>
-              <Button
-                type="primary"
-                style={{ marginTop: 18 }}
-                onClick={e => {
-                  e.preventDefault();
-                  onAddUpdate();
-                }}
-              >
-                {adding ? 'Add' : 'Update'}
-              </Button>
-            </Stack>
-          </form>
-        )}
-        {err && (
-          <Stack direction="row" align="center" style={{ padding: 10 }}>
-            <Text style={{ color: theme.errorText }}>{err}</Text>
-          </Stack>
-        )}
-      </MenuTooltip>
-    );
-  }
-
   return (
     <View>
       {filters.length > 0 && (
@@ -254,9 +263,23 @@ function SavedFilterMenuButton({
         </Button>
       )}
       {menuOpen && (
-        <FilterMenu onClose={() => setMenuOpen(false)} filterId={filterId} />
+        <FilterMenu
+          onClose={() => setMenuOpen(false)}
+          filterId={filterId}
+          onFilterMenuSelect={onFilterMenuSelect}
+        />
+      )}
+      {nameOpen && (
+        <NameFilter
+          onClose={() => setNameOpen(false)}
+          menuItem={menuItem}
+          name={name}
+          setName={setName}
+          adding={adding}
+          onAddUpdate={onAddUpdate}
+          err={err}
+        />
       )}
-      {nameOpen && <NameFilter onClose={() => setNameOpen(false)} />}
     </View>
   );
 }

diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -75,6 +75,7 @@ function NetWorthGraph({
     label?: string;
   };
 
+  // eslint-disable-next-line react/no-unstable-nested-components
   const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
     if (active && payload && payload.length) {
       return (

diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -131,27 +131,6 @@ function lookupName(items, id) {
   return items.find(item => item.id === id).name;
 }
 
-// TODO: delete if not needed
-/* eslint-disable-next-line import/no-unused-modules */
-export function DateHeader({ date }) {
-  return (
-    <ListItem
-      style={{
-        height: 25,
-        backgroundColor: theme.mobileDateBackground,
-        borderColor: theme.tableBorder,
-        justifyContent: 'center',
-      }}
-    >
-      <Text
-        style={{ ...styles.text, fontSize: 13, color: theme.tableHeaderText }}
-      >
-        {monthUtils.format(date, 'MMMM dd, yyyy')}
-      </Text>
-    </ListItem>
-  );
-}
-
 function Status({ status }) {
   let color;
 

diff --git a/upcoming-release-notes/1893.md b/upcoming-release-notes/1893.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Enabled `react/no-unstable-nested-components` eslint rule.