ESLint auto fixes

moneymgr_web/eslint.config.js

@@ -1,28 +1,23 @@
 import js from "@eslint/js";
-import globals from "globals";
+import reactDom from "eslint-plugin-react-dom";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
-import tseslint from "typescript-eslint";
 import reactX from "eslint-plugin-react-x";
-import reactDom from "eslint-plugin-react-dom";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
   { ignores: ["dist"] },
   {
     extends: [
       js.configs.recommended,
-      // Remove ...tseslint.configs.recommended and replace with this
-      // ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
       ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
       ...tseslint.configs.stylisticTypeChecked,
     ],
     files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
-      // other options...
       parserOptions: {
         project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
@@ -40,9 +35,20 @@ export default tseslint.config(
         "warn",
         { allowConstantExport: true },
       ],
-
       ...reactX.configs["recommended-typescript"].rules,
       ...reactDom.configs.recommended.rules,
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-extraneous-class": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "react-refresh/only-export-components": "off",
     },
   }
 );

moneymgr_web/src/App.tsx

@@ -53,12 +53,12 @@ export function App() {
   );
 
   return (
-    <AuthContextK.Provider value={context}>
+    <AuthContextK value={context}>
       <RouterProvider router={router} />
-    </AuthContextK.Provider>
+    </AuthContextK>
   );
 }
 
 export function useAuth(): AuthContext {
-  return React.useContext(AuthContextK)!;
+  return React.use(AuthContextK)!;
 }

moneymgr_web/src/api/ApiClient.ts

@@ -44,7 +44,7 @@ export class APIClient {
    */
   static async exec(args: RequestParams): Promise<APIResponse> {
     let body: string | undefined | FormData = undefined;
-    let headers: any = {};
+    const headers: any = {};
 
     // JSON request
     if (args.jsonData) {
@@ -67,17 +67,17 @@ export class APIClient {
       const res: XMLHttpRequest = await new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.upload.addEventListener("progress", (e) =>
-          args.upProgress!(e.loaded / e.total)
+          { args.upProgress!(e.loaded / e.total); }
         );
-        xhr.addEventListener("load", () => resolve(xhr));
+        xhr.addEventListener("load", () => { resolve(xhr); });
         xhr.addEventListener("error", () =>
-          reject(new Error("File upload failed"))
+          { reject(new Error("File upload failed")); }
         );
         xhr.addEventListener("abort", () =>
-          reject(new Error("File upload aborted"))
+          { reject(new Error("File upload aborted")); }
         );
         xhr.addEventListener("timeout", () =>
-          reject(new Error("File upload timeout"))
+          { reject(new Error("File upload timeout")); }
         );
         xhr.open(args.method, url, true);
         xhr.withCredentials = true;

moneymgr_web/src/hooks/context_providers/AlertDialogProvider.tsx

@@ -39,7 +39,7 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <AlertContextK.Provider value={hook}>{p.children}</AlertContextK.Provider>
+      <AlertContextK value={hook}>{p.children}</AlertContextK>
 
       <Dialog
         open={open}
@@ -64,5 +64,5 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useAlert(): AlertContext {
-  return React.useContext(AlertContextK)!;
+  return React.use(AlertContextK)!;
 }

moneymgr_web/src/hooks/context_providers/ConfirmDialogProvider.tsx

@@ -53,13 +53,13 @@ export function ConfirmDialogProvider(
 
   return (
     <>
-      <ConfirmContextK.Provider value={hook}>
+      <ConfirmContextK value={hook}>
         {p.children}
-      </ConfirmContextK.Provider>
+      </ConfirmContextK>
 
       <Dialog
         open={open}
-        onClose={() => handleClose(false)}
+        onClose={() => { handleClose(false); }}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
         onKeyUp={keyUp}
@@ -71,10 +71,10 @@ export function ConfirmDialogProvider(
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => handleClose(false)} autoFocus>
+          <Button onClick={() => { handleClose(false); }} autoFocus>
             Cancel
           </Button>
-          <Button onClick={() => handleClose(true)} color="error">
+          <Button onClick={() => { handleClose(true); }} color="error">
             {confirmButton ?? "Confirm"}
           </Button>
         </DialogActions>
@@ -84,5 +84,5 @@ export function ConfirmDialogProvider(
 }
 
 export function useConfirm(): ConfirmContext {
-  return React.useContext(ConfirmContextK)!;
+  return React.use(ConfirmContextK)!;
 }

moneymgr_web/src/hooks/context_providers/DarkThemeProvider.tsx

@@ -29,7 +29,7 @@ export function DarkThemeProvider(p: PropsWithChildren): React.ReactElement {
   );
 
   return (
-    <DarkThemeContextK.Provider
+    <DarkThemeContextK
       value={{
         enabled: enabled,
         setEnabled(enabled) {
@@ -41,10 +41,10 @@ export function DarkThemeProvider(p: PropsWithChildren): React.ReactElement {
       <ThemeProvider theme={enabled ? darkTheme : lightTheme}>
         {p.children}
       </ThemeProvider>
-    </DarkThemeContextK.Provider>
+    </DarkThemeContextK>
   );
 }
 
 export function useDarkTheme(): DarkThemeContext {
-  return React.useContext(DarkThemeContextK)!;
+  return React.use(DarkThemeContextK)!;
 }

moneymgr_web/src/hooks/context_providers/LoadingMessageProvider.tsx

@@ -6,10 +6,10 @@ import {
 } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
-type LoadingMessageContext = {
+interface LoadingMessageContext {
   show: (message: string) => void;
   hide: () => void;
-};
+}
 
 const LoadingMessageContextK =
   React.createContext<LoadingMessageContext | null>(null);
@@ -34,9 +34,9 @@ export function LoadingMessageProvider(
 
   return (
     <>
-      <LoadingMessageContextK.Provider value={hook}>
+      <LoadingMessageContextK value={hook}>
         {p.children}
-      </LoadingMessageContextK.Provider>
+      </LoadingMessageContextK>
 
       <Dialog open={open}>
         <DialogContent>
@@ -60,5 +60,5 @@ export function LoadingMessageProvider(
 }
 
 export function useLoadingMessage(): LoadingMessageContext {
-  return React.useContext(LoadingMessageContextK)!;
+  return React.use(LoadingMessageContextK)!;
 }

moneymgr_web/src/hooks/context_providers/SnackbarProvider.tsx

@@ -24,9 +24,9 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <SnackbarContextK.Provider value={hook}>
+      <SnackbarContextK value={hook}>
         {p.children}
-      </SnackbarContextK.Provider>
+      </SnackbarContextK>
 
       <Snackbar
         open={open}
@@ -39,5 +39,5 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useSnackbar(): SnackbarContext {
-  return React.useContext(SnackbarContextK)!;
+  return React.use(SnackbarContextK)!;
 }

moneymgr_web/src/main.tsx

@@ -26,7 +26,7 @@ createRoot(document.getElementById("root")!).render(
               <LoadingMessageProvider>
                 <AsyncWidget
                   loadKey={1}
-                  load={async () => await ServerApi.LoadConfig()}
+                  load={async () => { await ServerApi.LoadConfig(); }}
                   errMsg="Failed to load static server configuration!"
                   build={() => <App />}
                 />

moneymgr_web/src/widgets/AsyncWidget.tsx

@@ -64,7 +64,7 @@ export function AsyncWidget(p: {
 
         <Button onClick={load}>Try again</Button>
 
-        {p.errAdditionalElement && p.errAdditionalElement()}
+        {p.errAdditionalElement?.()}
       </Box>
     );
 

moneymgr_web/src/widgets/BaseAuthenticatedPage.tsx

@@ -40,7 +40,7 @@ export function BaseAuthenticatedPage(): React.ReactElement {
         </>
       )}
       build={() => (
-        <AuthInfoContextK.Provider
+        <AuthInfoContextK
           value={{
             info: authInfo!,
             reloadAuthInfo: load,
@@ -84,12 +84,12 @@ export function BaseAuthenticatedPage(): React.ReactElement {
               </div>
             </Box>
           </Box>
-        </AuthInfoContextK.Provider>
+        </AuthInfoContextK>
       )}
     />
   );
 }
 
 export function useAuthInfo(): AuthInfoContext {
-  return React.useContext(AuthInfoContextK)!;
+  return React.use(AuthInfoContextK)!;
 }

moneymgr_web/src/widgets/DarkThemeButton.tsx

@@ -9,7 +9,7 @@ export function DarkThemeButton(): React.ReactElement {
   return (
     <Tooltip title="Activer / désactiver le mode sombre">
       <IconButton
-        onClick={() => darkTheme.setEnabled(!darkTheme.enabled)}
+        onClick={() => { darkTheme.setEnabled(!darkTheme.enabled); }}
         style={{ color: "inherit" }}
       >
         {!darkTheme.enabled ? <DarkModeIcon /> : <Brightness7Icon />}

moneymgr_web/src/widgets/MoneyWebAppBar.tsx

@@ -44,7 +44,7 @@ export function MoneyWebAppBar(p: {
           <DarkThemeButton />
 
           <Button size="large" color="inherit">
-            {authInfo!.info.name}
+            {authInfo.info.name}
           </Button>
 
           <Button

moneymgr_web/src/widgets/forms/CheckboxInput.tsx

@@ -12,7 +12,7 @@ export function CheckboxInput(p: {
         <Checkbox
           disabled={!p.editable}
           checked={p.checked}
-          onChange={(e) => p.onValueChange(e.target.checked)}
+          onChange={(e) => { p.onValueChange(e.target.checked); }}
         />
       }
       label={p.label}