Address (or bypass) lint errors

gjoseph · Nov 29, 2024 · e23b778 · e23b778
1 parent a414efa
commit e23b778
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/src/web/MainAppScreen.tsx b/src/web/MainAppScreen.tsx
@@ -39,7 +39,7 @@ export const MainAppScreen: React.FC<
             <TabbedPanels
               initialTabIdx={0}
               panels={[
-                <TabPanel label="Graphs">
+                <TabPanel label="Graphs" key="Graphs_tab">
                   <Grid container spacing={0}>
                     {charts.map((chart, idx) => (
                       <Grid item xs={12} md={6} xl={4} key={idx}>
@@ -52,14 +52,15 @@ export const MainAppScreen: React.FC<
                     ))}
                   </Grid>
                 </TabPanel>,
-                <TabPanel label="Transactions">
+                <TabPanel label="Transactions" key="Transactions_tab">
                   <TransactionsTable
                     accounts={props.accounts}
                     transactions={props.transactions}
                   />
                 </TabPanel>,
                 <TabPanel
                   label="Uncategorised"
+                  key="Uncategorised_tab"
                   warning={
                     uncategorised.uncategorisedTransactions.length &&
                     `There are ${uncategorised.uncategorisedTransactions.length} uncategorised records`
@@ -68,13 +69,13 @@ export const MainAppScreen: React.FC<
                   <TabbedPanels
                     initialTabIdx={0}
                     panels={[
-                      <TabPanel label="All">
+                      <TabPanel label="All" key="All_tab">
                         <TransactionsTable
                           accounts={props.accounts}
                           transactions={uncategorised.uncategorisedTransactions}
                         />
                       </TabPanel>,
-                      <TabPanel label="Most common">
+                      <TabPanel label="Most common" key="Most_common_tab">
                         <DataGridWrapper
                           columns={mostCommonDescriptionsColumns}
                           rows={uncategorised.mostCommonDescriptions}
@@ -84,14 +85,15 @@ export const MainAppScreen: React.FC<
                     ]}
                   />
                 </TabPanel>,
-                <TabPanel label="Raw records">
+                <TabPanel label="Raw records" key="Raw_records_tab">
                   <RawRecordsTable
                     filesWithRawRecords={props.filesWithRawRecords}
                     accounts={props.accounts}
                   />
                 </TabPanel>,
                 <TabPanel
                   label="Duplicates"
+                  key="Duplicates_tab"
                   tooltip={
                     "(TODO)Use this tab to find overlapping/duplicate records in CSV files"
                     // TODO also highlight this when there _are_ duplicate records

diff --git a/src/web/filedrop/FileDrop.tsx b/src/web/filedrop/FileDrop.tsx
@@ -68,6 +68,7 @@ export const withDropZone =
   <P extends object>(
     WrappedComponent: React.ComponentType<P>,
   ): React.FC<P & FileDropProps> =>
+  // eslint-disable-next-line react/display-name
   ({ addFile, minimal, ...props }: FileDropProps) => (
     <FileDrop addFile={addFile} minimal={minimal}>
       <WrappedComponent {...(props as P)} />

diff --git a/src/web/layout/Nav.test.tsx b/src/web/layout/Nav.test.tsx
@@ -3,6 +3,7 @@ import { TopBar } from "./Nav";
 import LocalPizzaIcon from "@mui/icons-material/LocalPizza";
 import "@testing-library/jest-dom/vitest";
 import { test, expect } from "vitest";
+import React from "react";
 
 test("renders title", () => {
   const { getByText } = render(

diff --git a/src/web/layout/Nav.tsx b/src/web/layout/Nav.tsx
@@ -79,12 +79,15 @@ const AppBarButtons = ({
   </ButtonGroup>
 );
 
-const AppSpeedDial: React.FC<{
+type AppSpeedDiaProps = {
   icon: React.JSXElementConstructor<any>;
   iconAndOnClicks: IconAndOnClick[];
-}> =
+};
+
+const AppSpeedDial: React.FC<AppSpeedDiaProps> =
   // Need to use forwardRef so we can use this component in <Slide> below
-  React.forwardRef((props, ref) => (
+  // eslint-disable-next-line react/display-name
+  React.forwardRef((props: AppSpeedDiaProps, ref) => (
     <SpeedDial
       ref={ref}
       ariaLabel="Quick access menu"

diff --git a/src/web/util-comps/decorators.tsx b/src/web/util-comps/decorators.tsx
@@ -1,12 +1,13 @@
 import { Badge } from "@mui/material";
-import { ComponentType } from "react";
+import React, { ComponentType } from "react";
 
 // subset of Badge#color
 type Level = "error" | "info" | "success" | "warning";
 
 export const withDotBadge =
   (level: Level) =>
   <P,>(WrappedComponent: ComponentType<P>) =>
+  // eslint-disable-next-line react/display-name
   (props: P & JSX.IntrinsicAttributes) => {
     return (
       <Badge color={level} variant="dot">