marleymarl / geotimeline

12 stars 10 forks source link

The final row exported CSV file is missing (compared to the right table) #31

Closed BaNazari closed 4 years ago

BaNazari commented 4 years ago

How re-produce it: Add some footprints on map and table Export CSV

You don't have the last row within the file.

heldersepu commented 4 years ago

This is a real head-scratcher in the first 10 minutes I usually have a clue what way to go... I'm even more confused now...

It seems to be keeping some sort of cache. I change the data we show on the table and we download:

    let sampledata = [];
    this.state.footPrints.map((d, idx) => {
      sampledata.push({ patient_id: idx });
    });
    sampledata.push({ patient_id: this.state.footPrints.length * 10 });

Screenshot from 2020-03-31 20-21-24

marleymarl commented 4 years ago

I found a couple of potential solutions in this thread: https://stackoverflow.com/questions/48760815/export-to-csv-button-in-react-table.

marleymarl commented 4 years ago

Have a button to click download that handles the event and does some prep before clicking the CSVLink with this.csvLink.link.click():

download(event) { const currentRecords = this.reactTable.getResolvedState().sortedData; var data_to_download = [] for (var index = 0; index < currentRecords.length; index++) { let record_to_download = {} for(var colIndex = 0; colIndex < columns.length ; colIndex ++) { record_to_download[columns[colIndex].Header] = currentRecords[index][columns[colIndex].accessor] } data_to_download.push(record_to_download) } this.setState({ dataToDownload: data_to_download }, () => { // click the CSVLink component to trigger the CSV download this.csvLink.link.click() }) }

render() {
   return <div>
             <div>
                <button onClick={this.download}>
                    Download
                </button>
             </div>
             <div>
                <CSVLink
                    data={this.state.dataToDownload}
                    filename="data.csv"
                    className="hidden"
                    ref={(r) => this.csvLink = r}
                    target="_blank"/>

             </div>
             <div>

...

marleymarl commented 4 years ago

Or use different library: https://github.com/alexcaza/export-to-csv :)

heldersepu commented 4 years ago

I don't shy away from a good bug...

seem to be caused by: https://github.com/react-csv/react-csv/blob/master/src/components/Link.js#L27-L32

    componentDidUpdate(prevProps) {
        if (this.props !== prevProps) {
            const { data, headers, separator, uFEFF } = prevProps;
             this.setState({ href: this.buildURI(data, uFEFF, headers, separator) });
        }
    }

not sure why they are doing: const { data, headers, separator, uFEFF } = prevProps; the this.props has the good stuff

heldersepu commented 4 years ago

and it's a known bug with exactly what I mentioned as fix: https://github.com/react-csv/react-csv/pull/211/files

marleymarl commented 4 years ago

Haha nice.