CSV Parsing in React
This post includes the use of React, JS, Rails, and PapaParse
I am currently working on an application revolving around Cryptocurrency and the Climate. It requires us to gather user’s crypto transactions from different cryptocurrency exchanges in order to analyze them. I wanted to work with Coinbase’s API as the majority of crypto users start off with their product. Coinbase encourages users to use their Oauth2 authentication rather than their API keys, so I spent some time trying to figure this out.
I read through the documentation thoroughly and consulted StackOverflow and many other websites, but I couldn’t get it! First, I realized that one of the URLs provided on CB website are incorrect! The Access Token here should be https://api.coinbase.com/oauth/token. I attempted working with Auth0 but was unable to successfully redirect back to my application and fetch data with my token. I ultimately tabled Oauth2 until a later time, and set my sights on CSV upload first, as all exchanges allow us to export a CSV of our transactions.
I am using a React frontend (utilizing Hooks) and Rails backend. I did some research on best ways to import these CSV files, and ultimately landed on a solution called PapaParse. After installing the parser, I imported the component and utilized much of the starter code.. The PapaParse documents explain the library very well, it just took some minor changes to change it from Class components to Hooks.
After implementing these elements, updating the code to utilize Hooks, and testing my code out on the page, I utilized State to hold the uploaded CSV file. I then created an “upload” button that will trigger onPost which will iterate through each item in the data. The outputted data is a little tricky to work with, but with a few console.logs it became very clear. Within this for loop, I create an object with the necessary fields from each data item, and then posted the data to the back end. These last three images are from within the for loop, I cut some code out for clarity.
Here we have a new fetch request taking place for each line of data.
Finally, we see that everything has propagated to the backend! As long as the data is structured well, it’s rather simple to destructure and send to the backend. I hope this helped you, feel free to reach out if you have any questions! I hope to have a post explaining Coinbase’s Oauth2 in the near future.
