feat: type fixes

.github/workflows/main.yml

@@ -4,9 +4,6 @@ on:
   push:
     paths-ignore:
       - '**/*.md'
-      - '**/*.code-*'
-      - '.vscode/**'
-      - '.devcontainer.json'
   pull_request:
   issues:
   issue_comment:

eslint.config.js

@@ -3,7 +3,12 @@ import ts from "typescript-eslint"
 
 export default ts.config(
   ...workspaceConfig,
-  { ignores: ["src/scripts/*"] },
+  {
+    ignores: [
+      "src/scripts/*",
+      "src/server.js", // TODO: convert to src/server.ts and remove this ignore
+    ],
+  },
   {
     languageOptions: {
       parserOptions: { tsconfigRootDir: import.meta.dirname },

src/api/createApi.ts

@@ -1,12 +1,12 @@
 import {
+  type FetchArgs,
   createApi as _createApi,
   fetchBaseQuery,
-  type FetchArgs,
 } from "@reduxjs/toolkit/query/react"
 
 import { SERVICE_API_URL } from "../settings"
-import defaultTagTypes from "./tagTypes"
 import { buildLogoutEndpoint } from "./endpoints/session"
+import defaultTagTypes from "./tagTypes"
 import { getCsrfCookie } from "../utils/auth"
 import { isSafeHttpMethod } from "../utils/api"
 
@@ -45,7 +45,7 @@ export default function createApi<TagTypes extends string = never>({
       const method = typeof arg === "string" ? "GET" : arg.method || "GET"
 
       if (type === "mutation" || !isSafeHttpMethod(method)) {
-        let csrfToken = getCsrfCookie()
+        const csrfToken = getCsrfCookie()
         if (csrfToken) headers.set("x-csrftoken", csrfToken)
       }
 
@@ -55,7 +55,7 @@ export default function createApi<TagTypes extends string = never>({
 
   const api = _createApi({
     // https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#implementing-a-custom-basequery
-    baseQuery: async (args, api, extraOptions) => {
+    baseQuery: async (args: string | FetchArgs, api, extraOptions) => {
       if (api.type === "mutation" && getCsrfCookie() === undefined) {
         // Get the CSRF token.
         const { error } = await fetch(

src/api/endpoints/authFactor.ts

@@ -1,10 +1,10 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
 import type { AuthFactor } from "../models"
 import { type TagTypes } from "../tagTypes"

src/api/endpoints/klass.ts

@@ -1,19 +1,19 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
+import type {
+  Class,
+  SchoolTeacher,
+  SchoolTeacherUser,
+  Teacher,
+} from "../models"
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
-import type {
-  Class,
-  Teacher,
-  SchoolTeacher,
-  SchoolTeacherUser,
-} from "../models"
 import { type TagTypes } from "../tagTypes"
 import urls from "../urls"
 

src/api/endpoints/school.ts

@@ -1,10 +1,10 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import {
-  buildUrl,
-  tagData,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
 import type { School } from "../models"
 import { type TagTypes } from "../tagTypes"

src/api/endpoints/session.ts

@@ -1,4 +1,4 @@
-import { type EndpointBuilder, type Api } from "@reduxjs/toolkit/query/react"
+import { type Api, type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import { login, logout } from "../../slices/session"
 
@@ -39,6 +39,7 @@ export function buildLogoutEndpoint<ResultType, QueryArg>(
         console.error("Failed to call logout endpoint...", error)
       } finally {
         dispatch(logout())
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
         dispatch(api.util.resetApiState())
       }
     },

src/api/endpoints/user.ts

@@ -1,14 +1,14 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
+import type { Class, User } from "../models"
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
-import type { Class, User } from "../models"
 import { type TagTypes } from "../tagTypes"
 import urls from "../urls"
 

src/api/models.ts

@@ -1,5 +1,5 @@
-import type { Model } from "../utils/api"
 import type { CountryIsoCodes, UkCounties } from "../utils/general"
+import type { Model } from "../utils/api"
 
 // -----------------------------------------------------------------------------
 // User Models

src/api/schemas.ts

@@ -1,31 +1,31 @@
 import * as yup from "yup"
 
-import { UK_COUNTIES, COUNTRY_ISO_CODES } from "../utils/general"
 import type {
-  User,
-  TeacherUser,
-  SchoolTeacherUser,
+  AdminSchoolTeacher,
   AdminSchoolTeacherUser,
-  NonAdminSchoolTeacherUser,
-  NonSchoolTeacherUser,
-  Teacher,
-  Student,
-  Class,
-  School,
   AuthFactor,
-  OtpBypassToken,
-  StudentUser,
+  Class,
   IndependentUser,
-  SchoolTeacher,
-  AdminSchoolTeacher,
   NonAdminSchoolTeacher,
+  NonAdminSchoolTeacherUser,
   NonSchoolTeacher,
+  NonSchoolTeacherUser,
+  OtpBypassToken,
+  School,
+  SchoolTeacher,
+  SchoolTeacherUser,
+  Student,
+  StudentUser,
+  Teacher,
+  TeacherUser,
+  User,
 } from "./models"
+import { COUNTRY_ISO_CODES, UK_COUNTIES } from "../utils/general"
 import {
-  unicodeAlphanumericString,
-  uppercaseAsciiAlphanumericString,
   lowercaseAsciiAlphanumericString,
   numericId,
+  unicodeAlphanumericString,
+  uppercaseAsciiAlphanumericString,
 } from "../utils/schema"
 import { type Schemas } from "../utils/api"
 

src/components/App.tsx

@@ -1,14 +1,14 @@
+import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
 import { CssBaseline, ThemeProvider } from "@mui/material"
-import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
-import { type FC, type ReactNode, type JSX } from "react"
+import { type FC, type JSX, type ReactNode } from "react"
 import { Provider, type ProviderProps } from "react-redux"
-import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
-import { StaticRouter } from "react-router-dom/server"
 import { type Action } from "redux"
+import { StaticRouter } from "react-router-dom/server"
+import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
 
 import "./App.css"
-import { useLocation } from "../hooks"
 import { SSR } from "../settings"
+import { useLocation } from "../hooks"
 // import { InactiveDialog, ScreenTimeDialog } from "../features"
 // import { useCountdown, useEventListener } from "../hooks"
 // import "../scripts"
@@ -60,7 +60,9 @@ const App = <A extends Action = Action, S = unknown>({
   path,
   theme,
   store,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxIdleSeconds = 60 * 60,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxTotalSeconds = 60 * 60,
   ...routesProps
 }: AppProps<A, S>): JSX.Element => {

src/components/CopyIconButton.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 
-import { renderWithUser } from "../utils/test"
 import CopyIconButton from "./CopyIconButton"
+import { renderWithUser } from "../utils/test"
 
 test("Clicking button should copy content", async () => {
   const content = "Example string to be copied."

src/components/CopyIconButton.tsx

@@ -1,5 +1,5 @@
-import { ContentCopy as ContentCopyIcon } from "@mui/icons-material"
 import { IconButton, type IconButtonProps } from "@mui/material"
+import { ContentCopy as ContentCopyIcon } from "@mui/icons-material"
 import type { FC } from "react"
 
 export interface CopyIconButtonProps extends Omit<IconButtonProps, "onClick"> {
@@ -15,7 +15,7 @@ const CopyIconButton: FC<CopyIconButtonProps> = ({
     <IconButton
       data-testid="copy-icon-button"
       onClick={() => {
-        navigator.clipboard.writeText(content)
+        void navigator.clipboard.writeText(content)
       }}
       {...otherIconButtonProps}
     >

src/components/Countdown.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { type FC, useState } from "react"
 import { Typography, type TypographyProps } from "@mui/material"
 
 import { useCountdown } from "../hooks"
@@ -9,15 +9,15 @@ export interface CountdownProps extends Omit<TypographyProps, "children"> {
   onEnd: () => void
 }
 
-const Countdown: React.FC<CountdownProps> = ({
+const Countdown: FC<CountdownProps> = ({
   seconds,
   start = true,
   onEnd,
   ...typographyProps
 }) => {
   seconds = Math.floor(seconds)
   const _seconds = useCountdown(seconds)[0]
-  const [end, setEnd] = React.useState(!start)
+  const [end, setEnd] = useState(!start)
 
   if (_seconds === 0 && !end) {
     setEnd(true)

src/components/DownloadFileButton.tsx

@@ -24,7 +24,8 @@ const DownloadFileButton: FC<DownloadFileButtonProps> = ({
   let url: undefined | string = undefined
   let anchorProps: undefined | { download?: string; href: string } = undefined
   if ("mimeType" in file) {
-    let { text, mimeType, name, charset = "utf-8", extension } = file
+    const { text, mimeType, name, charset = "utf-8" } = file
+    let { extension } = file
 
     if (!extension) extension = "." + { plain: "txt", csv: "csv" }[mimeType]
 

src/components/ElevatedAppBar.tsx

@@ -1,20 +1,20 @@
-import React from "react"
 import {
   AppBar,
   type AppBarProps,
+  Container,
+  type ContainerProps,
   Toolbar,
   type ToolbarProps,
   useScrollTrigger,
-  Container,
-  type ContainerProps,
 } from "@mui/material"
+import { type FC, cloneElement } from "react"
 
 export interface ElevatedAppBarProps extends Omit<AppBarProps, "position"> {
   containerProps: ContainerProps
   toolbarProps?: ToolbarProps
 }
 
-const ElevatedAppBar: React.FC<ElevatedAppBarProps> = ({
+const ElevatedAppBar: FC<ElevatedAppBarProps> = ({
   containerProps,
   toolbarProps,
   elevation = 4,
@@ -26,7 +26,7 @@ const ElevatedAppBar: React.FC<ElevatedAppBarProps> = ({
     threshold: 0,
   })
 
-  return React.cloneElement(
+  return cloneElement(
     <AppBar elevation={elevation} {...otherProps}>
       <Container {...containerProps}>
         <Toolbar {...toolbarProps}>{children}</Toolbar>

src/components/Image.tsx

@@ -1,5 +1,5 @@
 import { Box, type BoxProps } from "@mui/material"
-import type React from "react"
+import { type FC } from "react"
 
 import { openInNewTab } from "../utils/general"
 
@@ -10,12 +10,12 @@ export interface ImageProps extends Omit<BoxProps, "component"> {
   hrefInNewTab?: boolean
 }
 
-const Image: React.FC<ImageProps> = ({
-  href,
-  hrefInNewTab = false,
-  ...props
-}) => {
-  let { onClick, style = {}, ...otherProps } = props
+const Image: FC<ImageProps> = ({ href, hrefInNewTab = false, ...props }) => {
+  let {
+    onClick,
+    style = {},
+    ...otherProps // eslint-disable-line prefer-const
+  } = props
 
   if (style.width === undefined) {
     style.width = "100%"

src/components/InputFileButton.tsx

@@ -1,9 +1,9 @@
+import { Button, type ButtonProps } from "@mui/material"
 import {
-  type FC,
   type DetailedHTMLProps,
+  type FC,
   type InputHTMLAttributes,
 } from "react"
-import { Button, type ButtonProps } from "@mui/material"
 
 export interface InputFileButtonProps
   extends Omit<ButtonProps<"label">, "component"> {

src/components/ItemizedList.tsx

@@ -1,12 +1,12 @@
-import type React from "react"
+import { type FC, type ReactElement } from "react"
 import {
   List,
-  type ListProps,
   type ListItem,
   type ListItemText,
+  type ListProps,
 } from "@mui/material"
 
-type ListItemElement = React.ReactElement<typeof ListItem | typeof ListItemText>
+type ListItemElement = ReactElement<typeof ListItem | typeof ListItemText>
 
 export interface ItemizedListProps {
   styleType:
@@ -33,7 +33,7 @@ export interface ItemizedListProps {
   children: ListItemElement | ListItemElement[]
 }
 
-const ItemizedList: React.FC<ItemizedListProps> = ({
+const ItemizedList: FC<ItemizedListProps> = ({
   styleType,
   listProps = {},
   pl = 4,