Merge pull request #6 from jdeniau/lint-and-tests

Lint and tests

.eslintrc.json

@@ -4,6 +4,11 @@
     "es6": true,
     "node": true
   },
+  "ignorePatterns": [
+    "forge.config.ts",
+    "vite.*.config.*",
+    "stories/" // exclude stories from linting for now
+  ],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
@@ -12,5 +17,13 @@
     "plugin:import/electron",
     "plugin:import/typescript"
   ],
-  "parser": "@typescript-eslint/parser"
+  "parser": "@typescript-eslint/parser",
+  "overrides": [
+    {
+      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    }
+  ]
 }

.github/workflows/node.js.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Lint & Tests
+on:
+  push:
+    branches: [ "main" ]
+  pull_request: ~
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - run: yarn install --frozen-lockfile
+    - run: yarn lint
+    - run: yarn test

.gitignore

@@ -90,3 +90,5 @@ typings/
 
 # Electron-Forge
 out/
+
+.vscode/

package.json

@@ -9,7 +9,8 @@
     "package": "electron-forge package",
     "make": "electron-forge make",
     "publish": "electron-forge publish",
-    "lint:eslint": "eslint --ext .ts,.tsx .",
+    "lint": "yarn lint:eslint && yarn lint:types",
+    "lint:eslint": "eslint --quiet .",
     "lint:types": "tsc --noEmit",
     "test": "vitest"
   },

src/Contexts.tsx

@@ -14,7 +14,9 @@ interface ConnexionContextProps {
 export const ConnectionContext = createContext<ConnexionContextProps>({
   currentConnectionName: null,
   connectionNameList: [],
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   connectTo: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   setCurrentConnectionName: () => {},
 });
 
@@ -28,6 +30,7 @@ interface DatabaseContextProps {
 
 export const DatabaseContext = createContext<DatabaseContextProps>({
   database: null,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   setDatabase: () => {},
 });
 
@@ -40,6 +43,7 @@ interface ThemeContextProps {
 }
 const ThemeContext = createContext<ThemeContextProps>({
   themeName: DEFAULT_THEME.name,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   changeTheme: () => {},
 });
 
@@ -55,7 +59,6 @@ export function ThemeContextProvider({
   const [themeName, setThemeName] = useState(DEFAULT_THEME.name);
 
   const changeTheme = (newTheme: string) => {
-    window.config.changeTheme(newTheme);
     setThemeName(newTheme);
   };
 

src/component/Connection/ConnectionForm.tsx

@@ -1,6 +1,6 @@
 import { ConnectionContext, ConnectToFunc } from '../../Contexts';
 import connections from './SavedConnections';
-import { ConnectionObject } from '.';
+import { ConnectionObject } from './types';
 import { ChangeEvent, FormEvent, PureComponent, useContext } from 'react';
 
 interface ConnectionFormProps {
@@ -42,8 +42,7 @@ class ConnectionForm extends PureComponent<
       );
     }
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore: name is in state due to previous line
+    // @ts-expect-error: name is in state due to previous line
     this.setState({
       [name]: value,
     });

src/component/Connection/ConnectionPage.tsx

@@ -1,6 +1,6 @@
 import { Link, Navigate } from 'react-router-dom';
 import connections from './SavedConnections';
-import { ConnectionObject } from '.';
+import { ConnectionObject } from './types';
 import { ConnectionContext } from '../../Contexts';
 import { useContext, useEffect, useState } from 'react';
 

src/component/Connection/ConnectionStack.tsx

@@ -1,7 +1,7 @@
 import { NavigateFunction, useNavigate } from 'react-router';
 import { ConnectionContext, DatabaseContext } from '../../Contexts';
 import { PureComponent, ReactNode } from 'react';
-import { ConnectionObject } from '.';
+import { ConnectionObject } from './types';
 
 interface PropsWithoutHistory {
   children: ReactNode;

src/component/Connection/SavedConnections.ts

@@ -1,5 +1,5 @@
 // import Store from 'electron-store';
-import { ConnectionObject } from '.';
+import { ConnectionObject } from './types';
 // import fs from 'node:fs';
 // import path from 'node:path';
 

src/component/Connection/index.d.ts → src/component/Connection/types.ts

@@ -1,7 +1,7 @@
-export type ConnectionObject = {
-  name: string;
-  host: string;
-  port: number;
-  user: string;
-  password: string;
-};
+export type ConnectionObject = {
+  name: string;
+  host: string;
+  port: number;
+  user: string;
+  password: string;
+};

src/component/DatabaseSelector.tsx

@@ -8,9 +8,7 @@ interface DatabaseRow {
 export default function DatabaseSelector() {
   const { currentConnectionName } = useContext(ConnectionContext);
 
-  const [databaseList, setDatabaseList]: [DatabaseRow[], Function] = useState(
-    []
-  );
+  const [databaseList, setDatabaseList] = useState<DatabaseRow[]>([]);
 
   const { database, setDatabase } = useContext(DatabaseContext);
 

src/component/Query/WhereFilter.tsx

@@ -22,6 +22,7 @@ function WhereFilter({ defaultValue, onSubmit }: Props): ReactElement {
         onSubmit(where);
       }}
     >
+      {/* @ts-expect-error not present infuture TS verwsion */}
       <WhereArea value={where} onChange={(e) => setWhere(e.target.value)} />
 
       <input type="submit" />

src/component/TableGrid.tsx

@@ -43,18 +43,17 @@ function TableGrid({ fields, result }: TableGridProps): ReactElement {
       )}
       {result && fields && (
         <tbody>
-          {/* eslint-disable react/jsx-key */}
           {/* TODO : use the table primary key to make a real key */}
           {result.map((row: object) => (
             <tr>
               {fields.map((field) => (
                 <Td key={field.name}>
+                  {/* @ts-expect-error field name is in object. Need a better type ? */}
                   <Cell type={field.type} value={row[field.name]} />
                 </Td>
               ))}
             </tr>
           ))}
-          {/* eslint-enable react/jsx-key */}
         </tbody>
       )}
     </Table>

src/component/TableList.tsx

@@ -40,7 +40,7 @@ function ConnectedTableList({ database }: TableListProps): ReactElement | null {
         <div key={rowDataPacket.Name}>
           <StyledNavLink
             to={`/tables/${rowDataPacket.Name}`}
-            style={({ isActive }) => ({
+            style={({ isActive }: { isActive: boolean }) => ({
               fontWeight: isActive ? 'bold' : undefined,
             })}
           >

src/configuration.ts

@@ -2,7 +2,7 @@ import { dialog, safeStorage } from 'electron';
 import { resolve } from 'node:path';
 import { existsSync, mkdirSync, readFileSync, writeFile } from 'node:fs';
 import envPaths from 'env-paths';
-import { ConnectionObject } from './component/Connection';
+import { ConnectionObject } from './component/Connection/types';
 
 export type Configuration = {
   version: 1;

src/error-page.tsx

@@ -11,6 +11,7 @@ export default function ErrorPage() {
       <h1>Oops!</h1>
       <p>Sorry, an unexpected error has occurred.</p>
       <p>
+        {/* @ts-expect-error error might have one of tjose */}
         <i>{error.statusText || error.message}</i>
       </p>
     </div>

src/preload.ts

@@ -2,7 +2,7 @@
 // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
 
 import { Connection } from 'mysql2/promise';
-import { ConnectionObject } from './component/Connection';
+import { ConnectionObject } from './component/Connection/types';
 import { Configuration } from './configuration';
 import { contextBridge, ipcRenderer } from 'electron';
 
@@ -28,12 +28,14 @@ contextBridge.exposeInMainWorld('config', config);
 interface Sql {
   openConnection(params: ConnectionObject): Promise<Connection>;
   query(query: string): Promise<unknown>;
+  closeAllConnections(): Promise<void>;
 }
 
 // TODO : clone the binder object in sql/index.ts ?
 const sql: Sql = {
   openConnection: (params) => ipcRenderer.invoke('sql:connect', params),
   query: (query) => ipcRenderer.invoke('sql:query', query),
+  closeAllConnections: () => ipcRenderer.invoke('sql:closeAll'),
 };
 
 contextBridge.exposeInMainWorld('sql', sql);

src/sql/index.ts

@@ -1,5 +1,5 @@
 import { Connection, createConnection } from 'mysql2/promise';
-import { ConnectionObject } from 'src/component/Connection';
+import { ConnectionObject } from '../component/Connection/types';
 
 class ConnectionStack {
   private connections: Map<number, Connection> = new Map();
@@ -8,6 +8,7 @@ class ConnectionStack {
   #ipcEventBinding = {
     'sql:connect': this.connect,
     'sql:query': this.query,
+    'sql:closeAll': this.closeAllConnections,
   };
 
   bindIpcMain(ipcMain: Electron.IpcMain): void {
@@ -34,6 +35,16 @@ class ConnectionStack {
     return await connection.query(query);
   }
 
+  async closeAllConnections(): Promise<void> {
+    await Promise.all(
+      Array.from(this.connections.values()).map((connection) =>
+        connection.end()
+      )
+    );
+
+    this.connections.clear();
+  }
+
   #getConnection(senderId: number): Connection {
     const connection = this.connections.get(senderId);
 

src/styled.d.ts

@@ -0,0 +1,9 @@
+// import original module declarations
+import 'styled-components';
+import { TmTheme } from './theme';
+
+// and extend them!
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TmTheme {}
+}

src/theme/index.ts

@@ -4,7 +4,7 @@ import * as active4d from '../theme/active4d.json';
 
 const THEME_LIST_AS_ARRAY = [dracula, visualStudio, active4d] as const;
 
-type Theme = typeof THEME_LIST_AS_ARRAY[number];
+type Theme = (typeof THEME_LIST_AS_ARRAY)[number];
 
 export const THEME_LIST: Record<string, Theme> = {};
 THEME_LIST_AS_ARRAY.forEach((t) => {
@@ -13,7 +13,7 @@ THEME_LIST_AS_ARRAY.forEach((t) => {
 
 export const DEFAULT_THEME = THEME_LIST_AS_ARRAY[0];
 
-interface TmTheme {
+export interface TmTheme {
   readonly name: string;
   readonly author?: string;
   readonly settings: TmThemeSetting[];

tsconfig.json

@@ -13,5 +13,8 @@
     "resolveJsonModule": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "stories"]
+  "include": [
+    "src"
+    // "stories" /ignore stories for now
+  ]
 }