Update to ESLint v9

This includes adding import sorting via prettier
and some fixes.

Signed-off-by: Lukas Taegert-Atkinson <[email protected]>

.lintstagedrc

@@ -1,4 +1,4 @@
 {
-  "*.{js,ts,tsx}": "eslint --cache --fix --ext .js,.ts,.tsx",
+  "*.{js,ts,tsx}": "eslint --cache --fix",
   "*": "prettier --write"
 }

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-organize-imports"]
+}

backend/local/dynamo.ts

@@ -53,7 +53,11 @@ export const prepareTable = async () => {
       if ((err as AWSError).code === 'ResourceInUseException') {
         console.log(`Table "${TableName}" already exists`);
         return;
-      } else if (['UnknownEndpoint', 'ECONNRESET'].includes((err as AWSError).code!)) {
+      } else if (
+        (['UnknownEndpoint', 'ECONNRESET'] as (string | undefined)[]).includes(
+          (err as AWSError).code,
+        )
+      ) {
         console.log('Database not found, retrying...');
       } else {
         console.error('Error creating table:', JSON.stringify(err, null, 2));

backend/local/socket.ts

@@ -1,11 +1,11 @@
+import { Readable } from 'stream';
 import * as WebSocket from 'ws';
 import { generateId } from '../../shared/generateId';
 import { onConnect } from '../onconnect/src/on-connect';
 import { onDisconnect } from '../ondisconnect/src/on-disconnect';
 import { onMessage } from '../sendmessage/src/on-message';
 import { ConfigWithHandler } from '../shared/types';
 import { ddb } from './dynamo';
-import { Readable } from 'stream';
 
 interface WebsocketWithId extends WebSocket {
   id: string;

backend/sendmessage/src/reset-votes.ts

@@ -1,8 +1,8 @@
+import { broadcastState } from '../../shared/actions';
 import { getConnection } from '../../shared/database/getConnection';
 import { getGroup } from '../../shared/database/getGroup';
 import { resetGroupVotes } from '../../shared/database/resetGroupVotes';
 import { ConfigWithHandler } from '../../shared/types';
-import { broadcastState } from '../../shared/actions';
 
 export const resetVotes = async (config: ConfigWithHandler) => {
   const connectionItem = await getConnection(config);

backend/sendmessage/src/reveal-votes.ts

@@ -1,7 +1,7 @@
+import { broadcastState } from '../../shared/actions';
 import { getConnection } from '../../shared/database/getConnection';
 import { revealGroupVotes } from '../../shared/database/revealGroupVotes';
 import { ConfigWithHandler } from '../../shared/types';
-import { broadcastState } from '../../shared/actions';
 
 export const revealVotes = async (config: ConfigWithHandler) => {
   const connectionItem = await getConnection(config);

backend/sendmessage/src/set-scale.ts

@@ -1,9 +1,9 @@
 import { CardValue } from '../../../shared/cards';
+import { broadcastState } from '../../shared/actions';
 import { getConnection } from '../../shared/database/getConnection';
 import { getGroup } from '../../shared/database/getGroup';
 import { resetGroupVotes } from '../../shared/database/resetGroupVotes';
 import { ConfigWithHandler } from '../../shared/types';
-import { broadcastState } from '../../shared/actions';
 
 export const setScale = async (scale: CardValue[], config: ConfigWithHandler): Promise<void> => {
   const connectionItem = await getConnection(config);

backend/sendmessage/src/set-vote.ts

@@ -1,8 +1,8 @@
 import { CardValue } from '../../../shared/cards';
+import { broadcastState } from '../../shared/actions';
 import { getConnection } from '../../shared/database/getConnection';
 import { setGroupConnectionVote } from '../../shared/database/setGroupConnectionVote';
 import { ConfigWithHandler } from '../../shared/types';
-import { broadcastState } from '../../shared/actions';
 
 export const setVote = async (vote: CardValue, config: ConfigWithHandler) => {
   const connectionItem = await getConnection(config);

backend/shared/database/getGroup.ts

@@ -1,5 +1,5 @@
 import { Config, GroupItem } from '../types';
 import { getItem } from './getItem';
 
-export const getGroup = async (groupId: string, config: Config): Promise<GroupItem | void> =>
+export const getGroup = async (groupId: string, config: Config): Promise<GroupItem | undefined> =>
   getItem<GroupItem>('groupId', groupId, config.tableName, config.ddb);

backend/shared/types.d.ts

@@ -17,15 +17,16 @@ export interface ConnectionItem {
   userId?: string;
 }
 
-export interface GroupConnections {
-  [id: string]: {
+export type GroupConnections = Record<
+  string,
+  {
     connectionId?: string;
     vote: CardValue;
-  };
-}
+  }
+>;
 
 export interface GroupItem {
-  scale: Array<CardValue>;
+  scale: CardValue[];
   ttl: number;
   groupId: string;
   visible: boolean;

eslint.config.mjs

@@ -0,0 +1,36 @@
+import eslint from '@eslint/js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default [
+  eslint.configs.recommended,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  {
+    ignores: ['**/dist', '**/dist-ssr', '**/build'],
+  },
+  {
+    rules: {
+      'prettier/prettier': 'error',
+    },
+  },
+  {
+    files: ['**/prerenderHtml.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  },
+  {
+    files: ['**/*.test.*'],
+    rules: {
+      '@typescript-eslint/no-non-null-assertion': 'off',
+    },
+  },
+  eslintPluginPrettierRecommended,
+];

frontend/prerenderHtml.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
-import { render } from './dist-ssr/index-ssr.js';
 import { minify } from 'html-minifier-terser';
+import { render } from './dist-ssr/index-ssr.js';
 
 const htmlUrl = new URL('dist/index.html', import.meta.url);
 const ssrMarker = '<!--ssr-outlet-->';

frontend/src/Components/App/App.tsx

@@ -1,8 +1,8 @@
-import classes from './App.module.css';
+import { ColorModeProvider } from '../ColorModeProvider/ColorModeProvider';
 import { PageSelector } from '../PageSelector/PageSelector';
 import { TouchDetector } from '../TouchDetector/TouchDetector';
 import { WebSocketProvider } from '../WebSocket/WebSocket';
-import { ColorModeProvider } from '../ColorModeProvider/ColorModeProvider';
+import classes from './App.module.css';
 
 export const App = () => (
   <div class={classes.app}>

frontend/src/Components/ColorModeProvider/ColorModeProvider.tsx

@@ -1,8 +1,8 @@
 import { createContext } from 'preact';
 import { useCallback, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
-import './ColorModeProvider.module.css';
 import { doNothing } from '../../helpers/helpers';
+import './ColorModeProvider.module.css';
 
 const COLOR_SWITCH_TIME_MS = 1000;
 

frontend/src/Components/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -1,5 +1,5 @@
-import sharedClasses from '../../styles.module.css';
 import { BUTTON_COPY_TO_CLIPBOARD } from '../../constants';
+import sharedClasses from '../../styles.module.css';
 
 export const CopyToClipboardButton = () => (
   <button

frontend/src/Components/Footer/Footer.tsx

@@ -1,8 +1,8 @@
-import { CopyToClipboardButton } from '../CopyToClipboardButton/CopyToClipboardButton';
-import classes from './Footer.module.css';
-import { connectToWebSocket } from '../WebSocket/WebSocket';
 import { LABEL_SESSION, LABEL_USERNAME } from '../../constants';
+import { CopyToClipboardButton } from '../CopyToClipboardButton/CopyToClipboardButton';
 import { LegalNoticeContainer } from '../LegalNoticeContainer/LegalNoticeContainer';
+import { connectToWebSocket } from '../WebSocket/WebSocket';
+import classes from './Footer.module.css';
 
 export const Footer = connectToWebSocket(({ socket }) => (
   <footer class={classes.footer}>

frontend/src/Components/Header/Header.tsx

@@ -1,7 +1,7 @@
-import tngLogo from '../../img/tng.svg';
-import classes from './Header.module.css';
 import { ALT_TNG_LOGO, TNG_URL } from '../../constants';
+import tngLogo from '../../img/tng.svg';
 import { ColorModeSwitch } from '../ColorModeSwitch/ColorModeSwitch';
+import classes from './Header.module.css';
 
 export const Header = () => (
   <header class={classes.header}>

frontend/src/Components/IconCoffee/IconCoffee.tsx

@@ -1,5 +1,5 @@
-import sharedClasses from '../../styles.module.css';
 import { TOOLTIP_COFFEE } from '../../constants';
+import sharedClasses from '../../styles.module.css';
 
 // taken from material icons
 export const IconCoffee = () => (

frontend/src/Components/IconNotVoted/IconNotVoted.tsx

@@ -1,5 +1,5 @@
-import sharedClasses from '../../styles.module.css';
 import { TOOLTIP_NOT_VOTED } from '../../constants';
+import sharedClasses from '../../styles.module.css';
 
 // taken from material icons
 export const IconNotVoted = () => (

frontend/src/Components/IconObserver/IconObserver.tsx

@@ -1,5 +1,5 @@
-import sharedClasses from '../../styles.module.css';
 import { TOOLTIP_OBSERVER } from '../../constants';
+import sharedClasses from '../../styles.module.css';
 
 // taken from material icons
 export const IconObserver = () => (

frontend/src/Components/IconVoted/IconVoted.tsx

@@ -1,5 +1,5 @@
-import sharedClasses from '../../styles.module.css';
 import { TOOLTIP_VOTED } from '../../constants';
+import sharedClasses from '../../styles.module.css';
 
 // taken from material icons
 export const IconVoted = () => (

frontend/src/Components/ResetButton/ResetButton.tsx

@@ -7,7 +7,9 @@ export const ResetButton = connectToWebSocket(({ socket }) => {
   const locked = useRef<boolean>(true);
 
   const handleClick = () => {
-    (!locked.current || window.confirm(RESET_VOTES_CONFIRMATION)) && socket.resetVotes();
+    if (!locked.current || window.confirm(RESET_VOTES_CONFIRMATION)) {
+      socket.resetVotes();
+    }
   };
 
   useEffect(() => {

frontend/src/Components/WebSocket/WebSocket.tsx

@@ -154,7 +154,7 @@ export const WebSocketProvider = ({ children }: { children: ComponentChildren })
     setState({ ...state, votes: { ...state.votes, [loginData.user]: vote } });
   };
 
-  const setScale = (scale: Array<CardValue>) => {
+  const setScale = (scale: CardValue[]) => {
     socket?.send(getSetScaleRequest(scale));
     setState({ ...state, votes: getInitialVotes(state.votes), scale });
   };

frontend/src/helpers/compareVotes.test.ts

@@ -1,4 +1,4 @@
-import { VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER, CardValue } from '../../../shared/cards';
+import { CardValue, VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../shared/cards';
 import { compareCardValues, compareVotes } from './compareVotes';
 import { UserState } from './getVotingState';
 

frontend/src/helpers/getVotingState.test.ts

@@ -1,6 +1,4 @@
-import { VOTE_COFFEE } from '../../../shared/cards';
-import { VOTE_OBSERVER } from '../../../shared/cards';
-import { VOTE_NOTE_VOTED } from '../../../shared/cards';
+import { VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../shared/cards';
 import { SCALES } from '../../../shared/scales';
 import { UserState, getVotingState } from './getVotingState';
 

frontend/src/helpers/getVotingState.ts

@@ -1,13 +1,13 @@
 import { CardValue, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../shared/cards';
 import { WebSocketApi } from '../types/WebSocket';
 
-export type UserState = {
+export interface UserState {
   user: string;
   vote: CardValue;
   voted: boolean;
   observer: boolean;
   pendingConnection: boolean;
-};
+}
 
 export const getVotingState = ({
   connected,

frontend/src/requests/websocket-requests.ts

@@ -18,7 +18,7 @@ export const getSetVoteRequest = (vote: CardValue) =>
     },
   });
 
-export const getSetScaleRequest = (scale: Array<CardValue>) =>
+export const getSetScaleRequest = (scale: CardValue[]) =>
   buildRequest({
     type: 'set-scale',
     payload: {

frontend/src/types/WebSocket.ts

@@ -10,9 +10,12 @@ export interface WebSocketApi {
   removeUser(user: string): void;
   resetVotes(): void;
   revealVotes(): void;
-  setScale(scale: Array<CardValue>): void;
+  setScale(scale: CardValue[]): void;
   setVote(vote: CardValue): void;
   state: WebSocketState;
 }
 
-export type WebSocketLoginData = { user: string; session: string };
+export interface WebSocketLoginData {
+  user: string;
+  session: string;
+}