Fix ESLint issues

moneymgr_web/src/api/MovementsApi.ts

@@ -63,7 +63,7 @@ export class MovementApi {
       limit?: number;
     }
   ): Promise<Movement[]> {
-    let filtersS = new URLSearchParams();
+    const filtersS = new URLSearchParams();
     if (filters) {
       if (filters.amount_min)
         filtersS.append("amount_min", filters.amount_min.toString());

moneymgr_web/src/dialogs/AttachInboxEntryToMovementDialog.tsx

@@ -65,7 +65,7 @@ export function AttachInboxEntryToMovementDialog(p: {
           </Typography>
           {Number.isFinite(p.entry.amount) &&
             value !== undefined &&
-            p.entry.amount !== value?.amount && (
+            p.entry.amount !== value.amount && (
               <Alert severity="warning">Amount mismatch!</Alert>
             )}
           <Button

moneymgr_web/src/dialogs/AttachMultipleInboxEntriesDialog.tsx

@@ -13,7 +13,7 @@ export function AttachMultipleInboxEntriesDialog(p: {
   entries: InboxEntry[];
   movements: Movement[][];
   onClose: () => void;
-  onSelected: (mapping: Array<number | undefined>) => void;
+  onSelected: (mapping: (number | undefined)[]) => void;
 }): React.ReactElement {
   const handleSubmit = () => {};
   return (

moneymgr_web/src/dialogs/UpdateMovementDialog.tsx

@@ -78,14 +78,14 @@ export function UpdateMovementDialog(p: {
           label="Amount"
           variant="standard"
           style={style}
-          onChange={(a) =>
+          onChange={(a) => {
             setMovement((m) => {
               return {
                 ...m,
-                account_id: a ?? 0,
+                account_id: a,
               };
-            })
+            });
-          }
+          }}
         />
         {/* Date input */}
         <DateInput
@@ -94,14 +94,14 @@ export function UpdateMovementDialog(p: {
           label="Movement date"
           value={movement.time}
           style={style}
-          onValueChange={(t) =>
+          onValueChange={(t) => {
             setMovement((m) => {
               return {
                 ...m,
                 time: t ?? 0,
               };
-            })
+            });
-          }
+          }}
         />
         {/* Label input */}
         <TextInput
@@ -109,14 +109,14 @@ export function UpdateMovementDialog(p: {
           placeholder={`Movement label`}
           label="Movement label"
           value={movement.label}
-          onValueChange={(l) =>
+          onValueChange={(l) => {
             setMovement((m) => {
               return {
                 ...m,
                 label: l ?? "",
               };
-            })
+            });
-          }
+          }}
           size={ServerApi.Config.constraints.movement_label}
         />
         {/* Amount input */}
@@ -126,14 +126,14 @@ export function UpdateMovementDialog(p: {
           label="Amount"
           style={style}
           value={movement.amount}
-          onValueChange={(l) =>
+          onValueChange={(l) => {
             setMovement((m) => {
               return {
                 ...m,
                 amount: l,
               };
-            })
+            });
-          }
+          }}
         />
       </DialogContent>
       <DialogActions>

moneymgr_web/src/routes/AccountRoute.tsx

@@ -393,7 +393,7 @@ function MovementsTable(p: {
         />
         <span style={{ flex: 1 }}></span>
         <Tooltip title="Refresh table">
-          <IconButton onClick={() => p.needReload(false)}>
+          <IconButton onClick={() => { p.needReload(false); }}>
             <RefreshIcon />
           </IconButton>
         </Tooltip>

moneymgr_web/src/routes/InboxRoute.tsx

@@ -89,7 +89,7 @@ export function InboxRoute(): React.ReactElement {
       <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
         <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
           <AsyncWidget
-            loadKey={loadKey.current + String(includeAttached)}
+            loadKey={`${loadKey.current}/${includeAttached}`}
             load={load}
             errMsg="Failed to load the content of inbox!"
             build={() => (
@@ -277,7 +277,7 @@ function InboxTable(p: {
     setAttachMultipleMovements(undefined);
   };
 
-  const handlePerformAttachMultiple = (mapping: Array<number | undefined>) => {
+  const handlePerformAttachMultiple = (mapping: (number | undefined)[]) => {
     console.info(attachMultipleEntries, attachMultipleMovements, mapping);
   };
 
@@ -392,7 +392,7 @@ function InboxTable(p: {
       editable: false,
       getActions: (params) => {
         return [
-          <Tooltip title="Attach entry to movement">
+          <Tooltip key="attach" title="Attach entry to movement">
             <GridActionsCellItem
               key={`attach-${params.row.id}`}
               icon={<SearchIcon />}
@@ -447,7 +447,11 @@ function InboxTable(p: {
         />
         <span style={{ flex: 1 }}></span>
         <Tooltip title="Refresh table">
-          <IconButton onClick={() => p.onReload(false)}>
+          <IconButton
+            onClick={() => {
+              p.onReload(false);
+            }}
+          >
             <RefreshIcon />
           </IconButton>
         </Tooltip>
@@ -483,7 +487,7 @@ function InboxTable(p: {
             },
             columns: {
               columnVisibilityModel: {
-                movement_id: p.showMovements!!,
+                movement_id: p.showMovements!,
               },
             },
           }}

moneymgr_web/src/widgets/MovementWidget.tsx

@@ -36,7 +36,7 @@ export function MovementWidget(p: { movement: Movement }): React.ReactElement {
         height: "100%",
       }}
     >
-      {p.movement!.amount > 0 ? (
+      {p.movement.amount > 0 ? (
         <CallReceivedIcon color="success" />
       ) : (
         <CallMadeIcon color="error" />
@@ -51,15 +51,15 @@ export function MovementWidget(p: { movement: Movement }): React.ReactElement {
         }}
       >
         <span style={{ height: "1em", lineHeight: 1 }}>
-          {p.movement?.label}
+          {p.movement.label}
         </span>
         <span style={{ display: "flex", alignItems: "center", lineHeight: 1 }}>
-          <AmountWidget amount={p.movement!.amount} />
+          <AmountWidget amount={p.movement.amount} />
           <span style={{ width: "0.5em" }} />
           &bull;
           <span style={{ width: "0.5em" }} />
-          <AccountIconWidget account={accounts.get(p.movement!.account_id)!} />
+          <AccountIconWidget account={accounts.get(p.movement.account_id)!} />
-          {accounts.get(p.movement!.account_id)?.name}
+          {accounts.get(p.movement.account_id)?.name}
           <span style={{ width: "0.5em" }} />
           &bull; <span style={{ width: "0.5em" }} />
           {fmtDateFromTime(p.movement.time)}

moneymgr_web/src/widgets/SelectMovementWidget.tsx

@@ -133,19 +133,19 @@ export function SelectMovementWidget(p: {
 
         <div style={{ flex: 1 }}>
           <AsyncWidget
-            loadKey={
+            loadKey={`${loadKey.current}/${accountId}/${JSON.stringify(
-              loadKey.current + "/" + accountId + "/" + JSON.stringify(filters)
+              filters
-            }
+            )}`}
             load={load}
             errMsg="Failed to load the list of movements!"
             build={() => {
-              if (list === null)
+              if (list === undefined)
                 return (
                   <Typography style={{ textAlign: "center", padding: "20px" }}>
                     Select an account to begin research.
                   </Typography>
                 );
-              if (list?.length === 0)
+              if (list.length === 0)
                 return (
                   <Typography style={{ textAlign: "center", padding: "20px" }}>
                     No result.
@@ -154,11 +154,13 @@ export function SelectMovementWidget(p: {
 
               return (
                 <>
-                  {list?.map((entry) => (
+                  {list.map((entry) => (
-                    <ListItem>
+                    <ListItem key={entry.id}>
                       <ListItemButton
                         selected={entry.id === p.value}
-                        onClick={() => p.onChange(entry)}
+                        onClick={() => {
+                          p.onChange(entry);
+                        }}
                       >
                         <MovementWidget movement={entry} />
                       </ListItemButton>

moneymgr_web/src/widgets/forms/AccountInput.tsx

@@ -21,13 +21,15 @@ export function AccountInput(p: {
     <Select
       value={current}
       label={p.label ?? ""}
-      onChange={(e) => p.onChange(Number(e.target.value))}
+      onChange={(e) => {
+        p.onChange(Number(e.target.value));
+      }}
       size="small"
       style={p.style}
       variant={p.variant}
     >
       {accounts.list.list.map((a) => (
-        <MenuItem value={a.id}>
+        <MenuItem key={a.id} value={a.id}>
           <span
             style={{
               display: "inline-flex",

moneymgr_web/src/widgets/forms/AmountInput.tsx

@@ -49,8 +49,7 @@ export function AmountInput(p: {
         // Empty field
         if (a?.length === 0 || a === undefined) p.onValueChange(NaN);
         // Input number
-        else if ((a?.length ?? 0) > 0 && !Number.isNaN(parsed))
+        else if (a.length > 0 && !Number.isNaN(parsed)) p.onValueChange(parsed);
-          p.onValueChange(parsed);
       }}
     />
   );