added names to notifications (#75)

* added names to notifications * minor spacing fix --------- Co-authored-by: Kristen Yee <[email protected]> Co-authored-by: ThatMegamind <[email protected]> Co-authored-by: ThatMegamind <[email protected]>
ctc-uci · Apr 18, 2024 · 9e801b7 · 9e801b7
1 parent 457301b
commit 9e801b7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/components/Notifications/AccountNotification.jsx b/src/components/Notifications/AccountNotification.jsx
@@ -116,7 +116,7 @@ const AccountNotification = ({
             {/* No accordion for 1 account notification */}
             <Text pb="4">
               <Text color="blue.600" as="b" display="inline">
-                {accounts?.[0]?.email}{' '}
+              {accounts?.[0]?.firstName} ({accounts?.[0]?.email}){' '}
               </Text>
               <Text as="span" display="inline" whiteSpace="wrap">
                 is requesting account approval...
@@ -142,7 +142,7 @@ const AccountNotification = ({
             {/* Accordion for >1 account notification in block */}
             <Text pb="4">
               <Text as="b" color="blue.600">
-                {accounts?.[0]?.email} and {accounts?.length - 1} other
+                {accounts?.[0]?.firstName} and {accounts?.length - 1} other
                 {accounts?.length - 1 > 1 && 's'}{' '}
               </Text>
               <Text as="span" display="inline" whiteSpace="wrap">
@@ -179,11 +179,14 @@ const AccountNotification = ({
                 </Container>
                 <AccordionPanel whiteSpace="wrap" paddingLeft="3.25rem">
                   <Grid templateColumns="1fr auto" gap={6}>
-                    {accounts?.map(({ id, email, approveCallback, declineCallback, undoCallback }) => (
+                    {accounts?.map(({ id, firstName, email, approveCallback, declineCallback, undoCallback }) => (
                       <React.Fragment key={id}>
                         <GridItem>
-                          <Text color="blue.600" decoration="underline">
-                            {email}
+                          <Text as="b" color="blue.600" decoration="underline">
+                            {firstName}{' '}
+                          </Text>
+                          <Text as="span" color="blue.600" decoration="underline">
+                            ({email})
                           </Text>
                         </GridItem>
                         <GridItem>

diff --git a/src/components/Notifications/NotificationElement.js b/src/components/Notifications/NotificationElement.js
@@ -30,9 +30,10 @@ class AccountNotificationBlock extends NotificationBlock {
     this.pendingAccounts = [];
   }
 
-  addPendingAccount(id, email, approveCallback, declineCallback, undoCallback) {
+  addPendingAccount(id, firstName, email, approveCallback, declineCallback, undoCallback) {
     this.pendingAccounts.push({
       id: id,
+      firstName: firstName,
       email: email,
       approveCallback: approveCallback,
       declineCallback: declineCallback,

diff --git a/src/components/Notifications/Notifications.jsx b/src/components/Notifications/Notifications.jsx
@@ -75,7 +75,7 @@ const Notifications = () => {
       // Map MM-DD-YY string to AccountNotificationBlock
       const accountsMap = new Map();
 
-      pendingAccounts.forEach(({ approvedOn, email, id }) => {
+      pendingAccounts.forEach(({ approvedOn, email, id, firstName }) => {
         const { dateObject, formattedDateString } = getDateFromISOString(approvedOn);
         let notificationBlock;
 
@@ -90,6 +90,7 @@ const Notifications = () => {
 
         notificationBlock.addPendingAccount(
           id,
+          firstName,
           email,
           async () => {
             await approveAccount(id);