Stricter eslint checks and a ton of resultant updates

app/.eslintrc.cjs

@@ -0,0 +1,66 @@
+/* eslint-env node */
+
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:@typescript-eslint/strict-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'next/core-web-vitals',
+    'prettier',
+  ],
+  overrides: [
+    {
+      extends: ['plugin:@typescript-eslint/disable-type-checked'],
+      files: ['./**/*.{js,cjs}'],
+    },
+  ],
+  ignorePatterns: ['next.config.mjs', 'jest.config.mjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { project: true, tsconfigRootDir: __dirname },
+  plugins: ['@emotion', 'lingui'],
+  rules: {
+    // someday?... "lingui/no-unlocalized-strings": 2,
+    'lingui/t-call-in-function': 2,
+    'lingui/no-single-variables-to-translate': 2,
+    'lingui/no-expression-in-message': 2,
+    'lingui/no-single-tag-to-translate': 2,
+    'lingui/no-trans-inside-trans': 2,
+    '@emotion/pkg-renaming': 'error',
+    'jsx-a11y/anchor-is-valid': [
+      'error',
+      {
+        components: ['Link'],
+      },
+    ],
+    'jsx-a11y/anchor-has-content': [
+      'error',
+      {
+        components: ['Link'],
+      },
+    ],
+    'linebreak-style': ['error', 'unix'],
+    semi: ['error', 'always'],
+    '@typescript-eslint/strict-boolean-expressions': [
+      'error',
+      {
+        allowNullableBoolean: true,
+        allowNullableNumber: true,
+        allowNullableString: true,
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+
+    // TODO get this turned on, it's just a lot to update all at once.
+    '@typescript-eslint/prefer-nullish-coalescing': 'off'
+  },
+};

app/components/AlternateSolutionEditor.tsx

@@ -38,6 +38,7 @@ import {
 } from '../reducers/reducer';
 import { isSome } from 'fp-ts/lib/Option';
 import { GridView } from './Grid';
+import { logAsyncErrors } from '../lib/utils';
 
 export function AlternateSolutionEditor(props: {
   grid: string[];
@@ -106,13 +107,13 @@ export function AlternateSolutionEditor(props: {
 
   const pasteHandler = useCallback(
     (e: ClipboardEvent) => {
-      const tagName = (e.target as HTMLElement)?.tagName?.toLowerCase();
+      const tagName = (e.target as HTMLElement).tagName.toLowerCase();
       if (tagName === 'textarea' || tagName === 'input') {
         return;
       }
       const pa: PasteAction = {
         type: 'PASTE',
-        content: e.clipboardData?.getData('Text') || '',
+        content: e.clipboardData?.getData('Text') ?? '',
       };
       dispatch(pa);
       e.preventDefault();
@@ -138,7 +139,7 @@ export function AlternateSolutionEditor(props: {
         <TopBarLink
           icon={<FaSave />}
           text="Add Alternate"
-          onClick={async () => {
+          onClick={logAsyncErrors(async () => {
             const alt: Record<number, string> = {};
             let hadAny = false;
             for (const [idx, cellValue] of state.grid.cells.entries()) {
@@ -155,8 +156,10 @@ export function AlternateSolutionEditor(props: {
               props.cancel();
               return;
             }
-            return props.save(alt).then(() => props.cancel());
-          }}
+            return props.save(alt).then(() => {
+              props.cancel();
+            });
+          })}
         />
         <TopBarLink
           icon={<FaWindowClose />}
@@ -182,19 +185,25 @@ export function AlternateSolutionEditor(props: {
                 <TopBarDropDownLink
                   icon={<FaVolumeUp />}
                   text="Unmute"
-                  onClick={() => setMuted(false)}
+                  onClick={() => {
+                    setMuted(false);
+                  }}
                 />
               ) : (
                 <TopBarDropDownLink
                   icon={<FaVolumeMute />}
                   text="Mute"
-                  onClick={() => setMuted(true)}
+                  onClick={() => {
+                    setMuted(true);
+                  }}
                 />
               )}
               <TopBarDropDownLink
                 icon={<FaKeyboard />}
                 text="Toggle Keyboard"
-                onClick={() => setToggleKeyboard(!toggleKeyboard)}
+                onClick={() => {
+                  setToggleKeyboard(!toggleKeyboard);
+                }}
               />
             </>
           )}

app/components/AuthContext.tsx

@@ -6,7 +6,7 @@ import { AccountPrefsT } from '../lib/prefs';
 
 export interface AuthContextValue {
   user?: User;
-  notifications?: Array<NotificationT>;
+  notifications?: NotificationT[];
   isAdmin: boolean;
   isPatron: boolean;
   loading: boolean;

app/components/AuthHelpers.tsx

@@ -88,7 +88,9 @@ function renderLoginIfNeeded({
 
 /* Ensure we have a non-anonymous user, upgrading an anonymous user if we have one. */
 export function requiresAuth<T>(WrappedComponent: React.ComponentType<T>) {
-  return (props: T & WithConditionalCSSProp<T>): ReactNode => {
+  return function AuthRequired(
+    props: T & WithConditionalCSSProp<T>
+  ): ReactNode {
     const ctx = useContext(AuthContext);
     const login = renderLoginIfNeeded(ctx);
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -109,7 +111,9 @@ export function requiresAuth<T>(WrappedComponent: React.ComponentType<T>) {
 
 /* Ensure we have an admin user, upgrading an anonymous user if we have one. */
 export function requiresAdmin<T>(WrappedComponent: React.ComponentType<T>) {
-  return (props: T & WithConditionalCSSProp<T>): ReactNode => {
+  return function AdminRequired(
+    props: T & WithConditionalCSSProp<T>
+  ): ReactNode {
     const ctx = useContext(AuthContext);
     const login = renderLoginIfNeeded(ctx);
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions