Download CSV

[Madhu2244]

Overview

"IDGAF" - Minh

Running the program

1. Clone the repo through git clone
2. Navigate to the directory of your fph-frontend repo using the cd command.
3. Run git checkout dev and then git pull.
4. Create a branch off the main branch in fph-frontend. For the name of the branch, use what the title of this issue as. Use git checkout -b <insert_branch_name>.
5. Install the necessary dependencies through running yarn. Test that your application works by running yarn format followed by yarn dev
6. Create your necessary code through creating files within the component folder.
7. Run the code with yarn (to install), yarn format (to format the code), and yarn start (to start the program).
8. Access localhost:3000/.

Task

It's time to take the Download CSV button that we have in the Admin Dashboard, Donation Tracking, and Notification Center.

Don't be scared that its a bunch of places to implement it. We can create a plain JavaScript file called DownloadCSV.js in the utils folder that takes in a list of strings of what the headers are, as well as a list of the different ids associated with it, and the table for this to be done with,. This should output a .csv file consisting of the headers on the first row, with the data entires following immediately afterwards. I should be able to open this up into excel and see everything.

The way that we can do this, we would need to then take the list of ids and run a GET request to the provided table passing in this list of ids. The backend code would then just run a SELECT * statement selecting anything where the id is matching the list of ids. We would need to implement this route for ALL tables, so keep the naming convention the same like so: localhost3001/tableName/selectByIds or something like that. So that we can call 'localhost:3001/{tableName}/selectByIds and we pass in the list of Ids into the body.

Following the implementation of DownloadCSV.js, import this file in the three places indicated earlier (Admin Dashboard, Donation Tracking Table, and Notification Center for Admin).

// DownloadCSV.js
function downloadCSV(headers, data) {
    // Create CSV string
    const csvRows = [];
    
    // Add headers
    csvRows.push(headers.join(','));
    
    // Add data
    data.forEach(row => {
        const values = headers.map(header => {
            const escaped = ('' + row[header]).replace(/"/g, '\\"'); // Escape double quotes
            return `"${escaped}"`; // Encapsulate in quotes to handle commas in data
        });
        csvRows.push(values.join(','));
    });

    const csvString = csvRows.join('\n');
    
    // Create Blob
    const blob = new Blob([csvString], { type: 'text/csv' });
    
    // Create link and trigger download
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'data.csv'; // Name of the file to download
    document.body.appendChild(link); // Required for Firefox
    link.click();
    document.body.removeChild(link); // Clean up
}

export default downloadCSV;

I just ripped this off GP4 so you can reference it for the general implementation details.

Support

Feel free to reach out to Madhu and Josh on Slack/Messenger for assistance.