fix type errors

Author: SKairinos

src/api/baseQuery.ts

@@ -1,11 +1,9 @@
-import { QueryReturnValue } from "@reduxjs/toolkit/dist/query/baseQueryTypes"
 import {
-  BaseQueryApi,
-  BaseQueryFn,
-  FetchArgs,
-  FetchBaseQueryError,
-  FetchBaseQueryMeta,
   fetchBaseQuery,
+  type BaseQueryApi,
+  type BaseQueryFn,
+  type FetchArgs,
+  type FetchBaseQueryError,
 } from "@reduxjs/toolkit/query"
 import Cookies from "js-cookie"
 import qs from "qs"
@@ -18,11 +16,6 @@ export type FetchBaseQuery = BaseQueryFn<
   unknown,
   FetchBaseQueryError
 >
-export type Result = QueryReturnValue<
-  unknown,
-  FetchBaseQueryError,
-  FetchBaseQueryMeta
->
 
 export const fetch = fetchBaseQuery({
   baseUrl: API_BASE_URL,
@@ -93,35 +86,30 @@ export async function injectCsrfToken(
   }
 }
 
-export function handleResponseError(result: Result): void {
-  // Check if errors.
-  if (result.error === undefined) return
-
+export function handleResponseError(error: FetchBaseQueryError): void {
   if (
-    result.error.status === 400 &&
-    typeof result.error.data === "object" &&
-    result.error.data !== null
+    error.status === 400 &&
+    typeof error.data === "object" &&
+    error.data !== null
   ) {
     // Parse the error's data from snake_case to camelCase.
-    snakeCaseToCamelCase(result.error.data)
-  } else if (result.error.status === 401) {
+    snakeCaseToCamelCase(error.data)
+  } else if (error.status === 401) {
     // TODO: redirect to appropriate login page based on user type.
     window.location.href = `${PORTAL_BASE_URL}/login/teacher`
   } else {
     // Catch-all error pages by status-code.
     window.location.href = `${PORTAL_BASE_URL}/error/${
-      [403, 404].includes(result.error.status as number)
-        ? result.error.status
-        : 500
+      [403, 404].includes(error.status as number) ? error.status : 500
     }`
   }
 }
 
-export function parseResponseBody(result: Result): void {
+export function parseResponseBody(data: unknown): void {
   // Parse the response's data from snake_case to camelCase.
-  if (typeof result.data !== "object" || result.data === null) return
+  if (typeof data !== "object" || data === null) return
 
-  snakeCaseToCamelCase(result.data)
+  snakeCaseToCamelCase(data)
 }
 
 const baseQuery: FetchBaseQuery = async (args, api, extraOptions) => {
@@ -132,9 +120,9 @@ const baseQuery: FetchBaseQuery = async (args, api, extraOptions) => {
   // Send the HTTP request and fetch the response.
   const result = await fetch(args, api, extraOptions)
 
-  handleResponseError(result)
+  if (result.error) handleResponseError(result.error)
 
-  parseResponseBody(result)
+  parseResponseBody(result.data)
 
   return result
 }

src/api/endpoints.ts

@@ -1,5 +1,7 @@
-import { EndpointBuilder } from "@reduxjs/toolkit/dist/query/endpointDefinitions"
-import { MutationDefinition } from "@reduxjs/toolkit/query/react"
+import type {
+  EndpointBuilder,
+  MutationDefinition,
+} from "@reduxjs/toolkit/query"
 
 import { FetchBaseQuery } from "./baseQuery"
 import { TagTypes } from "./tagTypes"

src/components/page/TabBar.tsx

@@ -1,20 +1,20 @@
-import React from "react"
-import { useParams, useNavigate, generatePath } from "react-router-dom"
 import {
-  Tabs,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+} from "@mui/icons-material"
+import {
+  IconButton,
   Tab,
   TabScrollButtonProps,
+  Tabs,
   Typography,
-  IconButton,
 } from "@mui/material"
-import {
-  ChevronLeft as ChevronLeftIcon,
-  ChevronRight as ChevronRightIcon,
-} from "@mui/icons-material"
+import React from "react"
+import { generatePath, useNavigate, useParams } from "react-router-dom"
 import { object as YupObject, string as YupString } from "yup"
 
-import { primary } from "../../theme/colors"
 import { tryValidateSync } from "../../helpers/yup"
+import { primary } from "../../theme/colors"
 import Section from "./Section"
 
 export interface TabBarProps {
@@ -99,7 +99,6 @@ const TabBar: React.FC<TabBarProps> = ({
             return (
               <>
                 {disabled === false && (
-                  // @ts-expect-error button props not required
                   <IconButton
                     onClick={onClick}
                     style={{

src/helpers/formik.ts

@@ -1,12 +1,8 @@
-import {
-  MutationDefinition,
-  QueryDefinition,
-} from "@reduxjs/toolkit/dist/query"
-import {
-  LazyQueryTrigger,
-  MutationTrigger,
-} from "@reduxjs/toolkit/dist/query/react/buildHooks"
-import { FormikHelpers } from "formik"
+import type {
+  TypedLazyQueryTrigger,
+  TypedMutationTrigger,
+} from "@reduxjs/toolkit/query/react"
+import type { FormikHelpers } from "formik"
 
 export function isFormError(error: unknown): boolean {
   return (
@@ -40,8 +36,8 @@ export function setFormErrors(
 
 export function submitForm<QueryArg, ResultType, FormValues extends QueryArg>(
   trigger:
-    | MutationTrigger<MutationDefinition<QueryArg, any, any, ResultType, any>>
-    | LazyQueryTrigger<QueryDefinition<QueryArg, any, any, ResultType, any>>,
+    | TypedMutationTrigger<ResultType, QueryArg, any>
+    | TypedLazyQueryTrigger<ResultType, QueryArg, any>,
   query: {
     then: (result: ResultType) => void
     catch?: (error: Error) => void

src/hooks.ts

@@ -59,6 +59,7 @@ export function useExternalScript<EventType extends keyof HTMLElementEventMap>({
     const script = document.createElement("script")
 
     Object.entries(props).forEach(([key, value]) => {
+      // @ts-expect-error
       script[key] = value
     })
 

src/theme/components/_components.ts

@@ -1,12 +1,12 @@
 import {
-  ThemeOptions,
-  ComponentsPropsList,
   CSSObject,
   ComponentsOverrides,
+  ComponentsPropsList,
   Theme,
+  ThemeOptions,
 } from "@mui/material"
-import { OverridesStyleRules } from "@mui/material/styles/overrides"
 import { CommonProps } from "@mui/material/OverridableComponent"
+import { OverridesStyleRules } from "@mui/material/styles/overrides"
 
 import {
   getClassNames,
@@ -72,6 +72,7 @@ export function getFontStyleOverrides(props: CommonProps): CSSObject {
   ;["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2"]
     .filter(className => className in typography)
     .forEach(className => {
+      // @ts-expect-error
       const typographyClass = typography[className]
 
       if (includesClassNames(classNames, [className])) {