Created modal for adding members

api/src/api/members.js

@@ -1,6 +1,7 @@
 const express = require('express');
 const router = express.Router();
-const { Member, chapterEnum } = require('../models/members');
+const { chapterEnum } = require('../models/members');
+const Member = require('../models/members');
 const errorWrap = require('../middleware/errorWrap');
 const { requireRegistered, requireDirector } = require('../middleware/auth');
 const {

client/package.json

@@ -13,6 +13,7 @@
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-csv-reader": "^3.4.0",
     "react-datepicker": "^3.4.1",
     "react-dom": "^16.13.1",
     "react-icons": "^4.2.0",

client/src/App.jsx

@@ -29,7 +29,6 @@ const App = () => {
   }, [location]);
 
   // TODO: Create user context and remove prop drilling
-
   return (
     <div className="app-container">
       {user && <Navbar user={user} />}

client/src/components/table/Table.jsx

@@ -3,7 +3,8 @@ import React, { useState, useEffect } from 'react';
 import type { Node } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import '../../css/Table.scss';
-import { Button } from 'semantic-ui-react';
+import { Button, Modal } from 'semantic-ui-react';
+import CSVReader from 'react-csv-reader';
 
 type TableProp = {
   data: Array<Object>,

client/src/css/Home.css

@@ -3,3 +3,13 @@
 html {
   font-family: 'Inter', sans-serif;
 }
+
+.ui.table thead th {
+  font-weight: 200;
+  text-align: center;
+}
+
+.ui.basic.button, .ui.basic.buttons .button, .ui.basic.button:hover {
+  color: rgb(33, 133, 208) !important;
+  background: transparent none !important;
+}

client/src/pages/Home.jsx

@@ -2,6 +2,14 @@
 import React, { useState, useEffect } from 'react';
 import type { Node } from 'react';
 import { useHistory } from 'react-router-dom';
+import {
+  Modal,
+  Button,
+  Table as TableSem,
+  Label,
+  Icon,
+} from 'semantic-ui-react';
+import CSVReader from 'react-csv-reader';
 
 import Page from '../components/layout/Page';
 import Table from '../components/table/Table';
@@ -12,6 +20,8 @@ import '../css/Home.css';
 
 const Home = (): Node => {
   const [members, setMembers] = useState([]);
+  const [file, setFile] = useState({});
+  const [tableData, setTableData] = useState([]);
 
   const history = useHistory();
 
@@ -35,6 +45,48 @@ const Home = (): Node => {
 
   return (
     <Page title="Members">
+      <Modal
+        trigger={
+          <div style={{ display: 'flex', justifyContent: 'right' }}>
+            <Button content="ADD MEMBER" primary />
+          </div>
+        }
+        header="Column Mapping"
+        actions={[
+          { key: 'cancel', content: 'CANCEL', basic: true, style: { boxShadow: "none" }},
+          { key: 'submit', content: 'SUBMIT', color: 'blue' },
+        ]}
+        size="tiny"
+        content={
+          <div style={{ padding: '30px' }}>
+            <div style={{ display: 'flex' }}>
+              <Label
+                basic
+                icon="paperclip"
+                style={{ width: '100%' }}
+                size="big"
+                content={file && file.name}
+              />
+              <label>
+                <Label size="large" basic style={{ display: "grid", cursor: "pointer" }}>
+                  <Icon name="upload" style={{ marginLeft: "10px" }}/>
+                  <br />
+                  Upload
+                </Label>
+                <CSVReader
+                  inputId="CSVReader"
+                  inputStyle={{ display: 'none' }}
+                  onFileLoaded={(data, fileInfo) => {
+                    setFile(fileInfo);
+                    setTableData(data);
+                  }}
+                />
+              </label>
+            </div>
+            <TableSem celled headerRow={['FILE COLUMN', 'COLUMN MAPPED TO']} />
+          </div>
+        }
+      />
       <Table
         data={members}
         columns={memberColumnDefs}