chore: add exceptions for new linter rule or replace by something better

Author: surt91

frontend/src/components/Logo.tsx

@@ -21,6 +21,7 @@ export function Logo(props: LogoProps) {
   const [path, setPath] = useState<string>('');
   const [loaded, setLoaded] = useState(false);
 
+  /* eslint-disable react-hooks/set-state-in-effect -- Resetting state and creating object URL when props change is a valid effect pattern */
   useEffect(() => {
     setLoaded(false);
 
@@ -38,6 +39,7 @@ export function Logo(props: LogoProps) {
 
     setPath(window.URL.createObjectURL(previewLogo));
   }, [url, previewLogo]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   return path ? (
     <img

frontend/src/components/PdfViewer.tsx

@@ -79,9 +79,11 @@ export function PdfViewer({ selectedDocument, selectedSource, onClose }: PdfView
     setNumPages(numPages);
   }
 
+  /* eslint-disable react-hooks/set-state-in-effect -- Processing fetched document data is a valid effect pattern */
   useEffect(() => {
     handleSelectedPdfDocument();
   }, [data, handleSelectedPdfDocument]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   const container = (children: ReactNode) => (
     <Card withBorder mt="sm" mr="xs" ml="6">

frontend/src/hooks/stored.ts

@@ -2,13 +2,13 @@ import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'reac
 import { isMobile } from 'src/pages/utils';
 
 export function useSidebarState(key: string): [boolean, (value: boolean) => void] {
-  const [state, setState] = useState(!isMobile());
-
-  useEffect(() => {
+  const [state, setState] = useState(() => {
+    if (isMobile()) {
+      return false;
+    }
     const fromLocalStore = localStorage.getItem(key);
-
-    if (!isMobile()) setState(fromLocalStore !== 'false');
-  }, [key]);
+    return fromLocalStore !== 'false';
+  });
 
   const update = useCallback(
     (value: boolean) => {

frontend/src/pages/admin/extensions/ExtensionsPage.tsx

@@ -38,6 +38,7 @@ export function ExtensionsPage() {
     queryFn: () => api.extensions.getConfiguration(configurationId),
   });
 
+  /* eslint-disable react-hooks/set-state-in-effect -- Keeping previous value during refetch avoids UI flicker */
   useEffect(() => {
     if (configuration) {
       const updatedConfiguration = configurations.find((c) => c.id == configuration.id);
@@ -46,6 +47,7 @@ export function ExtensionsPage() {
       }
     }
   }, [configuration, configurations]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   const deletingConfiguration = useMutation({
     mutationFn: (configuration: ConfigurationDto) => {

frontend/src/pages/admin/users/UsersPage.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useApi, UserDto, UserGroupDto } from 'src/api';
 import { Page, Pagination, Search } from 'src/components';
 import { useEventCallback } from 'src/hooks';
@@ -22,6 +22,11 @@ export function UsersPage() {
   const [toCreate, setToCreate] = useState<boolean>();
   const [toUpdate, setToUpdate] = useState<UserDto | null>(null);
 
+  const handleSearch = useCallback((newQuery: string | undefined) => {
+    setQuery(newQuery);
+    setPage(0);
+  }, []);
+
   const { data: loadedUsers, isFetched } = useQuery({
     queryKey: ['users', page, query],
     queryFn: () => api.users.getUsers(page, 20, query),
@@ -38,10 +43,6 @@ export function UsersPage() {
     }
   }, [loadedUsers, setUsers]);
 
-  useEffect(() => {
-    setPage(0);
-  }, [query]);
-
   const doChangePage = useEventCallback((page: number) => {
     setPage(page);
   });
@@ -60,7 +61,7 @@ export function UsersPage() {
           <h2 className="text-3xl">{texts.users.headline}</h2>
 
           <div className="flex gap-4">
-            <Search value={query} onSearch={setQuery} />
+            <Search value={query} onSearch={handleSearch} />
 
             <Button onClick={() => setToCreate(true)}>
               <IconPlus className="mr-2" /> {texts.users.create}