From 8636bafa78f2e5ae510a14283255cce87ee88fa9 Mon Sep 17 00:00:00 2001 From: Joel Davies Date: Tue, 12 Mar 2024 15:55:56 +0000 Subject: [PATCH] Update tsconfig and fix issues preventing build #1379 --- .eslintrc.js => .eslintrc.cjs | 1 + .gitignore | 2 +- package.json | 2 +- src/adminPage/adminPage.component.tsx | 2 +- src/authentication/githubAuthProvider.tsx | 2 +- src/authentication/parseJwt.ts | 2 +- src/authentication/testAuthProvider.tsx | 4 +-- src/cookieConsent/cookieConsent.component.tsx | 2 +- src/footer/footer.component.tsx | 25 ++++--------------- src/loginPage/loginPage.component.tsx | 2 +- src/main.tsx | 7 +++--- .../mobileOverflowMenu.component.tsx | 13 +++++----- src/mainAppBar/pageLinks.component.tsx | 9 +++---- src/mainAppBar/settingsMenu.component.tsx | 11 ++++---- src/state/actions/scigateway.actions.tsx | 2 +- tsconfig.json | 22 ++++++++++------ 16 files changed, 48 insertions(+), 60 deletions(-) rename .eslintrc.js => .eslintrc.cjs (97%) diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 97% rename from .eslintrc.js rename to .eslintrc.cjs index ebbc32ef..7e337257 100644 --- a/.eslintrc.js +++ b/.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': [ diff --git a/.gitignore b/.gitignore index 343d0d06..51a7eb56 100644 --- a/.gitignore +++ b/.gitignore @@ -18,7 +18,7 @@ /coverage # production -/build +dist # misc .DS_Store diff --git a/package.json b/package.json index 59e292e2..b7378e4c 100644 --- a/package.json +++ b/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", diff --git a/src/adminPage/adminPage.component.tsx b/src/adminPage/adminPage.component.tsx index d5adbf23..e09f06b8 100644 --- a/src/adminPage/adminPage.component.tsx +++ b/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); }} > diff --git a/src/authentication/githubAuthProvider.tsx b/src/authentication/githubAuthProvider.tsx index 9d5ed76a..61beca11 100644 --- a/src/authentication/githubAuthProvider.tsx +++ b/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 { + public logIn(_username: string, password: string): Promise { const params = qs.parse(password); // remove existing credentials so they can be refreshed diff --git a/src/authentication/parseJwt.ts b/src/authentication/parseJwt.ts index 1fcff063..643309a2 100644 --- a/src/authentication/parseJwt.ts +++ b/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); }) diff --git a/src/authentication/testAuthProvider.tsx b/src/authentication/testAuthProvider.tsx index 016ef89a..696fe468 100644 --- a/src/authentication/testAuthProvider.tsx +++ b/src/authentication/testAuthProvider.tsx @@ -63,13 +63,13 @@ export default class TestAuthProvider implements AuthProvider { } public setScheduledMaintenanceState( - scheduledMaintenanceState: ScheduledMaintenanceState + _scheduledMaintenanceState: ScheduledMaintenanceState ): Promise { return Promise.resolve('test'); } public setMaintenanceState( - maintenanceState: MaintenanceState + _maintenanceState: MaintenanceState ): Promise { return Promise.resolve('test'); } diff --git a/src/cookieConsent/cookieConsent.component.tsx b/src/cookieConsent/cookieConsent.component.tsx index 83e9069a..ebf9ae33 100644 --- a/src/cookieConsent/cookieConsent.component.tsx +++ b/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, diff --git a/src/footer/footer.component.tsx b/src/footer/footer.component.tsx index 5c4f16b9..89422e2d 100644 --- a/src/footer/footer.component.tsx +++ b/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; diff --git a/src/loginPage/loginPage.component.tsx b/src/loginPage/loginPage.component.tsx index c9a82ae5..9e9d906a 100644 --- a/src/loginPage/loginPage.component.tsx +++ b/src/loginPage/loginPage.component.tsx @@ -327,7 +327,7 @@ function fetchMnemonics(authUrl?: string): Promise { .then((res) => { return res.data; }) - .catch((err) => { + .catch(() => { log.error( 'It is not possible to authenticate you at the moment. Please, try again later' ); diff --git a/src/main.tsx b/src/main.tsx index bb213cf1..4b79fce6 100644 --- a/src/main.tsx +++ b/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 diff --git a/src/mainAppBar/mobileOverflowMenu.component.tsx b/src/mainAppBar/mobileOverflowMenu.component.tsx index e6754cbc..56fc2477 100644 --- a/src/mainAppBar/mobileOverflowMenu.component.tsx +++ b/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; diff --git a/src/mainAppBar/pageLinks.component.tsx b/src/mainAppBar/pageLinks.component.tsx index b126ae96..fd8bde9d 100644 --- a/src/mainAppBar/pageLinks.component.tsx +++ b/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( diff --git a/src/mainAppBar/settingsMenu.component.tsx b/src/mainAppBar/settingsMenu.component.tsx index e8ec8546..0fded4fa 100644 --- a/src/mainAppBar/settingsMenu.component.tsx +++ b/src/mainAppBar/settingsMenu.component.tsx @@ -1,3 +1,6 @@ +import BrightnessIcon from '@mui/icons-material/Brightness4'; +import InvertColorsIcon from '@mui/icons-material/InvertColors'; +import TuneIcon from '@mui/icons-material/Tune'; import { ListItemIcon, ListItemText, @@ -5,18 +8,14 @@ import { 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; diff --git a/src/state/actions/scigateway.actions.tsx b/src/state/actions/scigateway.actions.tsx index 5746ccbe..29ca9a68 100644 --- a/src/state/actions/scigateway.actions.tsx +++ b/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()); diff --git a/tsconfig.json b/tsconfig.json index fe4fdbe4..53afed36 100644 --- a/tsconfig.json +++ b/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"