Cinch up TS linting

package.json

@@ -127,6 +127,7 @@
   },
   "eslintConfig": {
     "extends": [
+      "plugin:@typescript-eslint/recommended",
       "plugin:react/recommended",
       "plugin:react/jsx-runtime",
       "plugin:react-hooks/recommended",
@@ -142,14 +143,14 @@
     ],
     "rules": {
       "@typescript-eslint/no-empty-interface": "warn",
+      "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-inferrable-types": "warn",
-      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
       "@typescript-eslint/switch-exhaustiveness-check": "warn",
       "import/first": "warn",
       "import/newline-after-import": "warn",
       "import/no-duplicates": "warn",
       "import/no-named-as-default": "off",
-      "import/no-named-as-default-member": "off",
       "import/order": [
         "warn",
         {
@@ -173,9 +174,8 @@
       ],
       "no-undef": "off",
       "prefer-const": "warn",
-      "react/display-name": "off",
       "react/jsx-boolean-value": "warn",
-      "unused-imports/no-unused-imports": "error"
+      "unused-imports/no-unused-imports": "warn"
     },
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
@@ -189,6 +189,7 @@
       "react",
       "unused-imports"
     ],
+    "root": true,
     "settings": {
       "react": {
         "version": "detect"

src/components/AppBar/UserMenu.tsx

@@ -12,7 +12,7 @@ import {
   MenuItem,
   Typography,
 } from "@mui/material";
-import React, { ReactElement, useState } from "react";
+import React, { forwardRef, ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -114,11 +114,12 @@ export default function UserMenu(props: TabProps): ReactElement {
 // <Menu> automatically applies a ref to its first child for anchoring. The
 // following prevents a console warning: "Function components cannot be given refs.
 // Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
-const WrappedUserMenuList = React.forwardRef(
-  (props: React.ComponentProps<typeof UserMenuList>, ref) => (
-    <UserMenuList {...props} forwardedRef={ref} />
-  )
-);
+const WrappedUserMenuList = forwardRef(function WrappedUserMenuList(
+  props: React.ComponentProps<typeof UserMenuList>,
+  ref
+) {
+  return <UserMenuList {...props} forwardedRef={ref} />;
+});
 
 interface UserMenuListProps {
   isAdmin: boolean;

src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx

@@ -12,7 +12,7 @@ interface VernWithSuggestionsProps {
   vernInput?: React.RefObject<HTMLInputElement>;
   updateVernField: (newValue: string, openDialog?: boolean) => void;
   onBlur: () => void;
-  onClose?: (e: React.ChangeEvent<{}>, reason: AutocompleteCloseReason) => void;
+  onClose?: (e: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
   suggestedVerns?: string[];
   handleEnter: () => void;
   vernacularLang: WritingSystem;

src/components/Login/LoginPage/LoginComponent.tsx

@@ -9,7 +9,7 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import React from "react";
+import { Component } from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 
 import { BannerType } from "api/models";
@@ -57,7 +57,7 @@ interface LoginError {
 }
 
 /** The login page (also doubles as a logout page) */
-export class Login extends React.Component<LoginProps, LoginState> {
+export class Login extends Component<LoginProps, LoginState> {
   constructor(props: LoginProps) {
     super(props);
     this.props.logout(); // Loading this page will reset the app, both store and localStorage

src/components/Login/SignUpPage/SignUpComponent.tsx

@@ -7,7 +7,7 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import React from "react";
+import { Component } from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 
 import router from "browserRouter";
@@ -22,6 +22,7 @@ import {
 
 // Chrome silently converts non-ASCII characters in a Textfield of type="email".
 // Use punycode.toUnicode() to convert them from punycode back to Unicode.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const punycode = require("punycode/");
 
 const idAffix = "signUp";
@@ -65,7 +66,7 @@ interface SignUpState {
   };
 }
 
-export class SignUp extends React.Component<SignUpProps, SignUpState> {
+export class SignUp extends Component<SignUpProps, SignUpState> {
   constructor(props: SignUpProps) {
     super(props);
     this.state = {

src/components/ProjectUsers/EmailInvite.tsx

@@ -43,6 +43,7 @@ export default function EmailInvite(props: InviteProps): ReactElement {
   };
 
   useEffect(() => {
+    // eslint-disable-next-line import/no-named-as-default-member
     setIsValid(validator.isEmail(email) && email !== "[email protected]");
   }, [email, setIsValid]);
 

src/components/Pronunciations/Recorder.ts

@@ -4,7 +4,7 @@ export default class Recorder {
   private toast: (text: string) => void;
   private recordRTC?: RecordRTC;
 
-  static blobType: "audio" = "audio";
+  static blobType: RecordRTC.Options["type"] = "audio";
 
   constructor(toast?: (text: string) => void) {
     this.toast = toast ?? ((text: string) => alert(text));

src/components/Statistics/UserStatistics.tsx

@@ -1,6 +1,5 @@
 import { Card, Grid, ListItem, List } from "@mui/material";
 import { ReactElement, useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 
 import { SemanticDomainUserCount } from "api/models";
 import { getSemanticDomainUserCount } from "backend";
@@ -17,7 +16,6 @@ export default function UserStatistics(
   const [domainUserCountList, setDomainUserCountList] = useState<
     SemanticDomainUserCount[]
   >([]);
-  const { t } = useTranslation();
 
   useEffect(() => {
     const updateSemanticDomainUserCounts = async () => {

src/components/UserSettings/ClickableAvatar.tsx

@@ -6,7 +6,7 @@ import { ReactElement, useState } from "react";
 import { getAvatar } from "backend/localStorage";
 import AvatarUpload from "components/UserSettings/AvatarUpload";
 
-const clickableAvatarClassProps: Styles<DefaultTheme, {}> = {
+const clickableAvatarClassProps: Styles<DefaultTheme, object> = {
   avatar: { width: 60, height: 60 },
   avatarOverlay: {
     transition: "opacity 0.2s",

src/components/UserSettings/UserSettings.tsx

@@ -23,6 +23,7 @@ import { uiWritingSystems } from "types/writingSystem";
 
 // Chrome silently converts non-ASCII characters in a Textfield of type="email".
 // Use punycode.toUnicode() to convert them from punycode back to Unicode.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const punycode = require("punycode/");
 
 export enum UserSettingsIds {

src/goals/MergeDuplicates/MergeDupsContinueDialog.tsx

@@ -1,5 +1,5 @@
 import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
-import React, { ReactElement } from "react";
+import { ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface MergeDupsContinueDialogProps {
@@ -9,7 +9,7 @@ export interface MergeDupsContinueDialogProps {
 export default function MergeDupsContinueDialog(
   props: MergeDupsContinueDialogProps
 ): ReactElement {
-  const [open, setOpen] = React.useState<boolean>(true);
+  const [open, setOpen] = useState<boolean>(true);
   const { t } = useTranslation();
 
   const { onSelection } = props;

src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTable.tsx

@@ -1,7 +1,7 @@
 import MaterialTable from "@material-table/core";
 import { Typography } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, createRef, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
@@ -40,7 +40,7 @@ function getPageState(wordCount: number): PageState {
 
 // Constants
 const ROWS_PER_PAGE = [10, 50, 250];
-const tableRef: React.RefObject<any> = React.createRef();
+const tableRef: React.RefObject<any> = createRef();
 
 export default function ReviewEntriesTable(
   props: ReviewEntriesTableProps

src/goals/ReviewEntries/ReviewEntriesComponent/icons.tsx

@@ -15,6 +15,7 @@ import Search from "@mui/icons-material/Search";
 import ViewColumn from "@mui/icons-material/ViewColumn";
 import { forwardRef, Ref } from "react";
 
+/* eslint-disable react/display-name */
 const tableIcons = {
   Add: forwardRef((props: any, ref: Ref<SVGSVGElement>) => (
     <AddBox {...props} ref={ref} />

src/i18n.ts

@@ -14,6 +14,7 @@ declare module "i18next" {
   }
 }
 
+/* eslint-disable import/no-named-as-default-member */
 i18n
   .use(Backend)
   .use(LanguageDetector)

src/index.tsx

@@ -1,6 +1,6 @@
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { SnackbarProvider } from "notistack";
-import ReactDOM from "react-dom";
+import { render } from "react-dom";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 
@@ -10,7 +10,7 @@ import { persistor, store } from "store";
 import theme from "types/theme";
 
 //Provider connects store to component containers
-ReactDOM.render(
+render(
   <StyledEngineProvider injectFirst>
     <ThemeProvider theme={theme}>
       <SnackbarProvider maxSnack={3} autoHideDuration={5000}>

src/types/goals.ts

@@ -14,7 +14,8 @@ import {
 import { newUser } from "types/user";
 
 export type GoalData = CharInvData | MergeDupsData;
-export type GoalStep = CharInvStepData | MergeStepData | {};
+// Record<string, never> is the recommended type for an empty object.
+export type GoalStep = CharInvStepData | MergeStepData | Record<string, never>;
 export type GoalChanges = CharInvChanges | MergesCompleted;
 
 export interface GoalProps {

src/types/writingSystem.ts

@@ -3,6 +3,7 @@ import { WritingSystem } from "api/models";
 export enum Bcp47Code {
   Default = "en",
   Ar = "ar", // Arabic
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
   En = "en", // English
   Es = "es", // Spanish
   Fr = "fr", // French

src/utilities/dictionaryLoader.ts

@@ -35,7 +35,7 @@ export default class DictionaryLoader {
       .toLocaleLowerCase()
       .split("")
       .map((c) => c.charCodeAt(0));
-    var key = "";
+    let key = "";
     while (true) {
       key = charCodes.join("-");
       if (!key || this.keys.includes(key)) {

src/utilities/fontCssUtilities.ts

@@ -31,7 +31,7 @@ export async function fetchCss(
   source: string,
   substitute?: string
 ): Promise<string | undefined> {
-  var cssUrl = "";
+  let cssUrl = "";
   switch (source) {
     case "local":
       cssUrl = `${fontDir}/${font.replace(" ", "")}.css`;