Typescript eslint (#141)

* update eslint config to use typescript-eslint/recommended-type-checked and detect react version

* update tsconfig to reflect updates to eslint config

* fix eslint errors

* fix unused ts-expect-error

.eslintrc.cjs

@@ -4,18 +4,27 @@ module.exports = {
     extends: [
         'eslint:recommended',
         'plugin:react/recommended',
-        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-type-checked',
         'plugin:react-hooks/recommended',
         'plugin:prettier/recommended',
         'plugin:jsx-a11y/recommended',
         'plugin:tailwindcss/recommended',
     ],
     ignorePatterns: ['dist', '.eslintrc.cjs'],
     parser: '@typescript-eslint/parser',
+    parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+    },
     plugins: ['react-refresh', 'react', 'prettier'],
     rules: {
         'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
         'react/react-in-jsx-scope': 'off',
         'react/jsx-uses-react': 'off',
     },
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
 };

__mocks__/zustand.ts

@@ -10,7 +10,6 @@ const { create: actualCreate, createStore: actualCreateStore } =
   // @ts-expect-error - import the actual zustand module
   await vi.importActual<typeof zustand>('zustand');
 
-// @ts-expect-error - a variable to hold reset functions for all stores declared in the app
 export const storeResetFns = new Set<() => void>();
 
 const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {

src/App.spec.tsx

@@ -19,7 +19,7 @@ const TestComponent = () => {
 };
 
 const handlers = [
-  http.get('/default.json', async () => {
+  http.get('/default.json', () => {
     return HttpResponse.json({
       nodes: [
         {
@@ -88,7 +88,7 @@ describe('App', () => {
     expect(screen.getByTestId(/minimap/i)).toBeInTheDocument();
   });
   test('Throws an error if there is an error fetching the config', async () => {
-    server.use(http.get('/default.json', async () => HttpResponse.error()));
+    server.use(http.get('/default.json', () => HttpResponse.error()));
     renderWithProviders(<TestComponent />);
     await waitFor(() => expect(screen.queryByTestId('spinner')).not.toBeInTheDocument());
     expect(screen.getByText(/Error/i)).toBeInTheDocument();

src/components/Help/Help.spec.tsx

@@ -14,11 +14,13 @@ const handlers = [
 
     return HttpResponse.json({
       type: 'text',
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
       content: `Help Text ${helpId}`,
     });
   }),
   http.get('/help/:helpId.html', (info) => {
     const helpId = info.params.helpId;
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
     return HttpResponse.text(`<p>Help html ${helpId}</p>`);
   }),
 ];

src/hooks/useFetchConfig/useFetchConfig.spec.tsx

@@ -55,7 +55,7 @@ const TestComponent = () => {
   );
 };
 
-describe('useFetchConfig', async () => {
+describe('useFetchConfig', () => {
   test('initially isLoading, error, and data are undefined', () => {
     render(<TestComponent />);
     expect(screen.queryByText(/error/i)).not.toBeInTheDocument();

src/hooks/useFetchConfig/useFetchConfig.tsx

@@ -76,7 +76,7 @@ export const useFetchConfig = (configPath: string) => {
     setConfig(undefined);
     setError(undefined);
     fetch(configPath)
-      .then((response) => response.json())
+      .then((response) => response.json() as Promise<ConfigFile>)
       .then((data) => {
         try {
           const config = parseConfig(data);

src/hooks/useFetchHelp/useFetchHelp.spec.tsx

@@ -12,13 +12,15 @@ const handlers = [
       nodes: [
         {
           type: 'text',
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
           content: `Help Text ${nodeId}`,
         },
       ],
     });
   }),
   http.get('/help/:nodeId.html', (info) => {
     const nodeId = info.params.nodeId;
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
     return HttpResponse.text(`<p>Help Text ${nodeId}</p>`);
   }),
 ];
@@ -32,7 +34,7 @@ afterEach(() => {
 beforeAll(() => server.listen());
 afterAll(() => server.close());
 
-describe('useFetchHelp', async () => {
+describe('useFetchHelp', () => {
   test('error, help are initially falsy, isLoading is truthy', () => {
     const { result } = renderHook(() => useFetchHelp('foo.json'));
     expect(result.current.error).toBeFalsy();

src/hooks/useFetchHelp/useFetchHelp.tsx

@@ -8,7 +8,7 @@ export type HelpConfig = HelpContent;
 export const useFetchHelp = (fileName?: string) => {
   const [help, setHelp] = useState<HelpConfig | undefined>();
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<unknown | undefined>();
+  const [error, setError] = useState<undefined | string>();
 
   useEffect(() => {
     setIsLoading(true);
@@ -34,21 +34,24 @@ export const useFetchHelp = (fileName?: string) => {
       })
       .then((data) => {
         if (fileName.endsWith('.json')) {
-          data = {
+          const help: HelpContent = {
             type: 'text',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
             content: data.content,
           };
+          setHelp(help);
         } else {
-          data = {
+          const help: HelpContent = {
             type: 'html',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             content: data,
           };
+          setHelp(help);
         }
-        setHelp(data);
         setIsLoading(false);
       })
-      .catch((e) => {
-        setError(e);
+      .catch((e: Error) => {
+        setError(e.message);
         setIsLoading(false);
       });
   }, [fileName]);

src/hooks/useUrl/useUrl.spec.tsx

@@ -21,10 +21,10 @@ suite('useUrl hook', () => {
     const { result } = renderHook(() => useUrl(), { wrapper });
     expect(result.current.pathParam).toBe(pathQueryParam);
   });
-  test('returns the path URL query param', async () => {
+  test('returns the path URL query param', () => {
     const pathQueryParam = 'foo';
     const { result } = renderHook(() => useUrl(), { wrapper });
-    await act(async () => {
+    act(() => {
       result.current.setPathParam(pathQueryParam);
     });
     expect(result.current.pathParam).toBe(pathQueryParam);

src/hooks/useUrl/useUrl.tsx

@@ -27,7 +27,7 @@ export const useUrl = () => {
   const copyUrl = () => {
     if (path.length < 1) return;
     setUrlPathId(path[path.length - 1].selected);
-    navigator.clipboard
+    void navigator.clipboard
       .writeText(window.location.href)
       .then(() => window.alert('URL copied to clipboard'));
   };

tsconfig.json

@@ -22,9 +22,6 @@
     "jsx": "react-jsx",
     "incremental": true
   },
-  "include": [
-    "src"
-  ],
   "exclude": [
     "node_modules",
     "build"