Merge branch 'stage' into production

bundler/Dockerfile

@@ -21,9 +21,10 @@ ENV PATH "$PATH:/home/node/.local/bin/:/home/node/.cargo/bin"
 WORKDIR /home/node/code
 
 COPY --chown=node ./package.json ./
+COPY --chown=node ./package-lock.json ./
 
 # Install dependencies
-RUN npm install
+RUN npm ci
 
 COPY --chown=node ./ ./
 

bundler/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "tsc -p tsconfig.json && node js/main.js",
+    "start": "node js/main.js",
     "build": "tsc -p tsconfig.json"
   },
   "author": "",

bundler/src/core/clips.ts

@@ -9,7 +9,7 @@ import { hashClientId } from './clients'
 import { getClipsBucketName, getQueriesDir } from '../config/config'
 import { pipe } from 'fp-ts/lib/function'
 import { prepareDir } from '../infrastructure/filesystem'
-import * as RTE from 'fp-ts/readerTaskEither'
+import { readerTaskEither as RTE } from 'fp-ts'
 
 const CLIPS_BUCKET = getClipsBucketName()
 

bundler/src/core/compress.ts

@@ -3,8 +3,7 @@ import path from 'node:path'
 
 import tar from 'tar'
 
-import { io as IO, taskEither as TE } from 'fp-ts'
-import * as RTE from 'fp-ts/readerTaskEither'
+import { io as IO, readerTaskEither as RTE, taskEither as TE } from 'fp-ts'
 import { pipe } from 'fp-ts/lib/function'
 
 import { prepareDir } from '../infrastructure/filesystem'

bundler/src/core/reportedSentences.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs'
 import path from 'node:path'
-import { taskEither as TE } from 'fp-ts'
+import { readerTaskEither as RTE, taskEither as TE } from 'fp-ts'
 import { streamingQuery } from '../infrastructure/database'
 import { getQueriesDir } from '../config/config'
 import { Transform } from 'node:stream'
@@ -10,7 +10,6 @@ import {
   ReportedSentencesRow,
 } from '../types'
 import { pipe } from 'fp-ts/lib/function'
-import * as RTE from 'fp-ts/readerTaskEither'
 
 const printLn = (text: string) => text + '\n'
 

bundler/src/core/ruleOfFive.ts

@@ -3,7 +3,7 @@ import path from 'node:path'
 import { query } from '../infrastructure/database'
 import { pipe } from 'fp-ts/lib/function'
 import { getQueriesDir } from '../config/config'
-import * as RTE from 'fp-ts/readerTaskEither'
+import { readerTaskEither as RTE } from 'fp-ts'
 import { AppEnv } from '../types'
 
 const MINIMUM_UNIQUE_SPEAKERS = 5

bundler/src/core/stats.ts

@@ -1,8 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
-import util from 'node:util'
 
-import { taskEither as TE } from 'fp-ts'
+import { readerTaskEither as RTE, taskEither as TE } from 'fp-ts'
 import { pipe } from 'fp-ts/lib/function'
 import { parse } from 'csv-parse'
 import {
@@ -16,7 +15,6 @@ import {
   isCorporaCreatorFile,
 } from '../infrastructure/corporaCreator'
 import { CLIPS_TSV_ROW } from './clips'
-import * as RTE from 'fp-ts/readerTaskEither'
 import { AppEnv } from '../types'
 
 type Stats = {
@@ -125,7 +123,10 @@ const createEmptyLocale = (): Locale => {
   }
 }
 
-const getAllRelevantFilepaths = (locale: string, releaseDirPath: string): string[] => {
+const getAllRelevantFilepaths = (
+  locale: string,
+  releaseDirPath: string,
+): string[] => {
   const ccFiles = CORPORA_CREATOR_FILES.map(entry =>
     path.join(releaseDirPath, locale, entry),
   )
@@ -253,7 +254,7 @@ export const statsPipeline = (
   locale: string,
   totalDurationInMs: number,
   tarFilepath: string,
-  releaseDirPath: string
+  releaseDirPath: string,
 ) =>
   pipe(
     TE.Do,

bundler/src/core/upload.ts

@@ -1,9 +1,8 @@
 import fs from 'node:fs'
 import path from 'node:path'
 
-import * as TE from 'fp-ts/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
-import * as RTE from 'fp-ts/readerTaskEither'
+import {readerTaskEither as RTE, taskEither as TE } from 'fp-ts'
 
 import { getDatasetBundlerBucketName } from '../config/config'
 import { streamUploadToBucket } from '../infrastructure/storage'

bundler/src/infrastructure/corporaCreator.ts

@@ -1,9 +1,8 @@
 import { spawn } from 'node:child_process'
 import path from 'node:path'
-import { taskEither as TE } from 'fp-ts'
+import { readerTaskEither as RTE, taskEither as TE } from 'fp-ts'
 import { pipe } from 'fp-ts/lib/function'
 import { log } from 'fp-ts/lib/Console'
-import * as RTE from 'fp-ts/readerTaskEither'
 import { AppEnv } from '../types'
 
 export const CORPORA_CREATOR_SPLIT_FILES = [

bundler/src/infrastructure/mp3DurationReporter.ts

@@ -1,10 +1,9 @@
 import { spawn } from 'node:child_process'
 import path from 'node:path'
 
-import { taskEither as TE } from 'fp-ts'
+import { readerTaskEither as RTE, taskEither as TE } from 'fp-ts'
 import { pipe } from 'fp-ts/lib/function'
 import { log } from 'fp-ts/lib/Console'
-import * as RTE from 'fp-ts/readerTaskEither'
 
 import { AppEnv } from '../types'
 

bundler/src/main.ts

@@ -1,6 +1,6 @@
 import 'dotenv/config'
 import { createWorker } from './worker/worker'
-import * as IO from 'fp-ts/io'
+import { io as IO } from 'fp-ts'
 import { pipe } from 'fp-ts/lib/function'
 
 const main: IO.IO<void> = pipe(

bundler/src/worker/processor.ts

@@ -9,7 +9,7 @@ import { runMp3DurationReporter } from '../infrastructure/mp3DurationReporter'
 import { runStats } from '../core/stats'
 import { runReportedSentences } from '../core/reportedSentences'
 import { runUpload } from '../core/upload'
-import * as RTE from 'fp-ts/readerTaskEither'
+import { readerTaskEither as RTE } from 'fp-ts'
 import path from 'node:path'
 
 const processPipeline = pipe(

package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@fluent/syntax": "0.18.1",
+    "@types/node": "18.18.11",
     "@typescript-eslint/eslint-plugin": "5.55.0",
     "@typescript-eslint/parser": "5.55.0",
     "concurrently": "5.3.0",
@@ -30,7 +31,7 @@
     "node-fetch": "2.6.9",
     "prettier": "2.6.0",
     "pretty-quick": "3.1.3",
-    "typescript": "4.1.6"
+    "typescript": "5.2.2"
   },
   "resolutions": {
     "browserslist": "^4.16.5",

server/package.json

@@ -34,7 +34,7 @@
     "lodash.omit": "4.5.0",
     "lodash.pick": "4.4.0",
     "mp3-duration": "^1.1.0",
-    "mysql2": "1.7.0",
+    "mysql2": "3.6.3",
     "nodemailer": "6.7.3",
     "passport": "0.6.0",
     "passport-auth0": "0.6.1",

server/src/lib/model/db/migrations/20230711121706-fix-citation-encoding.ts

@@ -1,5 +1,3 @@
-import {} from 'mysql2'
-
 export const up = async function (db: any): Promise<any> {
   await db.runSql(`
     ALTER TABLE sentences ADD COLUMN source_new text CHARACTER SET utf8mb4 DEFAULT NULL

web/src/components/pages/contribution/speak/audio-web.ts

@@ -45,12 +45,14 @@ export default class AudioWeb {
 
   private getMicrophone(): Promise<MediaStream> {
     return new Promise(function (res: Function, rej: Function) {
-      function deny(error: MediaStreamError) {
+      function deny(error: DOMException) {
         rej(
-          ({
-            NotAllowedError: AudioError.NOT_ALLOWED,
-            NotFoundError: AudioError.NO_MIC,
-          } as { [errorName: string]: AudioError })[error.name] || error
+          (
+            {
+              NotAllowedError: AudioError.NOT_ALLOWED,
+              NotFoundError: AudioError.NO_MIC,
+            } as { [errorName: string]: AudioError }
+          )[error.name] || error
         );
       }
       function resolve(stream: MediaStream) {
@@ -61,8 +63,6 @@ export default class AudioWeb {
         navigator.mediaDevices
           .getUserMedia({ audio: true })
           .then(resolve, deny);
-      } else if (navigator.getUserMedia) {
-        navigator.getUserMedia({ audio: true }, resolve, deny);
       } else if (navigator.webkitGetUserMedia) {
         navigator.webkitGetUserMedia({ audio: true }, resolve, deny);
       } else if (navigator.mozGetUserMedia) {
@@ -78,17 +78,26 @@ export default class AudioWeb {
   isMicrophoneSupported() {
     return (
       navigator.mediaDevices?.getUserMedia ||
-      navigator.getUserMedia ||
       navigator.webkitGetUserMedia ||
       navigator.mozGetUserMedia
     );
   }
 
   // Check if audio recording is supported
   isAudioRecordingSupported() {
+    const supportedFormats = [
+      'audio/webm', // For Chrome
+      'audio/ogg; codecs=opus', // For Firefox
+      'audio/mp4', // For Safari
+    ];
+
+    // check if at least one of the formats is supported in the browser
+    const isAudioFormatSupported = supportedFormats.some(format =>
+      window.MediaRecorder.isTypeSupported(format)
+    );
+
     return (
-      typeof window.MediaRecorder !== 'undefined' &&
-      !window.MediaRecorder.notSupported
+      typeof window.MediaRecorder !== 'undefined' && isAudioFormatSupported
     );
   }
 

web/src/components/pages/contribution/speak/speak.tsx

@@ -614,7 +614,9 @@ class SpeakPage extends React.Component<Props, State> {
                 return clipsToRecord;
               }}>
               {({ onConfirm, onCancel }: any) => (
-                <Modal innerClassName="record-abort" onRequestClose={() => this.handleAbortCancel(onCancel)}>
+                <Modal
+                  innerClassName="record-abort"
+                  onRequestClose={() => this.handleAbortCancel(onCancel)}>
                   <Localized id="record-abort-title">
                     <h1 className="title" />
                   </Localized>

web/src/components/pages/dashboard/challenge/challenge-offline.tsx

@@ -15,7 +15,11 @@ function ChallengeOffline({
   location,
 }: { duration: ChallengeDuration } & RouteComponentProps<any, any, any>) {
   const addAchievement = useAction(Notifications.actions.addAchievement);
-  const dateFormat = { year: 'numeric', month: 'short', day: 'numeric' };
+  const dateFormat = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  } as Intl.DateTimeFormatOptions;
 
   useEffect(() => {
     if (isBeforeChallenge && location.state?.earlyEnroll) {

web/src/components/pages/dashboard/challenge/leaderboard-card.tsx

@@ -26,11 +26,10 @@ export default function LeaderboardCard({
   showVisibleIcon,
   showOverlay,
   service,
-  team,
 }: {
   title: string;
   showVisibleIcon?: boolean;
-  showOverlay?: (event: React.MouseEvent<HTMLInputElement>) => void;
+  showOverlay?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   service: 'top-teams' | 'team-progress' | 'top-contributors';
   team?: boolean;
 }) {

web/src/components/pages/dashboard/challenge/team-card.tsx

@@ -29,7 +29,7 @@ export default function TeamboardCard({
 }: {
   title: string;
   showVisibleIcon?: boolean;
-  showOverlay?: (event: React.MouseEvent<HTMLInputElement>) => void;
+  showOverlay?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   week?: number;
   challengeComplete?: boolean;
 }) {

web/src/components/pages/dashboard/dashboard.tsx

@@ -266,7 +266,7 @@ export default function Dashboard() {
     { subPath: URLS.GOALS, Page: GoalsPage },
     { subPath: URLS.AWARDS, Page: AwardsPage },
   ];
-  let defaultPage = URLS.STATS;
+  let defaultPage = URLS.STATS as string;
   if (isChallengeEnrolled) {
     // @ts-ignore
     pages.unshift({ subPath: URLS.CHALLENGE, Page: ChallengePage });

web/src/components/pages/dashboard/ui.tsx

@@ -8,15 +8,15 @@ export function Fraction({
   percentage,
   className,
 }: {
-  numerator: React.ReactNode;
+  numerator: string | number;
   denominator?: React.ReactNode;
   percentage?: boolean;
   className?: string;
 }) {
   return (
     <div
       className={`fraction${className ? ` ${className}` : ''}${
-        numerator <= 99 ? ' md-right' : ''
+        typeof numerator === 'number' && numerator <= 99 ? ' md-right' : ''
       }`}>
       <div className="numerator">{numerator}</div>
       <div className="denominator">

web/src/components/pages/login.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useEffect } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { useAction } from '../../hooks/store-hooks';
@@ -9,7 +8,7 @@ import { trackProfile } from '../../services/tracker';
 import { useLocale } from '../locale-helpers';
 
 export const LoginFailure = withRouter(
-  ({ history }: RouteComponentProps<any, any, any>) => {
+  ({ history }: RouteComponentProps<any, any, any>): null => {
     const [, toLocaleRoute] = useLocale();
     const addNotification = useAction(Notifications.actions.addPill);
 
@@ -23,7 +22,7 @@ export const LoginFailure = withRouter(
 );
 
 export const LoginSuccess = withRouter(
-  ({ history, location }: RouteComponentProps<any, any, any>) => {
+  ({ history, location }: RouteComponentProps<any, any, any>): null => {
     const user = useTypedSelector(({ user }) => user);
     const [locale, toLocaleRoute] = useLocale();