Merge pull request #15 from jdeniau/eslint-rules

eslint rules

.eslintrc.json

@@ -15,7 +15,10 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/electron",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "overrides": [

.storybook/preview.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { useGlobals, useParameter } from '@storybook/manager-api';
-import { testables } from '../src/Contexts/ConfigurationContext';
+import { testables } from '../src/contexts/ConfigurationContext';
 import { ThemeContextProvider } from '../src/contexts/ThemeContext';
 import { MemoryRouter } from 'react-router';
 import { DEFAULT_THEME, THEME_LIST, getSetting } from '../src/theme';

package.json

@@ -61,6 +61,8 @@
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
     "mysql2": "^3.9.1",
     "react-router-dom": "^6.22.1",

src/component/Connection/Nav.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ConnectionContext } from '../../contexts/ConnectionContext';
 import Nav from './Nav';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 import { Layout } from 'antd';
 import { getSetting } from '../../theme';
 

src/component/DatabaseSelector.tsx

@@ -3,7 +3,6 @@ import { useDatabaseContext } from '../contexts/DatabaseContext';
 import { useConnectionContext } from '../contexts/ConnectionContext';
 import { useCallback, useEffect, useState } from 'react';
 import { Select } from 'antd';
-import { useNavigate } from 'react-router';
 
 interface DatabaseRow {
   Database: string;
@@ -12,7 +11,6 @@ interface DatabaseRow {
 export default function DatabaseSelector() {
   const { currentConnectionName } = useConnectionContext();
   const { updateConnectionState, configuration } = useConfiguration();
-  const navigate = useNavigate();
   const [databaseList, setDatabaseList] = useState<DatabaseRow[]>([]);
   const { database, setDatabase, executeQuery } = useDatabaseContext();
 
@@ -29,18 +27,23 @@ export default function DatabaseSelector() {
         setDatabase(currentDatabase);
       }
     });
-  }, [currentConnectionName]);
+  }, [
+    configuration.connections,
+    currentConnectionName,
+    executeQuery,
+    setDatabase,
+  ]);
 
   // TODO migrate that into something that does only the side effect ?
   useEffect(() => {
     updateConnectionState(currentConnectionName, 'activeDatabase', database);
-  }, [currentConnectionName, database]);
+  }, [currentConnectionName, database, updateConnectionState]);
 
   const handleChange = useCallback(
     (database: string) => {
       setDatabase(database);
     },
-    [currentConnectionName, navigate]
+    [setDatabase]
   );
 
   return (

src/component/TableGrid.tsx

@@ -45,6 +45,8 @@ function TableGrid({ fields, result }: TableGridProps): ReactElement {
         <tbody>
           {/* TODO : use the table primary key to make a real key */}
           {result.map((row: object) => (
+            //  TODO activate and use the PRIMARY KEY value as react key
+            // eslint-disable-next-line react/jsx-key
             <tr>
               {fields.map((field) => (
                 <Td key={field.name}>

src/component/TableLayout.tsx

@@ -40,7 +40,7 @@ function TableLayout({ tableName, database }: TableNameProps): ReactElement {
           setError(err);
         });
     },
-    [tableName, database, where]
+    [database, tableName, where, executeQuery]
   );
 
   useEffect(() => {
@@ -80,7 +80,7 @@ function TableGridWithConnection() {
 
   useEffect(() => {
     updateConnectionState(currentConnectionName, 'openedTable', tableName);
-  }, [tableName]);
+  }, [currentConnectionName, tableName, updateConnectionState]);
 
   if (!currentConnectionName || !database || !tableName) {
     return null;

src/component/TableList.tsx

@@ -31,7 +31,7 @@ function ConnectedTableList({ database }: TableListProps): ReactElement | null {
     ).then(([result]) => {
       setTableStatusList(result);
     });
-  }, [currentConnectionName, database]);
+  }, [currentConnectionName, database, executeQuery]);
 
   if (!tableStatusList) {
     return null;

src/contexts/ConfigurationContext.tsx

@@ -1,4 +1,11 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { Configuration, ConnectionAppState } from '../configuration/type';
 import { ConnectionObject } from '../component/Connection/types';
 
@@ -32,23 +39,32 @@ export function ConfigurationContextProvider({
     });
   }, []);
 
-  if (!configuration) {
-    return null;
-  }
+  const addConnectionToConfig = useCallback((connection: ConnectionObject) => {
+    window.config.addConnectionToConfig(connection);
+  }, []);
 
-  const value: ConfigurationContextType = {
-    configuration,
-    addConnectionToConfig: (connection: ConnectionObject) => {
-      window.config.addConnectionToConfig(connection);
-    },
-    updateConnectionState: <K extends keyof ConnectionAppState>(
+  const updateConnectionState = useCallback(
+    <K extends keyof ConnectionAppState>(
       connectionName: string,
       key: K,
       value: ConnectionAppState[K]
     ) => {
       window.config.updateConnectionState(connectionName, key, value);
     },
-  };
+    []
+  );
+  const value: ConfigurationContextType = useMemo(
+    () => ({
+      configuration,
+      addConnectionToConfig,
+      updateConnectionState,
+    }),
+    [configuration, addConnectionToConfig, updateConnectionState]
+  );
+
+  if (!configuration) {
+    return null;
+  }
 
   return (
     <ConfigurationContext.Provider value={value}>

src/contexts/DatabaseContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 interface SetDatabaseFunc {
   (theme: string): void;

src/contexts/ThemeContext.tsx

@@ -1,4 +1,10 @@
-import { createContext, useContext, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 import {
   getColor,
   getSetting,
@@ -7,7 +13,11 @@ import {
   DEFAULT_THEME,
 } from '../theme';
 import { styled, ThemeProvider } from 'styled-components';
-import { ConfigProvider as AntdConfigProvider, theme as antdTheme } from 'antd';
+import {
+  ConfigProvider as AntdConfigProvider,
+  ThemeConfig,
+  theme as antdTheme,
+} from 'antd';
 import { useConfiguration } from './ConfigurationContext';
 
 interface ChangeThemeFunc {
@@ -41,39 +51,43 @@ export function ThemeContextProvider({
   const { configuration } = useConfiguration();
   const [themeName, setThemeName] = useState(configuration.theme);
 
-  const changeTheme = (newTheme: string) => {
+  const changeTheme = useCallback((newTheme: string) => {
     window.config.changeTheme(newTheme);
     setThemeName(newTheme);
-  };
+  }, []);
 
   const theme = THEME_LIST[themeName];
 
+  const themeContextValue = useMemo(
+    () => ({ themeName, changeTheme }),
+    [changeTheme, themeName]
+  );
+
+  const antdThemeValue = useMemo(
+    (): ThemeConfig => ({
+      algorithm: isDarkTheme(theme) ? antdTheme.darkAlgorithm : undefined,
+      token: {
+        // Seed Token
+        colorPrimary: getSetting(theme, 'foreground'),
+
+        // Alias Token
+        colorBgContainer: getSetting(theme, 'background'),
+      },
+      components: {
+        Button: {
+          colorPrimary: getColor(theme, 'constant.language', 'foreground'),
+          colorLink: getColor(theme, 'support.type', 'foreground'),
+          algorithm: true,
+        },
+      },
+    }),
+    [theme]
+  );
+
   return (
     <ThemeProvider theme={theme}>
-      <ThemeContext.Provider value={{ themeName, changeTheme }}>
-        <AntdConfigProvider
-          theme={{
-            algorithm: isDarkTheme(theme) ? antdTheme.darkAlgorithm : undefined,
-            token: {
-              // Seed Token
-              colorPrimary: getSetting(theme, 'foreground'),
-
-              // Alias Token
-              colorBgContainer: getSetting(theme, 'background'),
-            },
-            components: {
-              Button: {
-                colorPrimary: getColor(
-                  theme,
-                  'constant.language',
-                  'foreground'
-                ),
-                colorLink: getColor(theme, 'support.type', 'foreground'),
-                algorithm: true,
-              },
-            },
-          }}
-        >
+      <ThemeContext.Provider value={themeContextValue}>
+        <AntdConfigProvider theme={antdThemeValue}>
           <LayoutDiv>{children}</LayoutDiv>
         </AntdConfigProvider>
       </ThemeContext.Provider>