Merge pull request #19 from jfardilha2/eslint/add-new-rules

Eslint/add new rules

Author: amanteaux

templates/admin/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     // => par contre on ne peut pas laisser ce plugin tout le temps
     // => car il ne tient ni compte des polyfill, ni des navigateurs configurés dans browserslist
     // 'plugin:typescript-compat/recommended',
+    'plugin:@sayari/recommended'
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -26,7 +27,8 @@ module.exports = {
   },
   plugins: [
     'react',
-    '@typescript-eslint'
+    '@typescript-eslint',
+    'react-hooks'
   ],
   settings: {
     react: {
@@ -103,5 +105,9 @@ module.exports = {
         'variableDeclarationIgnoreFunction': true
       }
     ],
+    'react-hooks/rules-of-hooks': 'error',
+    // Add all your custom hooks which have dependencies in the additional hooks
+    // If you have several hooks, here is the syntax 'additionalHooks': '(hook1|hook2)'
+    'react-hooks/exhaustive-deps': ['warn', { 'additionalHooks': 'useOnDependenciesChange|useEffectWithSsrSupport|useObservableLoader' }],
   },
 };

templates/admin/package.json

@@ -27,6 +27,7 @@
     "validator": "^13.7.0"
   },
   "devDependencies": {
+    "@sayari/eslint-plugin": "^0.0.1-rc.4",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^29.1.2",
     "@types/react": "^18.0.21",

templates/admin/src/components/features/login/Login.tsx

@@ -32,7 +32,7 @@ export default function Login() {
     if (isAuthenticated) {
       navigate({ pathname: HOME });
     }
-  }, [isAuthenticated]);
+  }, [isAuthenticated, navigate]);
 
   return (
     <div className="login-layout">

templates/admin/src/lib/plume-admin-users/pages/UsersEdit.tsx

@@ -52,7 +52,10 @@ export default class UsersEdit {
     const isCreation: boolean = userId === undefined;
 
     // small optimization to avoid fetching the current user during each render cycle
-    const userToEdit: AdminUserDetails | undefined = useMemo(() => findUser(userId, usersWithRoles), [usersWithRoles]);
+    const userToEdit: AdminUserDetails | undefined = useMemo(
+      () => findUser(userId, usersWithRoles),
+      [userId, usersWithRoles],
+    );
 
     const formContext: UseFormReturn<AdminUserParameters> = useForm<AdminUserParameters>({
       defaultValues: userToEdit,
@@ -63,7 +66,7 @@ export default class UsersEdit {
     } = formContext;
 
     // when the users are loaded from the upper component, we need update the form with the new values
-    useOnDependenciesChange(() => reset(userToEdit), [usersWithRoles]);
+    useOnDependenciesChange(() => reset(userToEdit), [userToEdit, reset]);
 
     // data validation
 

templates/admin/src/lib/plume-http-react-hook-loader/dataLoaderHook.ts

@@ -36,6 +36,7 @@ export default function useDataLoader<T>(
       // mark the component as unmounted
       isMountedRef.current = false;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 
   return {

templates/admin/src/lib/plume-http-react-hook-loader/observableLoaderHook.ts

@@ -107,6 +107,9 @@ export function useObservableLoaderConfigurable<T extends ObservableDataHandler<
     .observableSources
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     .map((dataObservable: ObservableDataHandler<any>) => {
+      // the number of observable sources is fixed and cannot change,
+      // so the number of time useObservable is called will be stable
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any,react-hooks/rules-of-hooks
       const data: T = useObservable(dataObservable.dataObservable);
 
       return {

templates/admin/src/lib/plume-http-react-hook-loader/timeoutHook.ts

@@ -1,4 +1,6 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
+import {
+  MutableRefObject, useEffect, useRef,
+} from 'react';
 
 /**
  * Enable to control the timeout in the component where it is used.
@@ -50,7 +52,10 @@ export default function useTimeout(callback: () => void, delayInMillis: number)
   useEffect(() => {
     startTimeout();
     return stopTimeout;
-  }, [delayInMillis, startTimeout, stopTimeout]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // delayInMillis is not in the dependencies. If it changes at runtime, we do not want to reset the hook.
+  // If delay can change at runtime, this hook is not the best solution to use.
 
   const restartTimeout = () => {
     stopTimeout();

templates/admin/src/lib/react-hooks-alias/ReactHooksAlias.ts

@@ -12,6 +12,7 @@ import {
  * @param callback The function that will be called once before the component has not yet been rendered
  */
 export function useOnBeforeComponentRendered(callback: () => void): void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useMemo(callback, []);
 }
 
@@ -25,17 +26,17 @@ export function useOnBeforeComponentRendered(callback: () => void): void {
  * else this function will be called during unmounting. If this behavior is needed, `useEffect` should be used instead.
  */
 export function useOnComponentMounted(callback: () => void): void {
-  useEffect(
-    callback,
-    [],
-  );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(callback, []);
 }
 
 export function useOnComponentUnMounted(callback: () => void): void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => callback, []);
 }
 
 export function useOnDependenciesChange(callback: () => void, dependencies: DependencyList): void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(callback, dependencies);
 }
 
@@ -53,9 +54,11 @@ export function useOnDependenciesChange(callback: () => void, dependencies: Depe
 export function useEffectWithSsrSupport(callback: () => void, dependencies: DependencyList = []): void {
   if (typeof process !== 'undefined') {
     // server context
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useMemo(callback, dependencies);
   } else {
     // browser context
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(callback, dependencies);
   }
 }

templates/admin/yarn.lock

@@ -2461,6 +2461,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sayari/eslint-plugin@npm:^0.0.1-rc.4":
+  version: 0.0.1-rc.4
+  resolution: "@sayari/eslint-plugin@npm:0.0.1-rc.4"
+  peerDependencies:
+    eslint: ^8.5.0
+  checksum: c191a91806cf9e9f43a909b838d7274a6dfe6eedb183bd42d8820cf78bf77fe6264a422d81d51dbf28a3ccc38c4c2a9eedde3a12d9dfcf5157b9d16a6689962c
+  languageName: node
+  linkType: hard
+
 "@sinclair/typebox@npm:^0.24.1":
   version: 0.24.46
   resolution: "@sinclair/typebox@npm:0.24.46"
@@ -10033,6 +10042,7 @@ resolve@^2.0.0-next.3:
     "@mui/styles": ^5.10.9
     "@mui/system": ^5.10.9
     "@mui/x-date-pickers": ^5.0.5
+    "@sayari/eslint-plugin": ^0.0.1-rc.4
     "@types/enzyme": ^3.10.12
     "@types/jest": ^29.1.2
     "@types/react": ^18.0.21

templates/front/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     // => par contre on ne peut pas laisser ce plugin tout le temps
     // => car il ne tient ni compte des polyfill, ni des navigateurs configurés dans browserslist
     // 'plugin:typescript-compat/recommended',
+    'plugin:@sayari/recommended'
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -27,6 +28,7 @@ module.exports = {
   plugins: [
     'react',
     '@typescript-eslint',
+    'react-hooks'
   ],
   settings: {
     react: {
@@ -103,5 +105,9 @@ module.exports = {
         'variableDeclarationIgnoreFunction': true
       }
     ],
+    'react-hooks/rules-of-hooks': 'error',
+    // Add all your custom hooks which have dependencies in the additional hooks
+    // If you have several hooks, here is the syntax 'additionalHooks': '(hook1|hook2)'
+    'react-hooks/exhaustive-deps': ['warn', { 'additionalHooks': 'useOnDependenciesChange|useEffectWithSsrSupport|useObservableLoader' }],
   },
 };