From 7d39127b61d2dffd5485e80f4803495227ac5613 Mon Sep 17 00:00:00 2001
From: Oscar Wang <oscarwang22396@gmail.com>
Date: Mon, 18 Sep 2023 00:50:07 -0400
Subject: [PATCH] fixed styling

---
 .../Admin/AddUser/AddUser.module.css          |  9 +++++
 .../src/components/Admin/AddUser/AddUser.tsx  | 36 ++++++++++---------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Admin/AddUser/AddUser.module.css b/frontend/src/components/Admin/AddUser/AddUser.module.css
index ea0a24e0e..63d6a7dbe 100644
--- a/frontend/src/components/Admin/AddUser/AddUser.module.css
+++ b/frontend/src/components/Admin/AddUser/AddUser.module.css
@@ -53,3 +53,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.fileUpload {
+  margin-top: 1rem;
+}
+
+.successMsg {
+  margin-top: 1rem;
+  color: green;
+}
diff --git a/frontend/src/components/Admin/AddUser/AddUser.tsx b/frontend/src/components/Admin/AddUser/AddUser.tsx
index dc35ea9e4..84495faa7 100644
--- a/frontend/src/components/Admin/AddUser/AddUser.tsx
+++ b/frontend/src/components/Admin/AddUser/AddUser.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Card, Button, Form, Input, Select, TextArea } from 'semantic-ui-react';
+import { Card, Button, Form, Input, Select, TextArea, CardContent } from 'semantic-ui-react';
 import ALL_ROLES from 'common-types/constants';
 import csvtojson from 'csvtojson';
 import styles from './AddUser.module.css';
@@ -76,6 +76,7 @@ export default function AddUser(): JSX.Element {
     isCreatingUser: false
   });
   const [csvFile, setCsvFile] = useState<File | undefined>(undefined);
+  const [uploadStatus, setUploadStatus] = useState<string>('');
 
   function createNewUser(): void {
     setState({
@@ -131,19 +132,18 @@ export default function AddUser(): JSX.Element {
     if (csvFile) {
       const csv = await csvFile.text();
       const json = await csvtojson().fromString(csv);
-      const members = json.map((m) => ({
-        ...m,
-        netid: getNetIDFromEmail(m.email),
-        roleDescription: getRoleDescriptionFromRoleID(m.role)
-      }));
+      const members = json.map(
+        (m) =>
+          ({
+            ...m,
+            netid: getNetIDFromEmail(m.email),
+            roleDescription: getRoleDescriptionFromRoleID(m.role)
+          } as Member)
+      );
       members.forEach((m) => {
         allMembers.includes(m) ? MembersAPI.updateMember(m) : MembersAPI.setMember(m);
       });
-    } else {
-      Emitters.userEditError.emit({
-        headerMsg: "Couldn't upload CSV!",
-        contentMsg: 'No CSV file selected.'
-      });
+      setUploadStatus(`Uploaded ${members.length} members`);
     }
   }
 
@@ -182,7 +182,7 @@ export default function AddUser(): JSX.Element {
                 ))}
               </Card.Content>
             </div>
-            <Card.Content extra>
+            <Card.Content>
               <div className={`ui one buttons ${styles.fullWidth}`}>
                 <Button
                   basic
@@ -204,7 +204,7 @@ export default function AddUser(): JSX.Element {
                 </Button>
               </div>
             </Card.Content>
-            <Card.Content extra>
+            <Card.Content>
               <div className={`ui one buttons ${styles.fullWidth}`}>
                 <Button
                   basic
@@ -217,9 +217,13 @@ export default function AddUser(): JSX.Element {
                   {csvFile ? `Upload ${csvFile.name}` : 'Choose a CSV file'}
                 </Button>
               </div>
-            </Card.Content>
-            <Card.Content extra>
-              <input type="file" accept=".csv" onChange={(e) => setCsvFile(e.target.files?.[0])} />
+              <input
+                className={styles.fileUpload}
+                type="file"
+                accept=".csv"
+                onChange={(e) => setCsvFile(e.target.files?.[0])}
+              />
+              {uploadStatus ? <p className={styles.successMsg}>{uploadStatus}</p> : undefined}
             </Card.Content>
           </Card>
           {state.currentSelectedMember !== undefined ? (