Update tsconfig and fix issues preventing build #1379

.eslintrc.js → .eslintrc.cjs

@@ -16,6 +16,7 @@ module.exports = {
   ],
   plugins: ['prettier', 'cypress'],
   rules: {
+    'react/react-in-jsx-scope': 'off',
     'react/jsx-filename-extension': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     'prettier/prettier': [

.gitignore

@@ -18,7 +18,7 @@
 /coverage
 
 # production
-/build
+dist
 
 # misc
 .DS_Store

package.json

@@ -60,7 +60,7 @@
   "scripts": {
     "dev": "cross-env concurrently \"yarn serve:plugins\" \"node server/auth-server.js\" \"vite --open\"",
     "dev-without-open": "vite",
-    "build": "tsc --project tsconfig.build.json && vite build",
+    "build": "tsc && vite build",
     "preview": "vite preview",
     "preview:build": "yarn build && yarn preview",
     "lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src",

src/adminPage/adminPage.component.tsx

@@ -72,7 +72,7 @@ const AdminPage = (props: AdminPageProps): ReactElement => {
         textColor="secondary"
         indicatorColor="secondary"
         value={tabValue}
-        onChange={(event, newValue) => {
+        onChange={(_event, newValue) => {
           setTabValue(newValue);
         }}
       >

src/authentication/githubAuthProvider.tsx

@@ -9,7 +9,7 @@ export default class GithubAuthProvider extends BaseAuthProvider {
       'https://github.com/login/oauth/authorize?client_id=9fb0c571fd7b71e383b4';
   }
 
-  public logIn(username: string, password: string): Promise<void> {
+  public logIn(_username: string, password: string): Promise<void> {
     const params = qs.parse(password);
 
     // remove existing credentials so they can be refreshed

src/authentication/parseJwt.ts

@@ -5,7 +5,7 @@ const parseJwt = (token: string): string => {
   const base64Url = token.split('.')[1];
   const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
   const payload = decodeURIComponent(
-    atob(base64).replace(/(.)/g, function (m, p) {
+    atob(base64).replace(/(.)/g, function (_m, p) {
       const code = p.charCodeAt(0).toString(16).toUpperCase();
       return '%' + ('00' + code).slice(-2);
     })

src/authentication/testAuthProvider.tsx

@@ -63,13 +63,13 @@ export default class TestAuthProvider implements AuthProvider {
   }
 
   public setScheduledMaintenanceState(
-    scheduledMaintenanceState: ScheduledMaintenanceState
+    _scheduledMaintenanceState: ScheduledMaintenanceState
   ): Promise<string | void> {
     return Promise.resolve('test');
   }
 
   public setMaintenanceState(
-    maintenanceState: MaintenanceState
+    _maintenanceState: MaintenanceState
   ): Promise<string | void> {
     return Promise.resolve('test');
   }

src/cookieConsent/cookieConsent.component.tsx

@@ -81,7 +81,7 @@ export const CookieConsent = (
   }, [props]);
 
   const handleAccept = (
-    event: React.SyntheticEvent | React.MouseEvent
+    _event: React.SyntheticEvent | React.MouseEvent
   ): void => {
     Cookies.set('cookie-consent', JSON.stringify({ analytics: true }), {
       expires: 365,

src/footer/footer.component.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
+import Link from '@mui/material/Link';
 import { styled } from '@mui/material/styles';
-import { getAppStrings } from '../state/strings';
-import { connect } from 'react-redux';
-import { StateType } from '../state/state.types';
-import { AppStrings, scigatewayRoutes } from '../state/scigateway.types';
+import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
+import { scigatewayRoutes } from '../state/scigateway.types';
 
 const RootDiv = styled('div')(({ theme }) => ({
   position: 'absolute',
@@ -37,12 +34,7 @@ const StyledLink = styled(Link)<{ component?: React.ElementType; to?: string }>(
   }
 );
 
-export interface FooterProps {
-  res: AppStrings | undefined;
-  drawerOpen: boolean;
-}
-
-const Footer = (props: FooterProps): React.ReactElement => {
+const Footer = (): React.ReactElement => {
   const [t] = useTranslation();
 
   return (
@@ -114,11 +106,4 @@ const Footer = (props: FooterProps): React.ReactElement => {
   );
 };
 
-const mapStateToProps = (state: StateType): FooterProps => ({
-  res: getAppStrings(state, 'footer'),
-  drawerOpen: state.scigateway.drawerOpen,
-});
-
-export const UnconnectedFooter = Footer;
-
-export default connect(mapStateToProps)(Footer);
+export default Footer;

src/loginPage/loginPage.component.tsx

@@ -327,7 +327,7 @@ function fetchMnemonics(authUrl?: string): Promise<ICATAuthenticator[]> {
     .then((res) => {
       return res.data;
     })
-    .catch((err) => {
+    .catch(() => {
       log.error(
         'It is not possible to authenticate you at the moment. Please, try again later'
       );

src/main.tsx

@@ -1,11 +1,10 @@
+import 'custom-event-polyfill';
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
-import 'custom-event-polyfill';
-import './i18n';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App';
 import 'typeface-roboto';
+import App from './App';
+import './i18n';
 
 const container = document.getElementById('scigateway');
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

src/mainAppBar/mobileOverflowMenu.component.tsx

@@ -1,18 +1,17 @@
-import React from 'react';
 import {
+  Divider,
+  ListItemText,
   Menu,
   MenuItem,
-  ListItemText,
   MenuProps,
-  Divider,
 } from '@mui/material';
-import { SettingsMenuContent } from './settingsMenu.component';
+import { push } from 'connected-react-router';
 import { useDispatch, useSelector } from 'react-redux';
+import { toggleHelp } from '../state/actions/scigateway.actions';
+import { adminRoutes } from '../state/scigateway.types';
 import { StateType } from '../state/state.types';
 import { getAppStrings, getString } from '../state/strings';
-import { push } from 'connected-react-router';
-import { adminRoutes } from '../state/scigateway.types';
-import { toggleHelp } from '../state/actions/scigateway.actions';
+import { SettingsMenuContent } from './settingsMenu.component';
 
 interface MobileOverflowMenuProps extends MenuProps {
   onClose: () => void;

src/mainAppBar/pageLinks.component.tsx

@@ -1,12 +1,11 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { StateType } from '../state/state.types';
 import Button from '@mui/material/Button';
-import { getAppStrings, getString } from '../state/strings';
 import Typography from '@mui/material/Typography';
-import React from 'react';
-import { appBarIconButtonStyle } from './styles';
 import { push } from 'connected-react-router';
+import { useDispatch, useSelector } from 'react-redux';
 import { adminRoutes } from '../state/scigateway.types';
+import { StateType } from '../state/state.types';
+import { getAppStrings, getString } from '../state/strings';
+import { appBarIconButtonStyle } from './styles';
 
 function PageLinks(): JSX.Element {
   const shouldShowHelpPageButton = useSelector(

src/mainAppBar/settingsMenu.component.tsx

@@ -1,22 +1,21 @@
+import BrightnessIcon from '@mui/icons-material/Brightness4';
+import InvertColorsIcon from '@mui/icons-material/InvertColors';
+import TuneIcon from '@mui/icons-material/Tune';
 import {
   ListItemIcon,
   ListItemText,
   Menu,
   MenuItem,
   MenuProps,
 } from '@mui/material';
-import TuneIcon from '@mui/icons-material/Tune';
-import { getAppStrings, getString } from '../state/strings';
-import BrightnessIcon from '@mui/icons-material/Brightness4';
-import InvertColorsIcon from '@mui/icons-material/InvertColors';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { push } from 'connected-react-router';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   loadDarkModePreference,
   loadHighContrastModePreference,
 } from '../state/actions/scigateway.actions';
 import { StateType } from '../state/state.types';
+import { getAppStrings, getString } from '../state/strings';
 
 interface SettingsMenuProps extends MenuProps {
   onClose: () => void;

src/state/actions/scigateway.actions.tsx

@@ -517,7 +517,7 @@ export const verifyUsernameAndPassword = (
           );
         dispatch(authorised());
       })
-      .catch((e) => {
+      .catch(() => {
         // probably want to do something smarter with
         // err.response.status (e.g. 403 or 500)
         dispatch(unauthorised());

tsconfig.json

@@ -2,23 +2,29 @@
   "compilerOptions": {
     "target": "es5",
     "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+      "esnext", "DOM", "DOM.Iterable",
     ],
-    "allowJs": true,
+    "module": "ESNext",
     "skipLibCheck": true,
+
+    "allowJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
+
+    /* Bundler mode */
     "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "noFallthroughCasesInSwitch": true
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
   },
   "include": [
     "src"