Allows user to download data as csv

client/components/LowerSect.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 
 import db from '../firebase'
 
+import jsonexport from 'jsonexport'
+
 const deleteButton = () => {
   deleteUserData()
 }
@@ -10,12 +12,26 @@ function deleteUserData () {
   db.database().ref('metaData').set(null)
 }
 
+function downloadData () {
+  const leadsRef = db.database().ref('metaData')
+
+  leadsRef.on('value', function (snapshot) {
+    snapshot.forEach(function (childSnapshot) {
+      const childData = childSnapshot.val()
+      jsonexport(childData, function (err, csv) {
+        if (err) return console.error(err)
+        console.log(csv)
+      })
+    })
+  })
+}
+
 class LowerSect extends React.Component {
   render () {
     return (
       <div className="lower-sect">
         <button className="delete-button" onClick={() => deleteButton()}>Clear data</button>
-        <button className="download-button">Download data</button>
+        <button className="download-button" onClick={() => downloadData()}>Download data</button>
       </div>
     )
   }

package.json

@@ -44,6 +44,9 @@
     "express": "^4.17.1",
     "firebase": "^8.0.0",
     "heroku": "^7.42.13",
+    "json-2-csv": "^3.7.8",
+    "json2csv": "^5.0.5",
+    "jsonexport": "^3.0.1",
     "knex": "^0.21.5",
     "react-copy-to-clipboard": "^5.0.2",
     "reactjs-popup": "^2.0.4",