Add a "Export to CSV" button to download the transcription

[deepankarmalhan]

Is your feature request related to a problem? Please describe.
The keywords are generated and stored in the component state to be rendered but there's no way to export the data. I would like to start a discussion around adding an "Export to CSV" button after the transcription is completed.

Describe the solution you'd like
Looking through the Demo component, it seems that stopTranscription() would be a good place to flip a flag in the React state which would enable an already rendered Export to CSV button. This button can be used to consolidate all the data in the React component's state and put into a csv format to be downloaded by the user.

Describe alternatives you've considered
No other alternatives considered.

Additional context
A researcher friend of mine is using this incredibly helpful UI for her PhD research and she would appreciate having a way to export the transcriptions to a file (due to having to do them 100s of times for various recordings).

[germanattanasio]

This sounds like a good idea. @deepankarmalhan do you think you can write a PR? I don't think it's on our roadmap to add features to this demo, so it will have to be a community contribution.

[deepankarmalhan]

Yeah I'll be happy to! Do you mind pointing me in the right direction of where the method will go? I see the data is stored in the Demo component's state but I don't know at what point should we assume the data in there is "finished".

I'm assuming stopTranscription method but I want to get your thoughts?

[deepankarmalhan]

@germanattanasio did you get a chance to mull this over?

[germanattanasio]

I think the data is already there since we show it in the UI. You probably want to add a link to download it as CSV under the transcription text area. Not a button, just a link.

If the data is being added to the dom but not store in the state then you can just add it to the react state and use it when downloading it.

Don't format the data until the user click on the download link.

Here is an example of how to trigger the csv file download https://code-maven.com/create-and-download-csv-with-javascript