Fix most linter warnings.

.eslintrc.js

@@ -22,9 +22,10 @@ module.exports = {
     'plugin:jest/recommended',
     'plugin:react-hooks/recommended',
   ],
-  plugins: ['jest'],
+  plugins: ['jest', 'unused-imports'],
   rules: {
     'jest/no-jasmine-globals': 'error',
+    'unused-imports/no-unused-imports-ts': 'error',
     'no-restricted-globals': [
       'error',
       {

package.json

@@ -87,8 +87,8 @@
     "test:debug": "react-scripts --inspect-brk test --env=./custom-jest-environment.js --runInBand",
     "test:coverage": "react-scripts test --coverage --watchAll=false --env=./custom-jest-environment.js",
     "eject": "react-scripts eject",
-    "lint": "prettier --check . && eslint 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}' && npm run format",
+    "lint": "prettier --check . && eslint --ext .js,.jsx,.ts,.tsx src/",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src/ && npm run format",
     "fmt": "npm run format",
     "format": "prettier --write .",
     "prepare": "husky install"
@@ -122,6 +122,7 @@
     "confusing-browser-globals": "^1.0.11",
     "eslint-plugin-jest": "^23.11.0",
     "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "globalthis": "^1.0.1",
     "husky": "^8.0.0",
     "import-sort-config": "^6.0.0",

src/__mocks__/react-markdown.js

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const React = require('react');
 
 function ReactMarkdown({ children }) {
-  return <>Markdown: {children}</>;
+  return React.createElement(React.Fragment, {}, 'Markdown: ', children);
 }
 
 export default ReactMarkdown;

src/components/App/index.test.tsx

@@ -15,9 +15,7 @@
  */
 
 import { fireEvent, render } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { BrowserRouter } from 'react-router-dom';
 

src/components/Auth/OneAccountPerEmailCard/OneAccountPerEmailCard.test.tsx

@@ -18,9 +18,7 @@ import { Portal } from '@rmwc/base';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
 
-import { AppState } from '../../../store';
 import { waitForDialogsToOpen } from '../../../test_utils';
 import { getMockAuthStore } from '../test_utils';
 import {

src/components/Auth/UserFormDialog/UserForm.tsx

@@ -147,11 +147,11 @@ export const UserForm: React.FC<React.PropsWithChildren<UserFormProps>> = ({
   const {
     register,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors },
     reset,
   } = form;
 
-  // FIXME: Should be able to just check isValid, instead of checking
+  // FIXME: Should be able to just check form.isValid, instead of checking
   // that there are no errors. This only happens when `atLeastOneMethodRequired`
   // is the only error present and is causing the "Save" and "Save and create
   // another" buttons to remain enabled even when neither email/password or

src/components/Auth/UserFormDialog/controls/CustomAttributes.test.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 import { wrapWithForm } from '../../../../test_utils';
 import { CustomAttributes } from './CustomAttributes';
 
@@ -60,7 +58,7 @@ describe('CustomAttributes', () => {
   });
 
   it('displays an error if a forbidden key was used', async () => {
-    const { triggerValidation, getByRole, getByText } = setup(
+    const { triggerValidation, getByRole } = setup(
       '{"firebase": "is awesome"}'
     );
     await triggerValidation();

src/components/Auth/UserFormDialog/controls/ImageUrlInput.test.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { wrapWithForm } from '../../../../test_utils';
@@ -51,7 +50,7 @@ describe('ImageUrlInput', () => {
       });
 
       await triggerValidation();
-      getByText('Error loading image');
+      expect(getByText('Error loading image')).not.toBeNull();
     });
 
     it('displays an image if image loaded', async () => {
@@ -64,13 +63,13 @@ describe('ImageUrlInput', () => {
       });
 
       await triggerValidation();
-      getByAltText('Profile preview');
+      expect(getByAltText('Profile preview')).not.toBeNull();
     });
 
     it('displays loading spinner', async () => {
       const { getByTestId, triggerValidation } = setup({ photoUrl: 'lol.png' });
       await triggerValidation();
-      getByTestId('spinner');
+      expect(getByTestId('spinner')).not.toBeNull();
     });
 
     it('displays nothing if there is no image', async () => {

src/components/Auth/UserFormDialog/controls/PhoneControl.test.tsx

@@ -15,7 +15,6 @@
  */
 
 import { fireEvent } from '@testing-library/react';
-import React from 'react';
 
 import { wrapWithForm } from '../../../../test_utils';
 import { PhoneControl, PhoneControlProps } from './PhoneControl';

src/components/Auth/UsersCard/UsersCard.test.tsx

@@ -21,7 +21,6 @@ import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 
 import { AppState } from '../../../store';
-import { openAuthUserDialog } from '../../../store/auth/actions';
 import { createRemoteDataLoaded } from '../../../store/utils';
 import { waitForDialogsToOpen } from '../../../test_utils';
 import { createFakeAuthStateWithUsers } from '../test_utils';

src/components/Database/DataViewer/NodeLeaf.test.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import { act, render } from '@testing-library/react';
-import { DatabaseReference, ref } from 'firebase/database';
+import { act } from '@testing-library/react';
+import { ref } from 'firebase/database';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 
 import { renderWithDatabase } from '../testing/DatabaseTestProviders';
 import { NodeLeaf } from './NodeLeaf';

src/components/Database/DataViewer/NodeLink.test.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
 import { ref } from 'firebase/database';
 import React from 'react';
-import { MemoryRouter, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 
 import { renderWithDatabase } from '../testing/DatabaseTestProviders';
 import { NodeLink } from './NodeLink';

src/components/Database/DataViewer/common/view_model.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Database, DatabaseReference, Query } from 'firebase/database';
+import { DatabaseReference, Query } from 'firebase/database';
 
 /**
  * Max nodes shown underneath each

src/components/Database/DatabaseEmulatedApiProvider.tsx

@@ -25,7 +25,7 @@ import { DatabaseProvider, FirebaseAppProvider } from 'reactfire';
 
 import { useEmulatedFirebaseApp } from '../../firebase';
 import { useEmulatorConfig } from '../common/EmulatorConfigProvider';
-import { NamespaceProvider, useNamespace } from './useNamespace';
+import { NamespaceProvider } from './useNamespace';
 
 const DATABASE_OPTIONS = {};
 

src/components/Database/index.tsx

@@ -29,7 +29,6 @@ import { Spinner } from '../common/Spinner';
 import Database from './Database';
 import DatabaseContainer from './DatabaseContainer';
 import { DatabaseEmulatedApiProvider } from './DatabaseEmulatedApiProvider';
-import { NamespaceProvider } from './useNamespace';
 
 export const DatabaseRoute: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (

src/components/Database/testing/DatabaseTestProviders.tsx

@@ -16,9 +16,8 @@
 
 import { randomUUID } from 'crypto';
 
-import { render, waitForElementToBeRemoved } from '@testing-library/react';
-import { Database, ref, set } from 'firebase/database';
-import { uniqueId } from 'lodash';
+import { render } from '@testing-library/react';
+import { Database } from 'firebase/database';
 import React, { Suspense, useEffect, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { useDatabase } from 'reactfire';
@@ -108,7 +107,7 @@ const AsyncDatabase: React.FC<
     r(database)
       .then((c) => setDatabaseChildren(c))
       .catch(onError);
-  }, [r, database, setDatabaseChildren]);
+  }, [r, database, setDatabaseChildren, onError]);
 
   return databaseChildren ? (
     <div data-testid={ASYNC_DATABASE_WRAPPER_TEST_ID}>{databaseChildren}</div>

src/components/Extensions/Details/DetailCard/Tabs/EventsCodeSnippet.test.tsx

@@ -15,6 +15,7 @@
  */
 
 import { render } from '@testing-library/react';
+import React from 'react';
 
 import { Extension } from '../../../models';
 import { TestExtensionsProvider } from '../../../testing/TestExtensionsProvider';
@@ -34,7 +35,7 @@ describe('EventsCodeSnippet', () => {
       allowedEventTypes: ['google.firebase.v1.custom-event-occurred'],
     } as Extension;
 
-    const { queryByTestId, getByText } = render(
+    const { getByText } = render(
       <TestExtensionsProvider extensions={[extension]} instanceId={id}>
         <EventsCodeSnippet />
       </TestExtensionsProvider>

src/components/Extensions/api/internal/useExtensionsData.test.tsx

@@ -77,6 +77,7 @@ describe('useExtensionsData', () => {
               'Listens for new images uploaded to your specified Cloud Storage bucket, resizes the images, then stores the resized images in the same bucket. Optionally keeps or deletes the original images.',
             name: 'generateResizedImage',
             propertiesYaml:
+              // eslint-disable-next-line no-template-curly-in-string
               'availableMemoryMb: 1024\neventTrigger:\n  eventType: google.storage.object.finalize\n  resource: projects/_/buckets/${param:IMG_BUCKET}\nlocation: ${param:LOCATION}\nruntime: nodejs14\n',
           },
         ],
@@ -133,6 +134,7 @@ describe('useExtensionsData', () => {
               'Listens for new images uploaded to your specified Cloud Storage bucket, resizes the images, then stores the resized images in the same bucket. Optionally keeps or deletes the original images.',
             name: 'generateResizedImage',
             propertiesYaml:
+              // eslint-disable-next-line no-template-curly-in-string
               'availableMemoryMb: 1024\neventTrigger:\n  eventType: google.storage.object.finalize\n  resource: projects/_/buckets/${param:IMG_BUCKET}\nlocation: ${param:LOCATION}\nruntime: nodejs14\n',
           },
         ],

src/components/Extensions/testing/utils.ts

@@ -49,6 +49,7 @@ export const EXTENSION_SPEC: ExtensionSpec = {
         'Listens for new images uploaded to your specified Cloud Storage bucket, resizes the images, then stores the resized images in the same bucket. Optionally keeps or deletes the original images.',
       name: 'generateResizedImage',
       propertiesYaml:
+        // eslint-disable-next-line no-template-curly-in-string
         'availableMemoryMb: 1024\neventTrigger:\n  eventType: google.storage.object.finalize\n  resource: projects/_/buckets/${param:IMG_BUCKET}\nlocation: ${param:LOCATION}\nruntime: nodejs14\n',
     },
   ],

src/components/Firestore/Collection.test.tsx

@@ -20,7 +20,7 @@ import {
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
-import { collection, doc, getDoc, getDocs, setDoc } from 'firebase/firestore';
+import { collection, doc, getDocs, setDoc } from 'firebase/firestore';
 import React from 'react';
 import { Route } from 'react-router-dom';
 

src/components/Firestore/CollectionFilter/CollectionFilter.test.tsx

@@ -14,13 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  RenderResult,
-  act,
-  fireEvent,
-  render,
-  waitFor,
-} from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { delay } from '../../../test_utils';

src/components/Firestore/DocumentEditor/JsonEditor.test.tsx

@@ -20,8 +20,6 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import JsonEditor from './JsonEditor';
 
-const GOOD_PATH = '/wow/cool';
-
 const TestForm: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const methods = useForm({ mode: 'all' });
   return <FormProvider {...methods}>{children}</FormProvider>;

src/components/Firestore/DocumentEditor/index.test.tsx

@@ -320,9 +320,9 @@ describe('changing types', () => {
     act(() => {
       setType(FieldType.TIMESTAMP);
     });
-    const [date, time] = (
-      getByLabelText(/Value/) as HTMLInputElement
-    ).value.split('T');
+    const [date] = (getByLabelText(/Value/) as HTMLInputElement).value.split(
+      'T'
+    );
     expect(date).toEqual(expect.stringMatching(/\d{4}-\d{2}-\d{2}/));
   });
 });

src/components/Firestore/DocumentListItem.test.tsx

@@ -110,7 +110,7 @@ describe('DocumentListItem', () => {
     const history = createMemoryHistory({
       initialEntries: ['/firestore/data'],
     });
-    const { debug, queryByText, queryByTestId } = await render(
+    const { queryByText, queryByTestId } = await render(
       <Router history={history}>
         <Route path="/firestore/data">
           <DocumentListItem