chore: update TS and Fastify (#52157)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Sboonny <muhammedelruby@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

api/package.json

@@ -20,7 +20,7 @@
     "date-fns": "2.30.0",
     "dotenv": "16.3.1",
     "fast-uri": "2.3.0",
-    "fastify": "4.21.0",
+    "fastify": "4.24.3",
     "fastify-auth0-verify": "1.2.1",
     "fastify-plugin": "4.5.1",
     "joi": "17.11.0",

api/src/routes/challenge.ts

@@ -49,6 +49,7 @@ export const challengeRoutes: FastifyPluginCallbackTypebox = (
 ) => {
   const challenges = getChallenges();
 
+  // @ts-expect-error - @fastify/csrf-protection needs to update their types
   // eslint-disable-next-line @typescript-eslint/unbound-method
   fastify.addHook('onRequest', fastify.csrfProtection);
   fastify.addHook('onRequest', fastify.authenticateSession);

api/src/routes/donate.ts

@@ -29,6 +29,7 @@ export const donateRoutes: FastifyPluginCallbackTypebox = (
 
   // The order matters here, since we want to reject invalid cross site requests
   // before checking if the user is authenticated.
+  // @ts-expect-error - @fastify/csrf-protection needs to update their types
   // eslint-disable-next-line @typescript-eslint/unbound-method
   fastify.addHook('onRequest', fastify.csrfProtection);
   fastify.addHook('onRequest', fastify.authenticateSession);

api/src/routes/settings.ts

@@ -1,5 +1,18 @@
-import { type FastifyPluginCallbackTypebox } from '@fastify/type-provider-typebox';
-import type { FastifyError, FastifyReply, FastifyRequest } from 'fastify';
+import {
+  TypeBoxTypeProvider,
+  type FastifyPluginCallbackTypebox
+} from '@fastify/type-provider-typebox';
+import type {
+  ContextConfigDefault,
+  FastifyError,
+  FastifyReply,
+  FastifyRequest,
+  RawReplyDefaultExpression,
+  RawRequestDefaultExpression,
+  RawServerDefault,
+  RouteGenericInterface
+} from 'fastify';
+import { ResolveFastifyReplyType } from 'fastify/types/type-provider';
 import { getMinutes, isBefore, sub } from 'date-fns';
 import { isProfane } from 'no-profanity';
 
@@ -63,14 +76,35 @@ export const settingRoutes: FastifyPluginCallbackTypebox = (
 ) => {
   // The order matters here, since we want to reject invalid cross site requests
   // before checking if the user is authenticated.
+  // @ts-expect-error - @fastify/csrf-protection needs to update their types
   // eslint-disable-next-line @typescript-eslint/unbound-method
   fastify.addHook('onRequest', fastify.csrfProtection);
   fastify.addHook('onRequest', fastify.authenticateSession);
 
+  type CommonResponseSchema = {
+    response: { 400: (typeof schemas.updateMyProfileUI.response)[400] };
+  };
+
+  // TODO: figure out if there's a nicer way to generate this type
+  type UpdateReplyType = FastifyReply<
+    RawServerDefault,
+    RawRequestDefaultExpression<RawServerDefault>,
+    RawReplyDefaultExpression<RawServerDefault>,
+    RouteGenericInterface,
+    ContextConfigDefault,
+    CommonResponseSchema,
+    TypeBoxTypeProvider,
+    ResolveFastifyReplyType<
+      TypeBoxTypeProvider,
+      CommonResponseSchema,
+      RouteGenericInterface
+    >
+  >;
+
   function updateErrorHandler(
     error: FastifyError,
     request: FastifyRequest,
-    reply: FastifyReply
+    reply: UpdateReplyType
   ) {
     if (error.validation) {
       void reply.code(400);

api/src/routes/user.ts

@@ -56,6 +56,7 @@ export const userRoutes: FastifyPluginCallbackTypebox = (
   _options,
   done
 ) => {
+  // @ts-expect-error - @fastify/csrf-protection needs to update their types
   // eslint-disable-next-line @typescript-eslint/unbound-method
   fastify.addHook('onRequest', fastify.csrfProtection);
   fastify.addHook('onRequest', fastify.authenticateSession);

api/src/schemas.ts

@@ -46,6 +46,10 @@ export const schemas = {
         message: Type.Literal('flash.privacy-updated'),
         type: Type.Literal('success')
       }),
+      400: Type.Object({
+        message: Type.Literal('flash.wrong-updating'),
+        type: Type.Literal('danger')
+      }),
       500: Type.Object({
         message: Type.Literal('flash.wrong-updating'),
         type: Type.Literal('danger')
@@ -61,6 +65,10 @@ export const schemas = {
         message: Type.Literal('flash.updated-themes'),
         type: Type.Literal('success')
       }),
+      400: Type.Object({
+        message: Type.Literal('flash.wrong-updating'),
+        type: Type.Literal('danger')
+      }),
       500: Type.Object({
         message: Type.Literal('flash.wrong-updating'),
         type: Type.Literal('danger')
@@ -101,6 +109,10 @@ export const schemas = {
         message: Type.Literal('flash.updated-socials'),
         type: Type.Literal('success')
       }),
+      400: Type.Object({
+        message: Type.Literal('flash.wrong-updating'),
+        type: Type.Literal('danger')
+      }),
       500: Type.Object({
         message: Type.Literal('flash.wrong-updating'),
         type: Type.Literal('danger')
@@ -116,6 +128,10 @@ export const schemas = {
         message: Type.Literal('flash.keyboard-shortcut-updated'),
         type: Type.Literal('success')
       }),
+      400: Type.Object({
+        message: Type.Literal('flash.wrong-updating'),
+        type: Type.Literal('danger')
+      }),
       500: Type.Object({
         message: Type.Literal('flash.wrong-updating'),
         type: Type.Literal('danger')
@@ -131,6 +147,10 @@ export const schemas = {
         message: Type.Literal('flash.subscribe-to-quincy-updated'),
         type: Type.Literal('success')
       }),
+      400: Type.Object({
+        message: Type.Literal('flash.wrong-updating'),
+        type: Type.Literal('danger')
+      }),
       500: Type.Object({
         message: Type.Literal('flash.wrong-updating'),
         type: Type.Literal('danger')
@@ -146,6 +166,10 @@ export const schemas = {
         message: Type.Literal('buttons.accepted-honesty'),
         type: Type.Literal('success')
       }),
+      400: Type.Object({
+        message: Type.Literal('flash.wrong-updating'),
+        type: Type.Literal('danger')
+      }),
       500: Type.Object({
         message: Type.Literal('flash.wrong-updating'),
         type: Type.Literal('danger')
@@ -180,6 +204,10 @@ export const schemas = {
         message: Type.Literal('flash.privacy-updated'),
         type: Type.Literal('success')
       }),
+      400: Type.Object({
+        message: Type.Literal('flash.wrong-updating'),
+        type: Type.Literal('danger')
+      }),
       500: Type.Object({
         message: Type.Literal('flash.wrong-updating'),
         type: Type.Literal('danger')
@@ -691,6 +719,10 @@ export const schemas = {
       200: Type.Object({
         msUsername: Type.String()
       }),
+      400: Type.Object({
+        type: Type.Literal('error'),
+        message: Type.Literal('flash.ms.transcript.link-err-1')
+      }),
       404: Type.Object({
         type: Type.Literal('error'),
         message: Type.Literal('flash.ms.transcript.link-err-2')

client/i18n/schema-validation.ts

@@ -235,7 +235,9 @@ const readJsonFile = async (language: string, fileName: string) => {
   return fileJson;
 };
 
-const translatedLangs = availableLangs.client.filter(x => x !== 'english');
+const translatedLangs = availableLangs.client.filter(
+  x => String(x) !== 'english'
+);
 
 translationSchemaValidation(translatedLangs);
 motivationSchemaValidation(translatedLangs);

client/package.json

@@ -134,7 +134,7 @@
     "store": "2.0.12",
     "stream-browserify": "3.0.0",
     "tone": "14.7.77",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "util": "0.12.5",
     "uuid": "8.3.2",
     "validator": "13.11.0"

client/src/client-only-routes/show-certification.tsx

@@ -89,7 +89,7 @@ const requestedUserSelector = (state: unknown, { username = '' }) =>
 
 const mapStateToProps = (state: unknown, props: ShowCertificationProps) => {
   const isValidCert = liveCerts.some(
-    ({ certSlug }) => certSlug === props.certSlug
+    ({ certSlug }) => String(certSlug) === props.certSlug
   );
   return createSelector(
     showCertSelector,

client/src/components/Header/components/language-list.tsx

@@ -161,7 +161,7 @@ const LanguageList = ({ t, navigate }: LanguageListProps): JSX.Element => {
               data-value={lang}
               onClick={handleLanguageChange}
               onKeyDown={event => getHandleLanguageKeys(event, index)}
-              {...(clientLocale === lang && { 'aria-current': true })}
+              {...(clientLocale === String(lang) && { 'aria-current': true })}
               {...(LangCodes[lang] && {
                 lang: LangCodes[lang]
               })}

client/src/components/layouts/default.tsx

@@ -177,7 +177,7 @@ function DefaultLayout({
           bodyAttributes={{
             class: useSystemTheme
               ? getSystemTheme()
-              : `${theme === 'night' ? 'dark' : 'light'}-palette`
+              : `${String(theme) === 'night' ? 'dark' : 'light'}-palette`
           }}
           meta={[
             {

client/src/components/profile/components/camper.tsx

@@ -36,7 +36,6 @@ export type CamperProps = Pick<
   | 'picture'
   | 'name'
   | 'joinDate'
-  | 'twitter'
 >;
 
 function joinArray(array: string[], t: TFunction): string {

client/src/redux/prop-types.ts

@@ -345,7 +345,7 @@ export type ChallengeFile = {
   name: string;
   editableRegionBoundaries?: number[];
   usesMultifileEditor?: boolean;
-  error: null | string | unknown;
+  error: null | string;
   head: string;
   tail: string;
   seed: string;

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -43,13 +43,15 @@ interface MobileLayoutProps {
   usesMultifileEditor: boolean;
 }
 
-enum Tab {
-  Editor = 'editor',
-  Preview = 'preview',
-  Console = 'console',
-  Notes = 'notes',
-  Instructions = 'instructions'
-}
+const tabs = {
+  editor: 'editor',
+  preview: 'preview',
+  console: 'console',
+  notes: 'notes',
+  instructions: 'instructions'
+} as const;
+
+type Tab = keyof typeof tabs;
 
 interface MobileLayoutState {
   currentTab: Tab;
@@ -83,7 +85,9 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
   #toolPanelGroup!: HTMLElement;
 
   state: MobileLayoutState = {
-    currentTab: this.props.hasEditableBoundaries ? Tab.Editor : Tab.Instructions
+    currentTab: this.props.hasEditableBoundaries
+      ? tabs.editor
+      : tabs.instructions
   };
 
   switchTab = (tab: string): void => {
@@ -220,29 +224,33 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
         >
           <TabsList className='nav-lists'>
             {!hasEditableBoundaries && (
-              <TabsTrigger value={Tab.Instructions}>
+              <TabsTrigger value={tabs.instructions}>
                 {i18next.t('learn.editor-tabs.instructions')}
               </TabsTrigger>
             )}
-            <TabsTrigger value={Tab.Editor}>
+            <TabsTrigger value={tabs.editor}>
               {i18next.t('learn.editor-tabs.code')}
             </TabsTrigger>
             {hasNotes && usesMultifileEditor && (
-              <TabsTrigger value={Tab.Notes}>
+              <TabsTrigger value={tabs.notes}>
                 {i18next.t('learn.editor-tabs.notes')}
               </TabsTrigger>
             )}
-            <TabsTrigger value={Tab.Console}>
+            <TabsTrigger value={tabs.console}>
               {i18next.t('learn.editor-tabs.console')}
             </TabsTrigger>
             {hasPreview && (
-              <TabsTrigger value={Tab.Preview}>
+              <TabsTrigger value={tabs.preview}>
                 {i18next.t('learn.editor-tabs.preview')}
               </TabsTrigger>
             )}
           </TabsList>
 
-          <TabsContent tabIndex={-1} className='tab-content' value={Tab.Editor}>
+          <TabsContent
+            tabIndex={-1}
+            className='tab-content'
+            value={tabs.editor}
+          >
             {usesMultifileEditor && <EditorTabs />}
             {editor}
           </TabsContent>
@@ -250,7 +258,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
             <TabsContent
               tabIndex={-1}
               className='tab-content'
-              value={Tab.Instructions}
+              value={tabs.instructions}
             >
               {instructions}
             </TabsContent>
@@ -258,7 +266,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
           <TabsContent
             tabIndex={-1}
             className='tab-content'
-            value={Tab.Console}
+            value={tabs.console}
           >
             {testOutput}
           </TabsContent>
@@ -266,7 +274,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
             <TabsContent
               tabIndex={-1}
               className='tab-content'
-              value={Tab.Notes}
+              value={tabs.notes}
             >
               {notes}
             </TabsContent>
@@ -275,7 +283,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
             <TabsContent
               tabIndex={-1}
               className='tab-content'
-              value={Tab.Preview}
+              value={tabs.preview}
               forceMount
               // forceMount causes the preview tabpanel to never be hidden,
               // so we need to manually add it when preview is not active.

client/src/templates/Introduction/components/block.tsx

@@ -35,7 +35,7 @@ const { curriculumLocale, showUpcomingChanges, showNewCurriculum } = envData;
 
 const mapStateToProps = (
   state: unknown,
-  ownProps: { blockDashedName: string } & unknown
+  ownProps: { blockDashedName: string }
 ) => {
   const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
 

client/src/utils/is-a-cert.ts

@@ -1,21 +1,21 @@
 import { SuperBlocks } from '../../../shared/config/superblocks';
 
 export function isNewRespCert(superBlock: string): boolean {
-  return superBlock === SuperBlocks.RespWebDesignNew;
+  return superBlock === String(SuperBlocks.RespWebDesignNew);
 }
 
 export function isOldRespCert(superBlock: string): boolean {
-  return superBlock === SuperBlocks.RespWebDesign;
+  return superBlock === String(SuperBlocks.RespWebDesign);
 }
 
 export function isNewJsCert(superBlock: string): boolean {
-  return superBlock === SuperBlocks.JsAlgoDataStructNew;
+  return superBlock === String(SuperBlocks.JsAlgoDataStructNew);
 }
 
 export function isRelationalDbCert(superBlock: string): boolean {
-  return superBlock === SuperBlocks.RelationalDb;
+  return superBlock === String(SuperBlocks.RelationalDb);
 }
 
 export function isCollegeAlgebraPyCert(superBlock: string): boolean {
-  return superBlock === SuperBlocks.CollegeAlgebraPy;
+  return superBlock === String(SuperBlocks.CollegeAlgebraPy);
 }

curriculum-server/package.json

@@ -28,6 +28,6 @@
   },
   "devDependencies": {
     "ts-node": "10.9.1",
-    "typescript": "4.9.5"
+    "typescript": "5.2.2"
   }
 }

cypress/e2e/default/learn/header/lang-selector.ts

@@ -22,7 +22,7 @@ describe('language selector', () => {
       cy.get(toLangSelector(lang)).should('be.visible');
     });
 
-    if (lang === 'english') {
+    if (String(lang) === 'english') {
       return;
     }
     it(`should navigate to ${lang}`, () => {

package.json

@@ -110,8 +110,8 @@
     "@types/lodash": "4.14.200",
     "@types/node": "18.18.8",
     "@types/store": "2.0.4",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/parser": "6.7.4",
     "babel-jest": "29.7.0",
     "babel-plugin-transform-imports": "2.0.0",
     "cross-env": "7.0.3",
@@ -145,7 +145,7 @@
     "start-server-and-test": "1.15.5",
     "store": "2.0.12",
     "ts-node": "10.9.1",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "webpack-bundle-analyzer": "4.9.1",
     "yargs": "17.7.2"
   }

tools/challenge-auditor/index.ts

@@ -108,7 +108,7 @@ void (async () => {
     }
   }
   const langsToCheck = availableLangs.curriculum.filter(
-    lang => lang !== 'english'
+    lang => String(lang) !== 'english'
   );
   for (const lang of langsToCheck) {
     console.log(`\n=== ${lang} ===`);

tools/challenge-editor/api/package.json

@@ -20,6 +20,6 @@
     "@types/express": "4.17.21",
     "dotenv": "16.3.1",
     "shx": "0.3.4",
-    "typescript": "4.9.5"
+    "typescript": "5.2.2"
   }
 }

tools/challenge-editor/client/package.json

@@ -8,7 +8,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "6.18.0",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "vite": "4.5.0",
     "vite-tsconfig-paths": "4.2.1"
   },

tools/challenge-helper-scripts/create-next-challenge.ts

@@ -19,6 +19,7 @@ const createNextChallenge = async () => {
 
   const meta = getMetaData();
   meta.challengeOrder.push({
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
     id: challengeId.toString(),
     title: options.title
   });

tools/challenge-helper-scripts/create-project.ts

@@ -98,6 +98,7 @@ async function createMetaJson(
   newMeta.order = order;
   newMeta.superOrder = Object.values(SuperBlocks).indexOf(superBlock) + 1;
   newMeta.superBlock = superBlock;
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   newMeta.challengeOrder = [{ id: challengeId.toString(), title: 'Step 1' }];
   const newMetaDir = path.resolve(metaDir, block);
   if (!existsSync(newMetaDir)) {

tools/challenge-helper-scripts/helpers/get-challenge-template.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-base-to-string */
 import ObjectID from 'bson-objectid';
 
 export interface ChallengeOptions {

tools/challenge-helper-scripts/helpers/get-step-template.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-base-to-string */
 import ObjectID from 'bson-objectid';
 import { insertErms } from './insert-erms';
 

tools/challenge-helper-scripts/insert-challenge.ts

@@ -37,6 +37,7 @@ const insertChallenge = async () => {
 
   const meta = getMetaData();
   meta.challengeOrder.splice(indexToInsert, 0, {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
     id: challengeId.toString(),
     title: options.title
   });

tools/challenge-helper-scripts/package.json

@@ -32,6 +32,6 @@
     "inquirer": "8.2.6",
     "prettier": "3.0.3",
     "ts-node": "10.9.1",
-    "typescript": "4.9.5"
+    "typescript": "5.2.2"
   }
 }

tools/challenge-helper-scripts/utils.test.ts

@@ -60,6 +60,7 @@ describe('Challenge utils helper scripts', () => {
         stepNum: 3
       });
 
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       expect(step.toString()).toEqual(mockChallengeId);
       expect(ObjectID).toHaveBeenCalledTimes(1);
 

tools/challenge-helper-scripts/utils.ts

@@ -26,6 +26,7 @@ const createStepFile = ({
     stepNum
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   fs.writeFileSync(`${projectPath}${challengeId.toString()}.md`, template);
 
   return challengeId;
@@ -47,6 +48,7 @@ interface InsertOptions {
 function insertStepIntoMeta({ stepNum, stepId }: InsertOptions): void {
   const existingMeta = getMetaData();
   const oldOrder = [...existingMeta.challengeOrder];
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   oldOrder.splice(stepNum - 1, 0, { id: stepId.toString(), title: '' });
   // rename all the files in challengeOrder
   const challengeOrder = oldOrder.map(({ id }, index) => ({

tools/scripts/build/build-external-curricula-data.test.ts

@@ -47,7 +47,7 @@ describe('external curriculum data build', () => {
 
     if (result.error) {
       throw new AssertionError(
-        result.error.toString(),
+        result.error.message,
         `file: available-superblocks.json`
       );
     }
@@ -72,7 +72,7 @@ describe('external curriculum data build', () => {
 
         if (result.error) {
           throw new AssertionError(
-            result.error.toString(),
+            result.error.message,
             `file: ${fileInArray}`
           );
         }

tools/scripts/lint/validate-keys.ts

@@ -62,7 +62,7 @@ const readComponentCode = (filePath: string): string => {
     if (!filePath.endsWith('.js') || filePath.endsWith('.test.js')) {
       return '';
     }
-    code += fs.readFileSync(filePath);
+    code += fs.readFileSync(filePath).toString();
   }
   return code;
 };

tools/ui-components/package.json

@@ -32,7 +32,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "tslib": "2.6.2",
-    "typescript": "4.9.5"
+    "typescript": "5.2.2"
   },
   "devDependencies": {
     "@babel/core": "7.23.2",