Add a Recorder context

src/components/DataEntry/DataEntryTable/NewEntry/index.tsx

@@ -24,7 +24,6 @@ import {
 import SenseDialog from "components/DataEntry/DataEntryTable/NewEntry/SenseDialog";
 import VernDialog from "components/DataEntry/DataEntryTable/NewEntry/VernDialog";
 import Pronunciations from "components/Pronunciations/PronunciationsComponent";
-import Recorder from "components/Pronunciations/Recorder";
 import { StoreState } from "types";
 import theme from "types/theme";
 import SpellChecker from "utilities/spellChecker";
@@ -45,7 +44,6 @@ const gridItemStyle = (spacing: number): CSSProperties => ({
 interface NewEntryProps {
   analysisLang: WritingSystem;
   vernacularLang: WritingSystem;
-  recorder?: Recorder;
   spellChecker?: SpellChecker;
   // Parent component handles new entry state:
   addNewEntry: () => Promise<void>;
@@ -74,7 +72,6 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
   const {
     analysisLang,
     vernacularLang,
-    recorder,
     // Parent component handles new entry state:
     addNewEntry,
     updateWordWithNewGloss,
@@ -308,7 +305,6 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           wordId={""}
           audioInFrontend
           pronunciationFiles={newAudioUrls}
-          recorder={recorder}
           deleteAudio={(_, fileName: string) => delNewAudioUrl(fileName)}
           uploadAudio={(_, audioFile: File) => addNewAudioUrl(audioFile)}
         />

src/components/DataEntry/DataEntryTable/NewEntry/tests/SenseDialog.test.tsx

@@ -16,6 +16,11 @@ import { defaultWritingSystem } from "types/writingSystem";
 //  MUI: Unable to set focus to a MenuItem whose component has not been rendered.
 jest.mock("@mui/material/MenuItem", () => "div");
 
+jest.mock("goals/ReviewEntries/ReviewEntriesComponent/CellComponents", () => ({
+  DomainCell: () => <div />,
+  PartOfSpeechCell: () => <div />,
+}));
+
 let testRenderer: renderer.ReactTestRenderer;
 
 const mockState = {

src/components/DataEntry/DataEntryTable/NewEntry/tests/VernDialog.test.tsx

@@ -16,10 +16,11 @@ import { defaultWritingSystem } from "types/writingSystem";
 //  MUI: Unable to set focus to a MenuItem whose component has not been rendered.
 jest.mock("@mui/material/MenuItem", () => "div");
 
-jest.mock(
-  "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/GlossCell",
-  () => "div"
-);
+jest.mock("goals/ReviewEntries/ReviewEntriesComponent/CellComponents", () => ({
+  DomainCell: () => <div />,
+  GlossCell: () => <div />,
+  PartOfSpeechCell: () => <div />,
+}));
 
 let testRenderer: renderer.ReactTestRenderer;
 

src/components/DataEntry/DataEntryTable/RecentEntry.tsx

@@ -9,7 +9,6 @@ import {
   VernWithSuggestions,
 } from "components/DataEntry/DataEntryTable/EntryCellComponents";
 import Pronunciations from "components/Pronunciations/PronunciationsComponent";
-import Recorder from "components/Pronunciations/Recorder";
 import theme from "types/theme";
 import { newGloss } from "types/word";
 import SpellChecker from "utilities/spellChecker";
@@ -27,7 +26,6 @@ export interface RecentEntryProps {
   removeEntry: () => void;
   addAudioToWord: (wordId: string, audioFile: File) => void;
   deleteAudioFromWord: (wordId: string, fileName: string) => void;
-  recorder: Recorder;
   focusNewEntry: () => void;
   analysisLang: WritingSystem;
   vernacularLang: WritingSystem;
@@ -144,7 +142,6 @@ export default function RecentEntry(props: RecentEntryProps): ReactElement {
           <Pronunciations
             wordId={props.entry.id}
             pronunciationFiles={props.entry.audio}
-            recorder={props.recorder}
             deleteAudio={(wordId: string, fileName: string) => {
               props.deleteAudioFromWord(wordId, fileName);
             }}

src/components/DataEntry/DataEntryTable/index.tsx

@@ -29,7 +29,6 @@ import NewEntry from "components/DataEntry/DataEntryTable/NewEntry";
 import RecentEntry from "components/DataEntry/DataEntryTable/RecentEntry";
 import { filterWordsWithSenses } from "components/DataEntry/utilities";
 import { getFileNameForWord } from "components/Pronunciations/AudioRecorder";
-import Recorder from "components/Pronunciations/Recorder";
 import { StoreState } from "types";
 import { Hash } from "types/hash";
 import { useAppSelector } from "types/hooks";
@@ -234,7 +233,6 @@ export default function DataEntryTable(
 
   const levDist = useMemo(() => new LevenshteinDistance(), []);
   const newVernInput = useRef<HTMLDivElement>(null);
-  const recorder = useMemo(() => new Recorder(enqueueSnackbar), []);
   const spellChecker = useMemo(() => new SpellChecker(), []);
   useEffect(() => {
     spellChecker.updateLang(analysisLang.bcp47);
@@ -878,7 +876,6 @@ export default function DataEntryTable(
               deleteAudioFromWord={(wordId: string, fileName: string) =>
                 deleteAudioFromWord(wordId, fileName)
               }
-              recorder={recorder}
               spellChecker={spellChecker}
               focusNewEntry={() => focusInput(newVernInput)}
               analysisLang={analysisLang}
@@ -892,7 +889,6 @@ export default function DataEntryTable(
 
         <Grid item xs={12}>
           <NewEntry
-            recorder={recorder}
             spellChecker={spellChecker}
             analysisLang={analysisLang}
             vernacularLang={vernacularLang}

src/components/DataEntry/DataEntryTable/tests/RecentEntry.test.tsx

@@ -15,7 +15,6 @@ import RecentEntry from "components/DataEntry/DataEntryTable/RecentEntry";
 import { EditTextDialog } from "components/Dialogs";
 import AudioPlayer from "components/Pronunciations/AudioPlayer";
 import AudioRecorder from "components/Pronunciations/AudioRecorder";
-import Recorder from "components/Pronunciations/Recorder";
 import { defaultState as pronunciationsState } from "components/Pronunciations/Redux/PronunciationsReduxTypes";
 import theme from "types/theme";
 import { simpleWord } from "types/word";
@@ -58,7 +57,6 @@ function renderWithWord(word: Word) {
               removeEntry={jest.fn()}
               addAudioToWord={jest.fn()}
               deleteAudioFromWord={jest.fn()}
-              recorder={new Recorder()}
               focusNewEntry={jest.fn()}
               analysisLang={newWritingSystem()}
               vernacularLang={newWritingSystem()}

src/components/Pronunciations/AudioRecorder.tsx

@@ -1,13 +1,13 @@
-import { ReactElement } from "react";
+import { ReactElement, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 
 import Recorder from "components/Pronunciations/Recorder";
+import RecorderContext from "components/Pronunciations/RecorderContext";
 import RecorderIcon from "components/Pronunciations/RecorderIcon";
 
 interface RecorderProps {
   wordId: string;
-  recorder?: Recorder;
   uploadAudio: (wordId: string, audioFile: File) => void;
 }
 
@@ -20,8 +20,8 @@ export function getFileNameForWord(wordId: string): string {
 }
 
 export default function AudioRecorder(props: RecorderProps): ReactElement {
+  const recorder = useContext(RecorderContext);
   const { t } = useTranslation();
-  const recorder = props.recorder ?? new Recorder();
 
   function startRecording(): void {
     recorder.startRecording();

src/components/Pronunciations/PronunciationsComponent.tsx

@@ -3,13 +3,11 @@ import { memo, ReactElement } from "react";
 import { getAudioUrl } from "backend";
 import AudioPlayer from "components/Pronunciations/AudioPlayer";
 import AudioRecorder from "components/Pronunciations/AudioRecorder";
-import Recorder from "components/Pronunciations/Recorder";
 
 interface PronunciationProps {
   wordId: string;
   audioInFrontend?: boolean;
   pronunciationFiles: string[];
-  recorder?: Recorder;
   deleteAudio: (wordId: string, fileName: string) => void;
   uploadAudio: (wordId: string, audioFile: File) => void;
 }
@@ -32,11 +30,7 @@ export function Pronunciations(props: PronunciationProps): ReactElement {
 
   return (
     <>
-      <AudioRecorder
-        wordId={props.wordId}
-        recorder={props.recorder}
-        uploadAudio={props.uploadAudio}
-      />
+      <AudioRecorder wordId={props.wordId} uploadAudio={props.uploadAudio} />
       {audioButtons}
     </>
   );

src/components/Pronunciations/Recorder.ts

@@ -7,7 +7,7 @@ export default class Recorder {
   static blobType: "audio" = "audio";
 
   constructor(toast?: (text: string) => void) {
-    this.toast = toast ?? alert;
+    this.toast = toast ?? ((text: string) => alert(text));
     navigator.mediaDevices
       .getUserMedia({ audio: true })
       .then((audioStream) => this.onMicrophoneAvailable(audioStream))

src/components/Pronunciations/RecorderContext.ts

@@ -0,0 +1,8 @@
+import { enqueueSnackbar } from "notistack";
+import { createContext } from "react";
+
+import Recorder from "components/Pronunciations/Recorder";
+
+const RecorderContext = createContext(new Recorder(enqueueSnackbar));
+
+export default RecorderContext;

src/goals/ReviewEntries/ReviewEntriesComponent/CellColumns.tsx

@@ -401,7 +401,6 @@ const columns: Column<any>[] = [
       <PronunciationsCell
         wordId={rowData.id}
         pronunciationFiles={rowData.pronunciationFiles}
-        recorder={rowData.recorder}
       />
     ),
     customFilterAndSearch: (

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/PronunciationsCell.tsx

@@ -1,5 +1,4 @@
 import Pronunciations from "components/Pronunciations/PronunciationsComponent";
-import Recorder from "components/Pronunciations/Recorder";
 import {
   deleteAudio,
   uploadAudio,
@@ -9,7 +8,6 @@ import { useAppDispatch } from "types/hooks";
 interface PronunciationsCellProps {
   wordId: string;
   pronunciationFiles: string[];
-  recorder?: Recorder;
 }
 
 /** Used to connect the pronunciation component to the deleteAudio and uploadAudio actions */
@@ -24,7 +22,6 @@ export default function PronunciationsCell(props: PronunciationsCellProps) {
     <Pronunciations
       wordId={props.wordId}
       pronunciationFiles={props.pronunciationFiles}
-      recorder={props.recorder}
       deleteAudio={dispatchDelete}
       uploadAudio={dispatchUpload}
     />

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/DefinitionCell.test.tsx

@@ -4,7 +4,7 @@ import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
 
-import { DefinitionCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import DefinitionCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DefinitionCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 import { defaultWritingSystem } from "types/writingSystem";
 

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/DeleteCell.test.tsx

@@ -4,7 +4,7 @@ import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
 
-import { DeleteCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import DeleteCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DeleteCell";
 import { defaultState as reviewEntriesState } from "goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReduxTypes";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/DomainCell.test.tsx

@@ -4,7 +4,7 @@ import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
 
-import { DomainCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import DomainCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/DomainCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 
 jest.mock("components/TreeView", () => "div");

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/FlagCell.test.tsx

@@ -2,7 +2,7 @@ import renderer from "react-test-renderer";
 
 import "tests/reactI18nextMock";
 
-import { FlagCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import FlagCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/FlagCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 
 const mockWord = mockWords()[1];

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/GlossCell.test.tsx

@@ -4,7 +4,7 @@ import configureMockStore from "redux-mock-store";
 
 import "tests/reactI18nextMock";
 
-import { GlossCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import GlossCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/GlossCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 import { defaultWritingSystem } from "types/writingSystem";
 

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/NoteCell.test.tsx

@@ -2,7 +2,7 @@ import renderer from "react-test-renderer";
 
 import "tests/reactI18nextMock";
 
-import { NoteCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import NoteCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/NoteCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 
 // The multiline TextField causes problems in the mock environment.

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/PartOfSpeechCell.test.tsx

@@ -2,7 +2,7 @@ import renderer from "react-test-renderer";
 
 import "tests/reactI18nextMock";
 
-import { PartOfSpeechCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import PartOfSpeechCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/PartOfSpeechCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 
 const mockWord = mockWords()[1];

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/SenseCell.test.tsx

@@ -2,7 +2,7 @@ import renderer from "react-test-renderer";
 
 import "tests/reactI18nextMock";
 
-import { SenseCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import SenseCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/SenseCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 
 const mockWord = mockWords()[1];

src/goals/ReviewEntries/ReviewEntriesComponent/CellComponents/tests/VernacularCell.test.tsx

@@ -2,7 +2,7 @@ import renderer from "react-test-renderer";
 
 import "tests/reactI18nextMock";
 
-import { VernacularCell } from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents";
+import VernacularCell from "goals/ReviewEntries/ReviewEntriesComponent/CellComponents/VernacularCell";
 import mockWords from "goals/ReviewEntries/ReviewEntriesComponent/tests/WordsMock";
 
 // The multiline TextField causes problems in the mock environment.

src/goals/ReviewEntries/ReviewEntriesComponent/Redux/ReviewEntriesReducer.ts

@@ -23,9 +23,7 @@ export const reviewEntriesReducer = (
       return {
         ...state,
         words: state.words.map((w) =>
-          w.id === action.oldId
-            ? { ...action.updatedWord, recorder: w.recorder }
-            : w
+          w.id === action.oldId ? { ...action.updatedWord } : w
         ),
       };
 

src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesComponent.tsx

@@ -1,8 +1,6 @@
-import { enqueueSnackbar } from "notistack";
-import { ReactElement, useEffect, useMemo, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 
 import { getFrontierWords } from "backend";
-import Recorder from "components/Pronunciations/Recorder";
 import ReviewEntriesTable from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTable";
 import { ReviewEntriesWord } from "goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes";
 
@@ -20,17 +18,14 @@ export default function ReviewEntriesComponent(
   props: ReviewEntriesProps
 ): ReactElement {
   const [loaded, setLoaded] = useState(false);
-  const recorder = useMemo(() => new Recorder(enqueueSnackbar), []);
   const { updateAllWords, updateFrontierWord } = props;
 
   useEffect(() => {
     getFrontierWords().then((frontier) => {
-      updateAllWords(
-        frontier.map((w) => new ReviewEntriesWord(w, undefined, recorder))
-      );
+      updateAllWords(frontier.map((w) => new ReviewEntriesWord(w)));
       setLoaded(true);
     });
-  }, [updateAllWords, recorder]);
+  }, [updateAllWords]);
 
   return loaded ? (
     <ReviewEntriesTable

src/goals/ReviewEntries/ReviewEntriesComponent/ReviewEntriesTypes.ts

@@ -8,7 +8,6 @@ import {
   Status,
   Word,
 } from "api/models";
-import Recorder from "components/Pronunciations/Recorder";
 import { newSense, newWord } from "types/word";
 import { cleanDefinitions, cleanGlosses } from "utilities/wordUtilities";
 
@@ -30,9 +29,8 @@ export class ReviewEntriesWord {
   noteText: string;
   flag: Flag;
   protected: boolean;
-  recorder?: Recorder;
 
-  constructor(word?: Word, analysisLang?: string, commonRecorder?: Recorder) {
+  constructor(word?: Word, analysisLang?: string) {
     if (!word) {
       word = newWord();
     }
@@ -45,7 +43,6 @@ export class ReviewEntriesWord {
     this.noteText = word.note.text;
     this.flag = word.flag;
     this.protected = word.accessibility === Status.Protected;
-    this.recorder = commonRecorder;
   }
 }
 

src/goals/ReviewEntries/ReviewEntriesComponent/tests/CellColumns.test.tsx

@@ -12,6 +12,7 @@ import { newSemanticDomain } from "types/semanticDomain";
 import { newDefinition, newFlag, newGloss } from "types/word";
 import { Bcp47Code } from "types/writingSystem";
 
+jest.mock("components/Pronunciations/PronunciationsComponent", () => "div");
 jest.mock("i18next", () => {
   const i18n = jest.requireActual("i18next");
   return { ...i18n, t: (s: string) => s };