optimize

barbalex · Jan 24, 2025 · 663991e · 663991e
1 parent 3eb5cdd
commit 663991e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 84 deletions.
diff --git a/src/components/shared/FormTitle/FilterInput.jsx b/src/components/shared/FormTitle/FilterInput.jsx
@@ -33,96 +33,99 @@ const StyledTextField = styled(TextField)`
 `
 
 export const FilterInput = memo(
-  observer(({ filterInputIsVisible, ref: inputRef }) => {
-    const store = useContext(MobxContext)
-    const { nodeLabelFilter, activeFilterTable: activeFilterTableIn } =
-      store.tree
-    // ISSUE: doc is not covered by active node array
-    // thus activeFilterTable is not set for /Dokumentation
-    const { pathname } = useLocation()
-    const isDocs = pathname.includes('/Dokumentation')
-    const activeFilterTable = isDocs ? 'doc' : activeFilterTableIn
+  observer(
+    ({ filterInputIsVisible, toggleFilterInputIsVisible, ref: inputRef }) => {
+      const store = useContext(MobxContext)
+      const { nodeLabelFilter, activeFilterTable: activeFilterTableIn } =
+        store.tree
+      // ISSUE: doc is not covered by active node array
+      // thus activeFilterTable is not set for /Dokumentation
+      const { pathname } = useLocation()
+      const isDocs = pathname.includes('/Dokumentation')
+      const activeFilterTable = isDocs ? 'doc' : activeFilterTableIn
 
-    const { setKey: setNodeLabelFilterKey, isFiltered: runIsFiltered } =
-      nodeLabelFilter
-    const isFiltered = runIsFiltered()
+      const { setKey: setNodeLabelFilterKey, isFiltered: runIsFiltered } =
+        nodeLabelFilter
+      const isFiltered = runIsFiltered()
 
-    const filterValue = nodeLabelFilter?.[activeFilterTable] ?? ''
-    const [value, setValue] = useState(filterValue)
-    // value should update when changed from outside
-    useEffect(() => {
-      if (filterValue === value) return
-      setValue(filterValue)
-    }, [filterValue])
+      const filterValue = nodeLabelFilter?.[activeFilterTable] ?? ''
+      const [value, setValue] = useState(filterValue)
+      // value should update when changed from outside
+      useEffect(() => {
+        if (filterValue === value) return
+        setValue(filterValue)
+      }, [filterValue])
 
-    const setNodeLabelFilter = useCallback(
-      (val) => {
-        setNodeLabelFilterKey({
-          value: val,
-          key: activeFilterTable,
-        })
-      },
-      [setNodeLabelFilterKey, activeFilterTable],
-    )
+      const setNodeLabelFilter = useCallback(
+        (val) => {
+          setNodeLabelFilterKey({
+            value: val,
+            key: activeFilterTable,
+          })
+        },
+        [setNodeLabelFilterKey, activeFilterTable],
+      )
 
-    const onChange = useCallback((e) => {
-      // remove some values as they can cause exceptions in regular expressions
-      const val = e.target.value.replaceAll('(', '').replaceAll(')', '')
-      setValue(val)
-    }, [])
+      const onChange = useCallback((e) => {
+        // remove some values as they can cause exceptions in regular expressions
+        const val = e.target.value.replaceAll('(', '').replaceAll(')', '')
+        setValue(val)
+      }, [])
 
-    const onKeyUp = useCallback(
-      (e) => {
-        if (e.key === 'Enter') setNodeLabelFilter(value)
-      },
-      [setNodeLabelFilter, value],
-    )
+      const onKeyUp = useCallback(
+        (e) => {
+          if (e.key === 'Enter') setNodeLabelFilter(value)
+        },
+        [setNodeLabelFilter, value],
+      )
 
-    const onClickEmpty = useCallback(() => {
-      setValue('')
-      setNodeLabelFilter('')
-    }, [setNodeLabelFilter, setValue])
+      const onClickEmpty = useCallback(() => {
+        toggleFilterInputIsVisible()
+        setValue('')
+        setNodeLabelFilter('')
+      }, [setNodeLabelFilter, setValue])
 
-    // if no activeFilterTable, show nothing
-    if (!activeFilterTable) return null
+      // if no activeFilterTable, show nothing
+      if (!activeFilterTable) return null
 
-    return (
-      <Container show={filterInputIsVisible.toString()}>
-        <StyledTextField
-          inputRef={inputRef}
-          label="Filter"
-          variant="standard"
-          fullWidth
-          value={value}
-          onChange={onChange}
-          onKeyUp={onKeyUp}
-          spellCheck="false"
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          // autofocus leads to focus being stolen from other filter inputs
-          // but necessary because rerenders happen (?)
-          autoFocus={true}
-          slotProps={{
-            input: {
-              endAdornment:
-                isFiltered || value?.length ?
-                  <InputAdornment position="end">
-                    <Tooltip title="Filter entfernen">
-                      <StyledIconButton
-                        aria-label="Filter entfernen"
-                        onClick={onClickEmpty}
-                        fontSize="small"
-                      >
-                        <FaTimes />
-                      </StyledIconButton>
-                    </Tooltip>
-                  </InputAdornment>
-                : null,
-            },
-          }}
-        />
-      </Container>
-    )
-  }),
+      return (
+        <Container show={filterInputIsVisible.toString()}>
+          <StyledTextField
+            inputRef={inputRef}
+            label="Filter"
+            variant="standard"
+            fullWidth
+            value={value}
+            onChange={onChange}
+            onKeyUp={onKeyUp}
+            spellCheck="false"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            // autofocus leads to focus being stolen from other filter inputs
+            // but necessary because rerenders happen (?)
+            autoFocus={true}
+            slotProps={{
+              input: {
+                endAdornment:
+                  isFiltered || value?.length ?
+                    <InputAdornment position="end">
+                      <Tooltip title="Filter entfernen">
+                        <StyledIconButton
+                          aria-label="Filter entfernen"
+                          onClick={onClickEmpty}
+                          fontSize="small"
+                        >
+                          <FaTimes />
+                        </StyledIconButton>
+                      </Tooltip>
+                    </InputAdornment>
+                  : null,
+              },
+            }}
+          />
+        </Container>
+      )
+    },
+  ),
 )
diff --git a/src/components/shared/FormTitle/index.jsx b/src/components/shared/FormTitle/index.jsx
@@ -92,6 +92,7 @@ export const FormTitle = memo(
           <Collapse in={filterInputIsVisible}>
             <FilterInput
               filterInputIsVisible={filterInputIsVisible}
+              toggleFilterInputIsVisible={toggleFilterInputIsVisible}
               ref={filterInputRef}
             />
           </Collapse>