Merge pull request #344 from sigdotcom/feature/download-csv

henrievjen · web-flow · commit dc0b7cb3eee0 · 2021-10-07T17:56:01.000-05:00
Added "Download CSV" button to membership tool
diff --git a/apps/admin-web/package.json b/apps/admin-web/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.0.0",
     "@auth0/auth0-spa-js": "^1.2.2",
+    "@types/react-csv": "^1.1.2",
     "antd": "^4.1.3",
     "graphql-tag": "^2.10.1",
     "qrcode.react": "^1.0.0",
@@ -48,6 +49,7 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "jest-watch-typeahead": "^0.4.0",
     "prettier": "^1.18.2",
+    "react-csv": "^2.0.3",
     "typescript": "^3.2.4"
   },
   "browserslist": [
diff --git a/apps/admin-web/src/screens/Membership/index.tsx b/apps/admin-web/src/screens/Membership/index.tsx
@@ -5,6 +5,7 @@ import { SearchOutlined } from "@ant-design/icons";
 import Highlighter from "react-highlight-words";
 import moment from "moment";
 import styled, { AnyStyledComponent } from "styled-components";
+import { CSVLink } from "react-csv";
 
 import { IStyles } from "./IStyles";
 import { IUser } from "./interfaces";
@@ -48,6 +49,11 @@ const ShirtResetButton: AnyStyledComponent = styled.button`
   margin-bottom: 25px;
 `;
 
+const DownloadCSV: AnyStyledComponent = styled.button`
+  margin-bottom: 25px;
+  float: right;
+`;
+
 const Membership: React.FC<{}> = () => {
   const {
     loading: memberLoading,
@@ -327,6 +333,33 @@ const Membership: React.FC<{}> = () => {
     }
   };
 
+  const downloadCSV = () => {
+    const fileHeaders = [
+      { label: "Name", key: "fullName" },
+      { label: "Email", key: "email" },
+      { label: "Status", key: "isActive"},
+      { label: "Expiration", key: "membershipExpiration"},
+      { label: "ACM Shirt", key: "shirtReceived"}
+    ];
+    const CSVLinkStyles = {
+      color: "inherit"
+    };
+    const formattedUsers = users.map(row => ({
+      ...row,
+      isActive: statusActive(row.membershipExpiration)
+    }))
+    .map(row => ({
+      ...row,
+      membershipExpiration: moment(row.membershipExpiration).format("MM/DD/YYYY") === "Invalid date" ? "N/A" : moment(row.membershipExpiration).format("MM/DD/YYYY")
+    }))
+    .map(row => ({
+      ...row,
+      shirtReceived: row.shirtReceived ? "Received" : "Not Received"
+    }));
+    
+    return <CSVLink style={CSVLinkStyles} data={formattedUsers} headers={fileHeaders} filename={"acm-members.csv"}>Download CSV</CSVLink>;
+  };
+
   const getShirtStatus: Function = () => {
     for (let i = 0; i < users.length; i++) {
       if (users[i].id === userId) {
@@ -487,6 +520,10 @@ const Membership: React.FC<{}> = () => {
         Reset Shirt Status
       </ShirtResetButton>
 
+      <DownloadCSV>
+        {downloadCSV()}
+      </DownloadCSV>
+
       <Table dataSource={users} columns={columns} />
       <Modal
         visible={editMembershipVisible}
diff --git a/yarn.lock b/yarn.lock
@@ -3094,6 +3094,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-csv@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.2.tgz#a5694d7e5cbf4bc1d4baa178a3fa7ac3466ea8c5"
+  integrity sha512-hCtZyXAubxBtn3Oi3I9kNAx2liRTaMtl1eWpO2M98aYkHuoSTbYO8OcZEjyr9aJJ30Xnoxj+uES3G6L6O1qgtg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.0.11", "@types/react-dom@^16.8.5", "@types/react-dom@^16.9.1":
   version "16.9.8"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
@@ -13961,6 +13968,11 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-csv@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-2.0.3.tgz#f5d17a3c71107d9bcbe580049350200debdc042a"
+  integrity sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w==
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
