From d991a20b04c9ddb549011a60a1d6bb210953fa23 Mon Sep 17 00:00:00 2001
From: Alex Zhang <alexzhang1618@gmail.com>
Date: Tue, 11 Oct 2022 22:23:38 -0700
Subject: [PATCH 1/2] Add CSV Flow for create new group and use previous group

---
 app.js                             |  1 -
 client/src/components/CSVParser.js | 97 ++++++++++++++++++------------
 client/src/css/CSVParser.css       | 28 +++++++--
 client/src/pages/Dashboard.js      |  2 +
 4 files changed, 84 insertions(+), 44 deletions(-)

diff --git a/app.js b/app.js
index b95030b..7e96e5d 100644
--- a/app.js
+++ b/app.js
@@ -11,7 +11,6 @@ const organizationRoutes = require("./routes/organizationRoutes");
 const groupRoutes = require("./routes/groupRoutes");
 const typeRoutes = require("./routes/typesRoutes");
 
-
 connectDB();
 
 const port = process.env.PORT || 80;
diff --git a/client/src/components/CSVParser.js b/client/src/components/CSVParser.js
index 8f1b77c..ea3fa8f 100644
--- a/client/src/components/CSVParser.js
+++ b/client/src/components/CSVParser.js
@@ -11,6 +11,7 @@
 import React, { useState } from "react";
 import { useCSVReader, useCSVDownloader, formatFileSize } from "react-papaparse";
 import { AiOutlineCloudUpload, AiOutlineDownload } from "react-icons/ai";
+import Select from "react-select";
 import CloudUpload from "../images/CloudUpload.svg";
 import FileIcon from "../images/File.svg";
 
@@ -25,6 +26,8 @@ function CSVParser({
   setCSVUploaded,
   setSnackbar,
   selectedGroup,
+  setSelectedGroup,
+  groupOptions,
   orgId,
   setDataLoading,
   groupCreationVisible,
@@ -39,10 +42,13 @@ function CSVParser({
   const { CSVReader } = useCSVReader();
   const { CSVDownloader, Type } = useCSVDownloader();
   const [tableData, setTableData] = React.useState([]);
-  const group = selectedGroup;
+  const [group, setGroup] = useState(selectedGroup);
   const [noGroupCSVData, setNoGroupCSVData] = useState(null);
   const [formSubmittable, setFormSubmittable] = useState(false);
-  const [createCSVGroup, setCreateCSVGroup] = useState(false); // tracks if group creation from csv is toggled
+  // Tracks if group creation from CSV is toggled
+  const [useExistingCSVGroup, setUseExistingCSVGroup] = useState(false);
+  // Tracks if group select page (flow from uploading to existing group) is selected
+  const [groupSelectionVisible, setGroupSelectionVisible] = useState(false);
 
   React.useEffect(async () => {
     if (group) {
@@ -162,16 +168,20 @@ function CSVParser({
             <div className="modal-background">
               <div className="modal-view csv">
                 <h1 className="upload-csv-header">Upload CSV File</h1>
-                <div className="upload-csv-area" {...getRootProps()}>
-                  <img src={CloudUpload} className="upload-csv-cloud" alt="Upload" />
-                  <p className="upload-csv-area-text">Drag and drop files here to upload</p>
-                  <p className="upload-csv-area-text">or</p>
-                  <div>
-                    <button type="submit" className="modal-blue csv-browse-files">
-                      Browse Files
-                    </button>
+                {groupSelectionVisible ? (
+                  <h3 className="upload-csv-subheader">Add CSV Upload to Group</h3>
+                ) : (
+                  <div className="upload-csv-area" {...getRootProps()}>
+                    <img src={CloudUpload} className="upload-csv-cloud" alt="Upload" />
+                    <p className="upload-csv-area-text">Drag and drop files here to upload</p>
+                    <p className="upload-csv-area-text">or</p>
+                    <div>
+                      <button type="submit" className="modal-blue csv-browse-files">
+                        Browse Files
+                      </button>
+                    </div>
                   </div>
-                </div>
+                )}
                 {acceptedFile ? (
                   <div className="csv-progress-div">
                     <div className="csv-progress-file-icon-container">
@@ -195,41 +205,49 @@ function CSVParser({
                     </div>
                   </div>
                 ) : null}
-                <div className="radio-div">
-                  {forceNewGroup ? (
+                {forceNewGroup || groupSelectionVisible ? null : ( // We don't provide this dropdown option if we forceNewGroup
+                  <div className="radio-div">
+                    <label htmlFor="create-group-csv" className="create-group-csv-label">
+                      Add uploaded CSV to an existing group?
+                    </label>
                     <input
                       type="checkbox"
                       className="create-group-csv-button"
                       id="create-group-csv"
                       value="create-group-csv"
-                      onClick={() => setCreateCSVGroup(!createCSVGroup)}
-                      checked
-                      disabled
+                      checked={useExistingCSVGroup}
+                      onClick={() => setUseExistingCSVGroup(!useExistingCSVGroup)}
                     />
-                  ) : (
-                    <input
-                      type="checkbox"
-                      className="create-group-csv-button"
-                      id="create-group-csv"
-                      value="create-group-csv"
-                      onClick={() => setCreateCSVGroup(!createCSVGroup)}
+                  </div>
+                )}
+                {groupSelectionVisible ? (
+                  <div>
+                    <p>Select the group you want your CSV upload to go into.</p>
+                    <Select
+                      className="csv-group-select"
+                      classNamePrefix="select"
+                      options={groupOptions}
+                      placeholder="Select existing group..."
+                      value={group}
+                      onChange={(option) => setGroup(option)}
                     />
-                  )}
-                  <label htmlFor="create-group-csv" className="create-group-csv-label">
-                    Create a new group from CSV
-                  </label>
-                </div>
+                  </div>
+                ) : null}
                 <div className="csv-submit-div">
                   <button
                     className="modal-white csv-cancel"
                     type="button"
                     onClick={() => {
-                      setFormSubmittable(false);
-                      setCSVFlowVisible(false);
-                      setNoGroupCSVData(null);
+                      if (groupSelectionVisible) {
+                        setGroupSelectionVisible(false);
+                      } else {
+                        setFormSubmittable(false);
+                        setCSVFlowVisible(false);
+                        setNoGroupCSVData(null);
+                      }
                     }}
                   >
-                    Cancel
+                    {groupSelectionVisible ? "Back" : "Cancel"}
                   </button>
                   <button
                     className={
@@ -238,20 +256,25 @@ function CSVParser({
                     type="submit"
                     onClick={() => {
                       if (formSubmittable) {
-                        setCSVFlowVisible(false);
-
-                        if (forceNewGroup || createCSVGroup) {
+                        if (forceNewGroup || !useExistingCSVGroup) {
+                          setCSVFlowVisible(false);
                           setGroupCreationVisible(!groupCreationVisible);
-                        } else {
+                        } else if (groupSelectionVisible) {
+                          setCSVFlowVisible(false);
+                          setGroupSelectionVisible(false);
                           importToDB(noGroupCSVData, CSVUploaded, setCSVUploaded).then();
+                          // Update dashboard to display newly uploaded group
+                          setSelectedGroup(group);
                           setNoGroupCSVData(null);
                           setFormSubmittable(false);
                           setVisiblity(false);
+                        } else {
+                          setGroupSelectionVisible(true);
                         }
                       }
                     }}
                   >
-                    Finish
+                    {groupSelectionVisible ? "Finish" : "Next"}
                   </button>
                 </div>
               </div>
diff --git a/client/src/css/CSVParser.css b/client/src/css/CSVParser.css
index 7eb5899..3a660e8 100644
--- a/client/src/css/CSVParser.css
+++ b/client/src/css/CSVParser.css
@@ -8,7 +8,6 @@
   border-radius: 5px;
   text-align: center;
   border: 0px;
-  top: 20px;
   right: 0;
 }
 
@@ -41,24 +40,36 @@
   font-weight: 500;
   font-size: 24px;
   line-height: 36px;
-  padding-bottom: 34px;
 }
+
+.upload-csv-subheader {
+  margin-top: 7px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+
 .modal-view.csv {
   width: 444px;
   height: auto;
   position: relative;
 }
+
 .upload-csv-area {
+  display: inline-block;
+  margin-top: 34px;
   width: 98%;
   height: 255px;
   background: #f3f3f3;
-  border: 2.5px dashed #a9a9a9;
+  outline: 5px dashed #a9a9a9;
+  outline-offset: -5px;
   border-radius: 12px;
   text-align: center;
 }
 
 .csv-submit-div {
   margin-top: 34px;
+  width: 98%;
 }
 
 .modal-white.csv-cancel {
@@ -99,6 +110,7 @@
 .csv-progress-div {
   height: 55px;
   margin-top: 33px;
+  width: 98%;
 }
 
 .csv-progress-file-icon-container {
@@ -162,7 +174,11 @@
 }
 
 .radio-div {
-  width: max-content;
-  margin-bottom: -20px;
-  margin-top: 10px;
+  width: 100%;
+  margin-top: 33px;
+}
+
+.create-group-csv-button {
+  float: right;
+  margin-right: 10px;
 }
diff --git a/client/src/pages/Dashboard.js b/client/src/pages/Dashboard.js
index 942c846..8d63ac7 100644
--- a/client/src/pages/Dashboard.js
+++ b/client/src/pages/Dashboard.js
@@ -561,6 +561,8 @@ function Dashboard() {
                     snackbar={snackbar}
                     setSnackbar={setSnackbar}
                     selectedGroup={selectedGroup}
+                    setSelectedGroup={setSelectedGroup}
+                    groupOptions={groupOptions}
                     orgId={orgId}
                     setDataLoading={setDataLoading}
                     setVisiblity={setVisibility}

From f140448ae680050c2c42238a7c623c85ac54be58 Mon Sep 17 00:00:00 2001
From: Alex Zhang <alexzhang1618@gmail.com>
Date: Wed, 19 Oct 2022 10:18:50 -0700
Subject: [PATCH 2/2] Fix validateCSV bug where data was incorrectly deleted

---
 client/src/components/CSVParser.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/components/CSVParser.js b/client/src/components/CSVParser.js
index ea3fa8f..60eefc2 100644
--- a/client/src/components/CSVParser.js
+++ b/client/src/components/CSVParser.js
@@ -72,14 +72,20 @@ function CSVParser({
    */
   function validateCSV(values) {
     const schemaColumns = group.values;
-
     for (const row of values) {
       if (Object.keys(row).length < schemaColumns.length - 1) return 1; // check if sufficient columns are present
+      let colsSatisfied = 0;
       for (const key of Object.keys(row)) {
         const field = schemaColumns.find((obj) => obj.name === key);
         if (field == null) continue; // skip if col is not present in schema
         if (field.type.toLowerCase() === "number" && !/^\d+$/.test(row[key])) return 2; // if invalid number
         if (field.type.toLowerCase() === "email" && !/^\S+@\S+\.\S+$/.test(row[key])) return 2; // if invalid email
+        // No issues, so we mark this schema column as complete
+        colsSatisfied += 1;
+      }
+      // Make sure all schema columns are represented in the row before continuing...
+      if (colsSatisfied !== schemaColumns.length) {
+        return 1;
       }
     }
     return 0;
@@ -106,6 +112,8 @@ function CSVParser({
           severity: "error",
         });
         return;
+      default:
+        break;
     }
 
     // should ask user to confirm before clearing