Merge pull request #34 from icssc/feat/addItemButton

feat: moved add item button
icssc · Feb 27, 2024 · 322c298 · 322c298
2 parents a606643 + 7b4303b
commit 322c298
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 67 deletions.
diff --git 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,
@@ -56,8 +59,6 @@ export default function CreateModal({
   upload,
 }) {
   const { user } = UserAuth();
-  const { onLoginModalOpen } = useContext(DataContext);
-  const { isOpen, onOpen, onClose } = useDisclosure();
   const [isLoading, setIsLoading] = useState(false);
 
   const uploadFile = useCallback(() => {
@@ -101,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
@@ -341,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
@@ -5,7 +5,9 @@ import { UserAuth } from "../../context/AuthContext";
 import DataContext from "../../context/DataContext";
 
 import { Spinner, useToast } from "@chakra-ui/react";
+import { AddIcon, CloseIcon } from "@chakra-ui/icons";
 import {
+  IconButton,
   Input,
   InputGroup,
   InputLeftAddon,
@@ -62,6 +64,15 @@ export default function Home() {
   const toast = useToast();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // CREATE MODAL
+  // hoisted state
+  const {
+    isOpen: isOpenCreateModal,
+    onOpen: onOpenCreateModal,
+    onClose: onCloseCreateModal,
+  } = useDisclosure();
+
   const {
     isOpen: isResultsBarOpen,
     onOpen: onResultsBarOpen,
@@ -170,6 +181,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);
 
@@ -408,6 +430,9 @@ export default function Home() {
 
           <Flex display={{ base: "none", md: "block" }}>
             <CreateModal
+              isOpen={isOpenCreateModal}
+              onOpen={onOpenCreateModal}
+              onClose={onCloseCreateModal}
               setIsCreate={setIsCreate}
               isCreate={isCreate}
               isEdit={isEdit}
@@ -587,7 +612,54 @@ export default function Home() {
             </Flex>
           )}
         </Flex>
+
         <Flex position="absolute">
+          <ButtonGroup
+            position="absolute"
+            right="10"
+            bottom="10"
+            zIndex={1000}
+            variant="solid"
+          >
+            {!isEdit ? (
+              <IconButton
+                height={75}
+                width={75}
+                isRound={true}
+                colorScheme="twitter"
+                aria-label="Add Item"
+                fontSize="30px"
+                icon={<AddIcon />}
+                onClick={handleListItemButtonClick}
+              />
+            ) : (
+              <IconButton
+                height={75}
+                width={75}
+                isRound={true}
+                colorScheme="red"
+                aria-label="Cancel Adding Item"
+                fontSize="30px"
+                icon={<CloseIcon />}
+                onClick={() => {
+                  setNewAddedItem({
+                    image: "",
+                    type: "",
+                    islost: true,
+                    name: "",
+                    description: "",
+                    itemdate: "",
+                    isresolved: false,
+                    ishelped: null,
+                  });
+                  setUploadImg("");
+                  setIsCreate(true);
+                  setIsEdit(false);
+                  onClose();
+                }}
+              />
+            )}
+          </ButtonGroup>
           <Map
             newAddedItem={newAddedItem}
             setNewAddedItem={setNewAddedItem}