From 904f77fe7396556b8b6026e5838bbfd1e42e66c2 Mon Sep 17 00:00:00 2001
From: Dang Nguyen Nguyen <ndnguyen2003@gmail.com>
Date: Wed, 30 Aug 2023 19:31:16 -0700
Subject: [PATCH] add click to place marker

---
 src/components/Home/Home.jsx   | 208 ++++++++++++++++++---------------
 src/components/Map/Map.jsx     |  38 +++++-
 src/components/Map/MapIcons.js |   4 +-
 3 files changed, 151 insertions(+), 99 deletions(-)

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 051a4f2..ddeb496 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -32,6 +32,10 @@ import {
   DrawerOverlay,
   DrawerContent,
   DrawerCloseButton,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
 } from "@chakra-ui/react";
 import { SettingsIcon, ChevronDownIcon, StarIcon } from "@chakra-ui/icons";
 import logo from "../../assets/images/small_logo.png";
@@ -91,7 +95,6 @@ export default function Home() {
   const [focusLocation, setFocusLocation] = useState();
   const [screenWidth, setScreenWidth] = useState(window.screen.width);
   const [uploadImg, setUploadImg] = useState("");
-  console.log("In parent, setUploadImg type:", typeof setUploadImg);
 
   // LOGIN MODAL
   const {
@@ -333,6 +336,7 @@ export default function Home() {
           </InputGroup>
         </Flex>
       </Flex>
+
       <Flex
         position="relative"
         marginTop={{ base: "1vh", md: "2%" }}
@@ -347,100 +351,120 @@ export default function Home() {
           flexDirection="row"
           justifyContent="space-between"
         >
-          <Button
-            backgroundColor="#a881af"
-            boxShadow="2xl"
-            color="white"
-            onClick={onOpen}
-            fontSize={{ base: "xl", md: "2xl" }}
-            size="lg"
-            gap={2}
-          >
-            <SettingsIcon />
-            Filter
-          </Button>
-          <Filter
-            setFindFilter={setFindFilter}
-            findFilter={findFilter}
-            onOpen={onOpen}
-            isOpen={isOpen}
-            onClose={onClose}
-          />
-          <Button
-            display={{ md: "none" }}
-            colorScheme="blue"
-            onClick={onResultsBarOpen}
-            fontSize="2xl"
-            boxShadow="2xl"
-            size="lg"
-            gap={2}
-          >
-            <StarIcon />
-          </Button>
+          {isEdit ? (
+            <Flex>
+              <Alert
+                status="warning"
+                textAlign="center"
+                alignItems="center"
+                justifyContent="center"
+                height="80px"
+                border="3px red solid"
+                borderRadius="20px"
+                boxShadow="xl"
+              >
+                <AlertIcon />
+                <AlertTitle>Click on the Map to place your item 📍</AlertTitle>
+              </Alert>
+            </Flex>
+          ) : (
+            <>
+              <Button
+                backgroundColor="#a881af"
+                boxShadow="2xl"
+                color="white"
+                onClick={onOpen}
+                fontSize={{ base: "xl", md: "2xl" }}
+                size="lg"
+                gap={2}
+              >
+                <SettingsIcon />
+                Filter
+              </Button>
+              <Filter
+                setFindFilter={setFindFilter}
+                findFilter={findFilter}
+                onOpen={onOpen}
+                isOpen={isOpen}
+                onClose={onClose}
+              />
+              <Button
+                display={{ md: "none" }}
+                colorScheme="blue"
+                onClick={onResultsBarOpen}
+                fontSize="2xl"
+                boxShadow="2xl"
+                size="lg"
+                gap={2}
+              >
+                <StarIcon />
+              </Button>
 
-          <Drawer
-            isOpen={isResultsBarOpen}
-            placement="right"
-            onClose={onResultsBarClose}
-            size="full"
-          >
-            <DrawerOverlay />
-            <DrawerContent>
-              <DrawerCloseButton size="lg" />
-              <DrawerHeader>
-                {isFilterOff() ? (
-                  <Text fontSize="2xl">All Posts</Text>
-                ) : (
-                  <Flex alignItems="center" gap={1}>
-                    <Text fontSize="2xl" color="green">
-                      Filter: ON
-                    </Text>
-                    <SettingsIcon color="green" />
-                  </Flex>
-                )}
-              </DrawerHeader>
-              <DrawerBody overflow="hidden">
-                <Flex width="100%" flexDir="column">
-                  <Flex>
-                    <InputGroup
-                      mb="1%"
-                      width="90%"
-                      mx="auto"
-                      size={{ base: "md", md: "lg" }}
-                    >
-                      <InputLeftAddon children="🔎" />
-                      <Input
-                        type="teal"
-                        value={search}
-                        placeholder="Search Items ..."
-                        isDisabled={!loading}
-                        onChange={(e) => setSearch(e.target.value)}
-                      />
-                    </InputGroup>
+              <Drawer
+                isOpen={isResultsBarOpen}
+                placement="right"
+                onClose={onResultsBarClose}
+                size="full"
+              >
+                <DrawerOverlay />
+                <DrawerContent>
+                  <DrawerCloseButton size="lg" />
+                  <DrawerHeader>
+                    {isFilterOff() ? (
+                      <Text fontSize="2xl">All Posts</Text>
+                    ) : (
+                      <Flex alignItems="center" gap={1}>
+                        <Text fontSize="2xl" color="green">
+                          Filter: ON
+                        </Text>
+                        <SettingsIcon color="green" />
+                      </Flex>
+                    )}
+                  </DrawerHeader>
+                  <DrawerBody overflow="hidden">
+                    <Flex width="100%" flexDir="column">
+                      <Flex>
+                        <InputGroup
+                          mb="1%"
+                          width="90%"
+                          mx="auto"
+                          size={{ base: "md", md: "lg" }}
+                        >
+                          <InputLeftAddon children="🔎" />
+                          <Input
+                            type="teal"
+                            value={search}
+                            placeholder="Search Items ..."
+                            isDisabled={!loading}
+                            onChange={(e) => setSearch(e.target.value)}
+                          />
+                        </InputGroup>
 
-                    <Button
-                      colorScheme="green"
-                      size="md"
-                      fontSize="xl"
-                      mr={3}
-                      onClick={onOpen}
-                    >
-                      <SettingsIcon />
-                    </Button>
-                  </Flex>
+                        <Button
+                          colorScheme="green"
+                          size="md"
+                          fontSize="xl"
+                          mr={3}
+                          onClick={onOpen}
+                        >
+                          <SettingsIcon />
+                        </Button>
+                      </Flex>
 
-                  <ResultsBar
-                    search={search}
-                    findFilter={findFilter}
-                    setData={setData}
-                    setFocusLocation={setFocusLocation}
-                    onResultsBarClose={onResultsBarClose}
-                  />
-                </Flex>
-              </DrawerBody>
-              <DrawerFooter></DrawerFooter>
-            </DrawerContent>
-          </Drawer>
+                      <ResultsBar
+                        search={search}
+                        findFilter={findFilter}
+                        setData={setData}
+                        setFocusLocation={setFocusLocation}
+                        onResultsBarClose={onResultsBarClose}
+                      />
+                    </Flex>
+                  </DrawerBody>
+                  <DrawerFooter></DrawerFooter>
+                </DrawerContent>
+              </Drawer>
+            </>
+          )}
         </Flex>
         <Flex position="absolute">
           <Map
diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx
index 8aef208..34c9328 100644
--- a/src/components/Map/Map.jsx
+++ b/src/components/Map/Map.jsx
@@ -15,6 +15,7 @@ import {
   useMap,
   Rectangle,
   Circle,
+  useMapEvents,
 } from "react-leaflet";
 import { useDisclosure } from "@chakra-ui/react";
 import InfoModal from "../InfoModal/InfoModal";
@@ -41,7 +42,7 @@ export default function Map({
   setFocusLocation,
   setUploadImg,
   uploadImg,
-  upload
+  upload,
 }) {
   const { user } = UserAuth();
   const { data, setLoading } = useContext(DataContext);
@@ -75,7 +76,6 @@ export default function Map({
     }
   }, [focusLocation, setFocusLocation]);
 
-
   const allMarkers = data
     .filter((item) => {
       return (
@@ -172,7 +172,7 @@ export default function Map({
           itemDate: "",
         });
         setIsCreate(!isCreate);
-        setUploadImg("")
+        setUploadImg("");
       })
       .catch((err) => console.log(err));
 
@@ -214,6 +214,33 @@ export default function Map({
     );
   }
 
+  const NewItemMarker = () => {
+    const map = useMapEvents({
+      click(event) {
+        const { lat, lng } = event.latlng;
+        setPosition([lat, lng]);
+      },
+    });
+
+    return position[0] !== centerPosition[0] &&
+      position[1] !== centerPosition[1] ? (
+      <Marker
+        className="marker"
+        draggable={true}
+        eventHandlers={eventHandlers}
+        position={position}
+        ref={markerRef}
+        icon={othersDrag}
+      >
+        <Popup minWidth={90} closeButton={false}>
+          <span className="popup" onClick={() => toggleDraggable()}>
+            Click to Confirm Location 🤔
+          </span>
+        </Popup>
+      </Marker>
+    ) : null;
+  };
+
   return (
     <div>
       <MapContainer
@@ -230,7 +257,7 @@ export default function Map({
         {!isEdit && <Test location={focusLocation} search={search} />}
         {!isEdit}
         {!isEdit && allMarkers}
-        {isEdit && (
+        {/* {isEdit && (
           <Marker
             className="marker"
             draggable={true}
@@ -245,7 +272,8 @@ export default function Map({
               </span>
             </Popup>
           </Marker>
-        )}
+        )} */}
+        {isEdit && <NewItemMarker />}
         {showDonut && focusLocation && (
           <>
             <Circle
diff --git a/src/components/Map/MapIcons.js b/src/components/Map/MapIcons.js
index cf872e6..d5d886d 100644
--- a/src/components/Map/MapIcons.js
+++ b/src/components/Map/MapIcons.js
@@ -79,8 +79,8 @@ const othersFound = L.icon({
 
 export const othersDrag = L.icon({
   iconUrl: others_black,
-  iconSize: [60, 60],
-  iconAnchor: [30, 50],
+  iconSize: [50, 50],
+  iconAnchor: [25, 30],
 });
 
 export const flyImg = L.icon({