Note created from real-time audio transcription overwrites previous transcript

[trivikr]

Describe the bug

Note created from real-time audio transcription overwrites previous transcript in case of pauses.

Steps to reproduce

Test notes-app and pause while audio transcription is happening.

Observed behavior

The new transcript will overwrite previous one.

Expected behavior

The new transcript should add to previous transcript instead of an overwrite.

Screenshots

Screen recording

https://user-images.githubusercontent.com/16024985/106806723-24a7e600-661d-11eb-9b7d-c357f8a234e3.mov

Additional context

Follow-up to https://github.com/aws-samples/aws-sdk-js-notes-app/pull/7

[trivikr]

This happens because noteContent doesn't get updated after setNoteContent is called. https://github.com/aws-samples/aws-sdk-js-notes-app/blob/58086ba8758e37c4b21d448dc45fc17ccac9723d/packages/frontend/src/content/RecordAudioButton.tsx#L57-L58

[trivikr]

This happens because React state updates reflect in the next re-render. StackOverflow discussion: https://stackoverflow.com/a/54069332

[trivikr]

While working with streams and updating React State, the useEffect hook should be used. StackOverflow discussion: https://stackoverflow.com/a/57301635

[trivikr]

To avoid overwriting, the setNoteContent needs to use a function.

   setNoteContent((noteContent: any) => noteContent + decodedTranscript + "\n");

Refs: https://github.com/facebook/react/issues/15973#issuecomment-505032631