From c398d3a76d760c0e0e7162d295fda55c822f1093 Mon Sep 17 00:00:00 2001
From: Tyler Yu <tyleryy@uci.edu>
Date: Fri, 23 Feb 2024 04:23:29 -0800
Subject: [PATCH 1/4] feat: blue + button to open create modal

---
 src/components/CreateModal/CreateModal.jsx |  4 ++-
 src/components/Home/Home.jsx               | 40 ++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/CreateModal/CreateModal.jsx b/src/components/CreateModal/CreateModal.jsx
index 95c43fd..17a50fa 100644
--- a/src/components/CreateModal/CreateModal.jsx
+++ b/src/components/CreateModal/CreateModal.jsx
@@ -43,6 +43,9 @@ import TypeSelector from "../TypeSelector/TypeSelector";
 import LostFoundSwitch from "./LostFoundSwitch";
 
 export default function CreateModal({
+  isOpen,
+  onOpen,
+  onClose,
   newAddedItem,
   setNewAddedItem,
   setIsCreate,
@@ -57,7 +60,6 @@ export default function CreateModal({
 }) {
   const { user } = UserAuth();
   const { onLoginModalOpen } = useContext(DataContext);
-  const { isOpen, onOpen, onClose } = useDisclosure();
   const [isLoading, setIsLoading] = useState(false);
 
   const uploadFile = useCallback(() => {
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index fb57a40..8209bef 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -5,7 +5,9 @@ import { UserAuth } from "../../context/AuthContext";
 import DataContext from "../../context/DataContext";
 
 import { Spinner, useToast } from "@chakra-ui/react";
+import { AddIcon } from "@chakra-ui/icons";
 import {
+  IconButton,
   Input,
   InputGroup,
   InputLeftAddon,
@@ -61,6 +63,14 @@ export default function Home() {
   const toast = useToast();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // CREATE MODAL
+  const {
+    isOpen: isOpenCreateModal,
+    onOpen: onOpenCreateModal,
+    onClose: onCloseCreateModal,
+  } = useDisclosure();
+
   const {
     isOpen: isResultsBarOpen,
     onOpen: onResultsBarOpen,
@@ -169,6 +179,17 @@ export default function Home() {
     return dateB - dateA;
   };
 
+  // Define the callback function to handle a 'List an item' button click
+  const handleListItemButtonClick = () => {
+    if (user) {
+      onOpenCreateModal();
+      setNewAddedItem((prev) => ({ ...prev, islost: true }));
+      setIsEdit(!isEdit);
+    } else {
+      onLoginModalOpen();
+    }
+  };
+
   // Sort the array by date
   data.sort(compareDates);
 
@@ -407,6 +428,9 @@ export default function Home() {
 
           <Flex display={{ base: "none", md: "block" }}>
             <CreateModal
+              isOpen={isOpenCreateModal}
+              onOpen={onOpenCreateModal}
+              onClose={onCloseCreateModal}
               setIsCreate={setIsCreate}
               isCreate={isCreate}
               isEdit={isEdit}
@@ -581,7 +605,23 @@ export default function Home() {
             </Flex>
           )}
         </Flex>
+
         <Flex position="absolute">
+          <IconButton
+            position="absolute"
+            right="10"
+            bottom="10"
+            height={75}
+            width={75}
+            zIndex={1000}
+            isRound={true}
+            variant="solid"
+            colorScheme="twitter"
+            aria-label="Add"
+            fontSize="30px"
+            icon={<AddIcon />}
+            onClick={handleListItemButtonClick}
+          />
           <Map
             newAddedItem={newAddedItem}
             setNewAddedItem={setNewAddedItem}

From 117d98635840ba41eae2c5c1566a3a004f05dca8 Mon Sep 17 00:00:00 2001
From: Tyler Yu <tyleryy@uci.edu>
Date: Fri, 23 Feb 2024 04:32:42 -0800
Subject: [PATCH 2/4] feat: added button group + delete button

---
 src/components/Home/Home.jsx | 39 ++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 8209bef..20e39cf 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -5,13 +5,14 @@ import { UserAuth } from "../../context/AuthContext";
 import DataContext from "../../context/DataContext";
 
 import { Spinner, useToast } from "@chakra-ui/react";
-import { AddIcon } from "@chakra-ui/icons";
+import { AddIcon, CloseIcon } from "@chakra-ui/icons";
 import {
   IconButton,
   Input,
   InputGroup,
   InputLeftAddon,
   Button,
+  ButtonGroup,
   Flex,
   HStack,
   Text,
@@ -607,21 +608,37 @@ export default function Home() {
         </Flex>
 
         <Flex position="absolute">
-          <IconButton
+          <ButtonGroup
             position="absolute"
             right="10"
             bottom="10"
-            height={75}
-            width={75}
             zIndex={1000}
-            isRound={true}
             variant="solid"
-            colorScheme="twitter"
-            aria-label="Add"
-            fontSize="30px"
-            icon={<AddIcon />}
-            onClick={handleListItemButtonClick}
-          />
+          >
+            {!isEdit ? (
+              <IconButton
+                height={75}
+                width={75}
+                isRound={true}
+                colorScheme="twitter"
+                aria-label="Add"
+                fontSize="30px"
+                icon={<AddIcon />}
+                onClick={handleListItemButtonClick}
+              />
+            ) : (
+              <IconButton
+                height={75}
+                width={75}
+                isRound={true}
+                colorScheme="red"
+                aria-label="Delete"
+                fontSize="30px"
+                icon={<CloseIcon />}
+                onClick={() => {}}
+              />
+            )}
+          </ButtonGroup>
           <Map
             newAddedItem={newAddedItem}
             setNewAddedItem={setNewAddedItem}

From 0412ba2fb241df8c766a42ad0984cb45051984d5 Mon Sep 17 00:00:00 2001
From: Tyler Yu <tyleryy@uci.edu>
Date: Fri, 23 Feb 2024 04:36:04 -0800
Subject: [PATCH 3/4] feat: hoisted state

---
 src/components/Home/Home.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 20e39cf..5550130 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -66,6 +66,7 @@ export default function Home() {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   // CREATE MODAL
+  // hoisted state
   const {
     isOpen: isOpenCreateModal,
     onOpen: onOpenCreateModal,

From 7b4303b4e32b036e11d857dc82d43230600fb5f9 Mon Sep 17 00:00:00 2001
From: Tyler Yu <tyleryy@uci.edu>
Date: Fri, 23 Feb 2024 04:40:23 -0800
Subject: [PATCH 4/4] feat: Cancel add item button functionality

---
 src/components/CreateModal/CreateModal.jsx | 66 ----------------------
 src/components/Home/Home.jsx               | 21 ++++++-
 2 files changed, 18 insertions(+), 69 deletions(-)

diff --git a/src/components/CreateModal/CreateModal.jsx b/src/components/CreateModal/CreateModal.jsx
index 17a50fa..7a35759 100644
--- a/src/components/CreateModal/CreateModal.jsx
+++ b/src/components/CreateModal/CreateModal.jsx
@@ -59,7 +59,6 @@ export default function CreateModal({
   upload,
 }) {
   const { user } = UserAuth();
-  const { onLoginModalOpen } = useContext(DataContext);
   const [isLoading, setIsLoading] = useState(false);
 
   const uploadFile = useCallback(() => {
@@ -103,70 +102,6 @@ export default function CreateModal({
     count: steps.length,
   });
 
-  // Define the callback function to handle a 'List an item' button click
-  const handleListItemButtonClick = useCallback(() => {
-    if (user) {
-      onOpen();
-      setNewAddedItem((prev) => ({ ...prev, islost: true }));
-      setIsEdit(!isEdit);
-    } else {
-      onLoginModalOpen();
-    }
-  }, [user, onOpen, onLoginModalOpen, setNewAddedItem, isEdit, setIsEdit]);
-
-  // Define the JSX for the 'List an item' button
-  const listItemButton = (
-    <Button
-      // h={{ base: "10vh", md: "7vh" }}
-      // w={{ base: "40vw", md: "" }}
-      boxShadow="xl"
-      _hover={{ bg: "#b4dbd9" }}
-      backgroundColor="#33b249"
-      color="white"
-      fontSize="xl"
-      fontWeight="bold"
-      borderRadius={30}
-      size={"lg"}
-      paddingY={{ base: 10, md: 8 }}
-      onClick={handleListItemButtonClick}
-    >
-      <Text>List an item</Text>
-    </Button>
-  );
-
-  // Define the JSX for the 'Cancel (listing an item)' button
-  const cancelListItemButton = (
-    <Button
-      h={{ base: "8vh", md: "7vh" }}
-      w={{ base: "40vw", md: "8vw" }}
-      _hover={{ bg: "#F4C2C2" }}
-      backgroundColor="#B31B1B"
-      color="white"
-      fontSize="xl"
-      fontWeight="bold"
-      borderRadius={20}
-      onClick={() => {
-        setNewAddedItem({
-          image: "",
-          type: "",
-          islost: true,
-          name: "",
-          description: "",
-          itemdate: "",
-          isresolved: false,
-          ishelped: null,
-        });
-        setUploadImg("");
-        setActiveStep(0);
-        setIsCreate(true);
-        setIsEdit(false);
-        onClose();
-      }}
-    >
-      Cancel
-    </Button>
-  );
-
   // Define the JSX for the loading animation while an image is uploading
   const loadingAnimation = (
     <Flex
@@ -343,7 +278,6 @@ export default function CreateModal({
 
   return (
     <>
-      {isCreate ? listItemButton : cancelListItemButton}
       <Modal
         isOpen={isOpen}
         onClose={() => {
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 5550130..cecf92f 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -622,7 +622,7 @@ export default function Home() {
                 width={75}
                 isRound={true}
                 colorScheme="twitter"
-                aria-label="Add"
+                aria-label="Add Item"
                 fontSize="30px"
                 icon={<AddIcon />}
                 onClick={handleListItemButtonClick}
@@ -633,10 +633,25 @@ export default function Home() {
                 width={75}
                 isRound={true}
                 colorScheme="red"
-                aria-label="Delete"
+                aria-label="Cancel Adding Item"
                 fontSize="30px"
                 icon={<CloseIcon />}
-                onClick={() => {}}
+                onClick={() => {
+                  setNewAddedItem({
+                    image: "",
+                    type: "",
+                    islost: true,
+                    name: "",
+                    description: "",
+                    itemdate: "",
+                    isresolved: false,
+                    ishelped: null,
+                  });
+                  setUploadImg("");
+                  setIsCreate(true);
+                  setIsEdit(false);
+                  onClose();
+                }}
               />
             )}
           </ButtonGroup>