feat: add csv download of currrent table

package.json

@@ -17,6 +17,7 @@
     "@testing-library/user-event": "^12.1.10",
     "electron": "^15.3.0",
     "http-proxy-middleware": "^0.19.1",
+    "json2csv": "^5.0.6",
     "lodash": "^4.17.21",
     "minisearch": "^3.1.0",
     "react": "^17.0.2",
@@ -30,6 +31,7 @@
     "react-scripts": "4.0.3",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.0",
+    "socket.io-client": "^4.4.1",
     "styled-components": "^5.3.3",
     "updeep": "^1.2.1",
     "web-vitals": "^1.0.1"

src/pages/Projects/index.js

@@ -4,6 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { withRouter, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
+import { jsonToCsv } from '../../utils/csvUtils';
 import constants from '../../constants';
 
 import {
@@ -169,6 +170,17 @@ const Projects = withRouter(() => {
     return null;
   }
 
+  const downloadTxtFile = () => {
+    const element = document.createElement('a');
+    const file = new Blob([jsonToCsv(climateWarehouseStore.projects)], {
+      type: 'text/plain',
+    });
+    element.href = URL.createObjectURL(file);
+    element.download = 'climateWarehouse.csv';
+    document.body.appendChild(element); // Required for this to work in FireFox
+    element.click();
+  };
+
   return (
     <StyledSectionContainer>
       <StyledHeaderContainer>
@@ -224,7 +236,9 @@ const Projects = withRouter(() => {
             })`}
           />
         </Tabs>
-        <DownloadIcon />
+        <div onClick={downloadTxtFile}>
+          <DownloadIcon />
+        </div>
       </StyledSubHeaderContainer>
       <StyledBodyContainer>
         <TabPanel value={tabValue} index={0}>

src/pages/Units/index.js

@@ -4,6 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { withRouter, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
+import { jsonToCsv } from '../../utils/csvUtils';
 import constants from '../../constants';
 
 import {
@@ -170,6 +171,17 @@ const Units = withRouter(() => {
     return null;
   }
 
+  const downloadTxtFile = () => {
+    const element = document.createElement('a');
+    const file = new Blob([jsonToCsv(climateWarehouseStore.units)], {
+      type: 'text/plain',
+    });
+    element.href = URL.createObjectURL(file);
+    element.download = 'climateWarehouse.csv';
+    document.body.appendChild(element); // Required for this to work in FireFox
+    element.click();
+  };
+
   return (
     <StyledSectionContainer>
       <StyledHeaderContainer>
@@ -225,7 +237,9 @@ const Units = withRouter(() => {
             })`}
           />
         </Tabs>
-        <DownloadIcon />
+        <div onClick={downloadTxtFile}>
+          <DownloadIcon />
+        </div>
       </StyledSubHeaderContainer>
       <StyledBodyContainer>
         <TabPanel value={tabValue} index={0}>

src/store/actions/climateWarehouseActions.js

@@ -58,6 +58,7 @@ const getClimateWarehouseTable = (
         if (response.ok) {
           dispatch(setConnectionCheck(true));
           const results = await response.json();
+
           dispatch({
             type: action,
             payload: results,

src/utils/csvUtils.js

@@ -0,0 +1,6 @@
+const { Parser } = require('json2csv');
+
+export const jsonToCsv = json => {
+  const json2csvParser = new Parser();
+  return json2csvParser.parse(json);
+};