From 0da00acf2509fb80361b1c649b1fed506b5bb19b Mon Sep 17 00:00:00 2001
From: Lucas Ha <lucasha@Lucass-MacBook-Pro.local>
Date: Tue, 2 Apr 2024 11:46:31 -0400
Subject: [PATCH 1/4] Created the AddUser button on the Dashboard page

---
 README.md                           |  2 +-
 src/components/CreateUserButton.tsx | 75 +++++++++++++++++++++++++++++
 src/pages/DashboardPage.tsx         | 12 ++++-
 3 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 src/components/CreateUserButton.tsx

diff --git a/README.md b/README.md
index 5a343d2..9c33b96 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Blueprint Admin
 ## Overview
 React Web Application that will serve as an admin dashboard to manage members, and permission of Stevens Blueprint. The main purpose of the web application is to provide a tool for the Blueprint eboard to manage Blueprint members and display statistics about them. Stevens Blueprint uses Authelia as SSO, therefore to log in members should be signed in. 
-
+git
 ## Features
 The Blueprint Admin will provide means for Blueprint members to do the following:
 
diff --git a/src/components/CreateUserButton.tsx b/src/components/CreateUserButton.tsx
new file mode 100644
index 0000000..b47ebf9
--- /dev/null
+++ b/src/components/CreateUserButton.tsx
@@ -0,0 +1,75 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  useDisclosure,
+  Alert,
+  AlertIcon
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+function CreateUserButton ({ displaySuccess, setDisplaySuccess }: { displaySuccess: boolean, setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>> }): JSX.Element {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [displayError, setDisplayError] = useState(false)
+  const initialRef = React.useRef(null)
+  const finalRef = React.useRef(null)
+
+  const handleSubmit: () => void = () => {
+    console.log('Form submitted')
+    // Check if correct
+    const apiState = true
+    if (!apiState) {
+      setDisplayError(true)
+      return
+    }
+    setDisplaySuccess(true)
+    onClose()
+  }
+
+  return (
+    <>
+      <Button onClick={onOpen} colorScheme='blue' >Add Users</Button>
+
+      <Modal
+        initialFocusRef={initialRef}
+        finalFocusRef={finalRef}
+        isOpen={isOpen}
+        onClose={onClose}
+        isCentered
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader >Add User</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            {displayError ? <Alert status='error'> <AlertIcon /> Request failed </Alert> : <></>}
+            <FormControl>
+              <FormLabel>Email</FormLabel>
+              <Input ref={initialRef} placeholder='Email' />
+            </FormControl>
+
+            <FormControl mt={4}>
+              <FormLabel>Roles</FormLabel>
+              <Input placeholder='Roles' />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme='blue' mr={3} onClick={handleSubmit}> Accept </Button>
+            <Button onClick={onClose}>Cancel</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default CreateUserButton
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index bf4b88e..4e3541f 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -1,7 +1,15 @@
+import CreateUserButton from '../components/CreateUserButton'
+import { Alert, AlertIcon, Container, HStack, Box } from '@chakra-ui/react'
+import { useState } from 'react'
+
 function DashboardPage (): JSX.Element {
+  const [displaySuccess, setDisplaySuccess] = useState(false)
   return (
-        <div>
-        </div>
+    <HStack height="100vh" spacing="0">
+      {displaySuccess ? <Box pt={740} position="relative" h="100vh" w='20%'><Alert status='success'> <AlertIcon /> Request success </Alert> </Box> : <></>}
+      <Container><CreateUserButton displaySuccess={displaySuccess} setDisplaySuccess={setDisplaySuccess} />
+      </Container>
+    </HStack>
   )
 }
 

From 7cebc9e8cf55cf5ba48d5bcafc55fb31432f24a6 Mon Sep 17 00:00:00 2001
From: Lucas Ha <lucasha@Lucass-MacBook-Pro.local>
Date: Thu, 4 Apr 2024 16:08:18 -0400
Subject: [PATCH 2/4] resolved comments

---
 README.md                           |  1 -
 src/components/CreateUserButton.tsx | 50 +++++++++++++++++++++--------
 src/pages/DashboardPage.tsx         | 22 +++++++++----
 3 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 9c33b96..4218c2c 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 # Blueprint Admin
 ## Overview
 React Web Application that will serve as an admin dashboard to manage members, and permission of Stevens Blueprint. The main purpose of the web application is to provide a tool for the Blueprint eboard to manage Blueprint members and display statistics about them. Stevens Blueprint uses Authelia as SSO, therefore to log in members should be signed in. 
-git
 ## Features
 The Blueprint Admin will provide means for Blueprint members to do the following:
 
diff --git a/src/components/CreateUserButton.tsx b/src/components/CreateUserButton.tsx
index b47ebf9..d350681 100644
--- a/src/components/CreateUserButton.tsx
+++ b/src/components/CreateUserButton.tsx
@@ -16,22 +16,28 @@ import {
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
 
-function CreateUserButton ({ displaySuccess, setDisplaySuccess }: { displaySuccess: boolean, setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>> }): JSX.Element {
+function CreateUserButton ({ setDisplaySuccess }: { displaySuccess: boolean, setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>> }): JSX.Element {
   const { isOpen, onOpen, onClose } = useDisclosure()
-  const [displayError, setDisplayError] = useState(false)
   const initialRef = React.useRef(null)
   const finalRef = React.useRef(null)
+  const [formData, setFormData] = useState({ email: '', roles: '' })
+  const [displayError, setDisplayError] = useState(false)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
 
-  const handleSubmit: () => void = () => {
-    console.log('Form submitted')
-    // Check if correct
-    const apiState = true
-    if (!apiState) {
+  const handleSubmit = async (): Promise<void> => {
+    console.log('Form submitted', formData)
+    try {
+      const apiState = true
+      if (!apiState) throw new Error('API call failed')
+      setDisplaySuccess(true)
+      onClose()
+    } catch (error) {
       setDisplayError(true)
-      return
     }
-    setDisplaySuccess(true)
-    onClose()
   }
 
   return (
@@ -50,20 +56,36 @@ function CreateUserButton ({ displaySuccess, setDisplaySuccess }: { displaySucce
           <ModalHeader >Add User</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
-            {displayError ? <Alert status='error'> <AlertIcon /> Request failed </Alert> : <></>}
+          {displayError && (
+              <Alert status="error">
+                <AlertIcon />
+                Request failed
+              </Alert>
+          )}
             <FormControl>
               <FormLabel>Email</FormLabel>
-              <Input ref={initialRef} placeholder='Email' />
+              <Input
+                name="email"
+                placeholder="Email"
+                ref={initialRef}
+                onChange={handleChange}
+                value={formData.email}
+              />
             </FormControl>
 
             <FormControl mt={4}>
               <FormLabel>Roles</FormLabel>
-              <Input placeholder='Roles' />
+              <Input
+                name="roles"
+                placeholder="Roles"
+                onChange={handleChange}
+                value={formData.roles}
+              />
             </FormControl>
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme='blue' mr={3} onClick={handleSubmit}> Accept </Button>
+          <Button colorScheme="blue" mr={3} onClick={() => handleSubmit()}>Accept</Button>
             <Button onClick={onClose}>Cancel</Button>
           </ModalFooter>
         </ModalContent>
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 4e3541f..e4c49d8 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -1,15 +1,25 @@
 import CreateUserButton from '../components/CreateUserButton'
-import { Alert, AlertIcon, Container, HStack, Box } from '@chakra-ui/react'
+import { Alert, AlertIcon, VStack, Flex, Spacer } from '@chakra-ui/react'
 import { useState } from 'react'
 
 function DashboardPage (): JSX.Element {
   const [displaySuccess, setDisplaySuccess] = useState(false)
   return (
-    <HStack height="100vh" spacing="0">
-      {displaySuccess ? <Box pt={740} position="relative" h="100vh" w='20%'><Alert status='success'> <AlertIcon /> Request success </Alert> </Box> : <></>}
-      <Container><CreateUserButton displaySuccess={displaySuccess} setDisplaySuccess={setDisplaySuccess} />
-      </Container>
-    </HStack>
+    <VStack align="stretch" >
+      <Flex>
+      <Spacer/>
+      <CreateUserButton displaySuccess={displaySuccess} setDisplaySuccess={setDisplaySuccess} />
+      </Flex>
+      {displaySuccess && (
+       <Flex>
+        <Spacer/>
+        <Alert status="success" justifyContent="center" height="50px" width = "200px" alignItems="right">
+          <AlertIcon/>
+          Request success
+        </Alert>
+        </Flex>
+      )}
+    </VStack>
   )
 }
 

From 2ed4f6d12f5852e153b492cd51c14a91e07f7e04 Mon Sep 17 00:00:00 2001
From: Lucas Ha <lucasha@Lucass-MacBook-Pro.local>
Date: Mon, 8 Apr 2024 14:57:42 -0400
Subject: [PATCH 3/4] tried debugging, but keeping getting promise error

---
 src/components/CreateUserButton.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CreateUserButton.tsx b/src/components/CreateUserButton.tsx
index d350681..42b7df0 100644
--- a/src/components/CreateUserButton.tsx
+++ b/src/components/CreateUserButton.tsx
@@ -37,6 +37,7 @@ function CreateUserButton ({ setDisplaySuccess }: { displaySuccess: boolean, set
       onClose()
     } catch (error) {
       setDisplayError(true)
+      console.error(error) // Log the error for debugging
     }
   }
 
@@ -85,7 +86,7 @@ function CreateUserButton ({ setDisplaySuccess }: { displaySuccess: boolean, set
           </ModalBody>
 
           <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={() => handleSubmit()}>Accept</Button>
+          <Button colorScheme="blue" mr={3} onClick={handleSubmit}>Accept</Button>
             <Button onClick={onClose}>Cancel</Button>
           </ModalFooter>
         </ModalContent>

From c998925112a2066d3ec7dc08516ae1a05cc0151a Mon Sep 17 00:00:00 2001
From: miguel-merlin <mmerlin@stevens.edu>
Date: Mon, 8 Apr 2024 18:06:40 -0400
Subject: [PATCH 4/4] fix: Promise error

---
 src/components/CreateUserButton.tsx | 51 ++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/CreateUserButton.tsx b/src/components/CreateUserButton.tsx
index 42b7df0..150b59a 100644
--- a/src/components/CreateUserButton.tsx
+++ b/src/components/CreateUserButton.tsx
@@ -16,7 +16,12 @@ import {
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
 
-function CreateUserButton ({ setDisplaySuccess }: { displaySuccess: boolean, setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>> }): JSX.Element {
+function CreateUserButton ({
+  setDisplaySuccess
+}: {
+  displaySuccess: boolean
+  setDisplaySuccess: React.Dispatch<React.SetStateAction<boolean>>
+}): JSX.Element {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const initialRef = React.useRef(null)
   const finalRef = React.useRef(null)
@@ -28,22 +33,36 @@ function CreateUserButton ({ setDisplaySuccess }: { displaySuccess: boolean, set
     setFormData((prev) => ({ ...prev, [name]: value }))
   }
 
-  const handleSubmit = async (): Promise<void> => {
+  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    event.preventDefault()
     console.log('Form submitted', formData)
-    try {
-      const apiState = true
-      if (!apiState) throw new Error('API call failed')
-      setDisplaySuccess(true)
-      onClose()
-    } catch (error) {
-      setDisplayError(true)
-      console.error(error) // Log the error for debugging
+
+    const simulateApiCall = async (): Promise<void> => {
+      await new Promise<void>((resolve, reject) => {
+        const apiState = true
+        if (!apiState) {
+          reject(new Error('API call failed'))
+        } else {
+          resolve()
+        }
+      })
     }
+    simulateApiCall()
+      .then(() => {
+        setDisplaySuccess(true)
+        onClose()
+      })
+      .catch((error) => {
+        setDisplayError(true)
+        console.error(error)
+      })
   }
 
   return (
     <>
-      <Button onClick={onOpen} colorScheme='blue' >Add Users</Button>
+      <Button onClick={onOpen} colorScheme="blue">
+        Add Users
+      </Button>
 
       <Modal
         initialFocusRef={initialRef}
@@ -54,15 +73,15 @@ function CreateUserButton ({ setDisplaySuccess }: { displaySuccess: boolean, set
       >
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader >Add User</ModalHeader>
+          <ModalHeader>Add User</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
-          {displayError && (
+            {displayError && (
               <Alert status="error">
                 <AlertIcon />
                 Request failed
               </Alert>
-          )}
+            )}
             <FormControl>
               <FormLabel>Email</FormLabel>
               <Input
@@ -86,7 +105,9 @@ function CreateUserButton ({ setDisplaySuccess }: { displaySuccess: boolean, set
           </ModalBody>
 
           <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={handleSubmit}>Accept</Button>
+            <Button colorScheme="blue" mr={3} onClick={handleSubmit}>
+              Accept
+            </Button>
             <Button onClick={onClose}>Cancel</Button>
           </ModalFooter>
         </ModalContent>