Implement Pronunciations state/actions/reducer.

[imnasnainaec]

Extract recording from ReviewEntries state and expand with playing for stand-alone Pronunciations state.
With this pr, clicking any play or record icon will halt an active recording.

Resolves #330

---

This change is 

[johnthagen]

---

src/components/Pronunciations/AudioPlayer.tsx, line 81 at r1 (raw file):

    setIsPlaying(true);
    audio.addEventListener("ended", () => dispatch(reset()));
    audio.play();

Rider noticed a Promise here is ignored. Is that okay? Anything async we want to do here?

[johnthagen]

---

src/components/Pronunciations/AudioPlayer.tsx, line 47 at r1 (raw file):

  const dispatch = useDispatch();
  const [audio] = useState<HTMLAudioElement>(new Audio(props.pronunciationUrl));
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);

Do we want to be using undef everywhere in TypeScript, or is there a reason we need null in this case?

undef plays nicer with ?

[johnthagen]

---

src/components/Pronunciations/AudioPlayer.tsx, line 181 at r1 (raw file):

        onClose={() => setDeleteConf(false)}
        onConfirm={deleteAudio}
      ></ButtonConfirmation>

This could be simplified to:

      <ButtonConfirmation
        open={deleteConf}
        textId="buttons.deletePermanently"
        titleId="pronunciations.deleteRecording"
        onClose={() => setDeleteConf(false)}
        onConfirm={deleteAudio}
      />

[johnthagen]

---

src/components/Pronunciations/PronunciationsReducer.tsx, line 22 at r1 (raw file):

): PronunciationsState => {
  switch (action.type) {
    case PronunciationsStatus.Playing:

I'm not sure how we feel about fall-through cases, but this could be simplified to:

    case PronunciationsStatus.Playing:
    case PronunciationsStatus.Recording:
      return {
        ...defaultState,
        ...action,
      };

[johnthagen]

---

src/components/Pronunciations/PronunciationsReducer.tsx, line 32 at r1 (raw file):

        ...action,
      };
    case PronunciationsStatus.Default:

Same down here with Default and RESET.

[johnthagen]

Functionally, this worked well and I didn't experience the issues from #330.

[codecov-io]

Codecov Report

Merging #847 (b49549e) into master (c4e1194) will increase coverage by 0.01%.
The diff coverage is 52.94%.

@@            Coverage Diff             @@
##           master     #847      +/-   ##
==========================================
+ Coverage   51.35%   51.36%   +0.01%     
==========================================
  Files         238      240       +2     
  Lines        6605     6621      +16     
  Branches      419      422       +3     
==========================================
+ Hits         3392     3401       +9     
- Misses       2902     2909       +7     
  Partials      311      311              

Flag	Coverage Δ
backend	55.84% <ø> (ø)
frontend	47.00% <52.94%> (+0.04%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/components/App/DefaultState.tsx	100.00% <ø> (ø)
...es/ReviewEntriesComponent/ReviewEntriesActions.tsx	61.84% <ø> (-0.50%)	⬇️
...es/ReviewEntriesComponent/ReviewEntriesReducer.tsx	75.00% <ø> (+5.76%)	⬆️
src/rootReducer.tsx	100.00% <ø> (ø)
src/components/Pronunciations/AudioPlayer.tsx	32.55% <38.09%> (+7.55%)	⬆️
...omponents/Pronunciations/PronunciationsActions.tsx	66.66% <66.66%> (ø)
...omponents/Pronunciations/PronunciationsReducer.tsx	66.66% <66.66%> (ø)
src/components/Pronunciations/RecorderIcon.tsx	58.82% <100.00%> (-4.34%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c4e1194...b49549e. Read the comment docs.

[imnasnainaec]

Reviewable status: 0 of 12 files reviewed, 2 unresolved discussions (waiting on @imnasnainaec and @johnthagen)

---

src/components/Pronunciations/AudioPlayer.tsx, line 47 at r1 (raw file):

Previously, johnthagen wrote…

Do we want to be using undef everywhere in TypeScript, or is there a reason we need null in this case?

undef plays nicer with ?

done

---

src/components/Pronunciations/AudioPlayer.tsx, line 81 at r1 (raw file):

Previously, johnthagen wrote…

Rider noticed a Promise here is ignored. Is that okay? Anything async we want to do here?

done

---

src/components/Pronunciations/AudioPlayer.tsx, line 181 at r1 (raw file):

Previously, johnthagen wrote…

This could be simplified to:

      <ButtonConfirmation
        open={deleteConf}
        textId="buttons.deletePermanently"
        titleId="pronunciations.deleteRecording"
        onClose={() => setDeleteConf(false)}
        onConfirm={deleteAudio}
      />

done

---

src/components/Pronunciations/PronunciationsReducer.tsx, line 22 at r1 (raw file):

Previously, johnthagen wrote…

I'm not sure how we feel about fall-through cases, but this could be simplified to:

    case PronunciationsStatus.Playing:
    case PronunciationsStatus.Recording:
      return {
        ...defaultState,
        ...action,
      };

done

---

src/components/Pronunciations/PronunciationsReducer.tsx, line 32 at r1 (raw file):

Previously, johnthagen wrote…

Same down here with Default and RESET.

done

[johnthagen]

Reviewed 12 of 12 files at r1, 1 of 2 files at r2, 1 of 1 files at r3.
Reviewable status: complete! all files reviewed, all discussions resolved