From d64ecf2db700b0a5b5af42d99dd13b23cf741823 Mon Sep 17 00:00:00 2001
From: Nina Xiao <qiwenxiao16@gmail.com>
Date: Mon, 30 Oct 2023 22:06:36 -0400
Subject: [PATCH] click to replace marker

---
 front-end/GoodOldMap/src/App.jsx              |  5 ++-
 .../src/pages/InfoDetail/InfoDetail.jsx       | 28 ++++++--------
 .../src/pages/InfoDetail/InfoLayout.jsx       | 18 +++++++++
 .../GoodOldMap/src/pages/MainMap/MainMap.jsx  | 38 ++++++++++++-------
 .../src/pages/MainMap/MapLayout.jsx           |  2 +
 5 files changed, 59 insertions(+), 32 deletions(-)
 create mode 100644 front-end/GoodOldMap/src/pages/InfoDetail/InfoLayout.jsx

diff --git a/front-end/GoodOldMap/src/App.jsx b/front-end/GoodOldMap/src/App.jsx
index 3116d57..09376ba 100644
--- a/front-end/GoodOldMap/src/App.jsx
+++ b/front-end/GoodOldMap/src/App.jsx
@@ -10,6 +10,7 @@ import Favorite from './pages/FavoriteList/Favorite';
 import AuthLayout from './pages/Authenticate/AuthLayout';
 import AccountLayout from './pages/Account/AccountLayout';
 import MapLayout from './pages/MainMap/MapLayout';
+import InfoLayout from './pages/InfoDetail/InfoLayout';
 const App = () => {
   return (
     <>
@@ -25,7 +26,9 @@ const App = () => {
             <Route path="/*" element={<Error />} />
           </Route>
           {/* TODO: add params: /info/:pieceInfo */}
-          <Route path="/info" element={<InfoDetail/>}/>
+          <Route element={<InfoLayout />}>
+            <Route path="/info" element={<InfoDetail/>}/>
+          </Route>
           
           <Route path="/account" element={<AccountLayout />}>
             <Route path="" element={<Account />} />
diff --git a/front-end/GoodOldMap/src/pages/InfoDetail/InfoDetail.jsx b/front-end/GoodOldMap/src/pages/InfoDetail/InfoDetail.jsx
index ba437cd..d434c80 100644
--- a/front-end/GoodOldMap/src/pages/InfoDetail/InfoDetail.jsx
+++ b/front-end/GoodOldMap/src/pages/InfoDetail/InfoDetail.jsx
@@ -15,24 +15,18 @@ const InfoDetail = () => {
 
   return (
     <>
-      <div className="min-h-screen flex flex-col">
-        <NavBar>
-          <LeftBtn />
-          <RightBtn handleRightClick={handleRightClick}/>
-        </NavBar>
-        <div className="max-h-[80vh] max-w-full m-auto flex">
-          <img className="object-contain" src={props.pic} alt="picture" />
+      <div className="max-h-[80vh] max-w-full m-auto flex">
+        <img className="object-contain" src={props.pic} alt="picture" />
+      </div>
+      <div className="w-[80%] mb-[10%] mx-auto">
+        <div className="mt-2">
+          <h2>{props.header}</h2>
+        </div>
+        <div className="mt-2">
+          {props?.subtitle?.map((subtitle, i) => <p key={i}>{subtitle}</p>)}
         </div>
-        <div className="w-[80%] mb-[10%] mx-auto">
-          <div className="mt-2">
-            <h2>{props.header}</h2>
-          </div>
-          <div className="mt-2">
-            {props?.subtitle?.map((subtitle, i) => <p key={i}>{subtitle}</p>)}
-          </div>
-          <div className="mt-4">
-            <p>{props.parag}</p>
-          </div>
+        <div className="mt-4">
+          <p>{props.parag}</p>
         </div>
       </div>
     </>
diff --git a/front-end/GoodOldMap/src/pages/InfoDetail/InfoLayout.jsx b/front-end/GoodOldMap/src/pages/InfoDetail/InfoLayout.jsx
new file mode 100644
index 0000000..f4fc77a
--- /dev/null
+++ b/front-end/GoodOldMap/src/pages/InfoDetail/InfoLayout.jsx
@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom"
+
+const InfoLayout = () => {
+  return (
+    <>
+    <div className="min-h-screen flex flex-col">
+      <NavBar>
+        <LeftBtn />
+        <RightBtn handleRightClick={handleRightClick}/>
+      </NavBar>
+      <Outlet />
+    </div>
+
+    </>
+  )
+}
+
+export default InfoLayout
\ No newline at end of file
diff --git a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx
index f1ea4e2..867a098 100644
--- a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx
+++ b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx
@@ -1,16 +1,9 @@
 import { useState } from 'react'
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
 import { Icon } from 'leaflet';
-import usePreventZoom from '../../util/hooks/usePreventZoom';
 
 const MainMap = () => {
-  usePreventZoom()
-  const [position, setPosition] = useState([51.505, -0.09]);
-
-  const customIcon = new Icon({
-    iconUrl: "/mapicon.png",
-    iconSize: [38, 38],
-  });
+  const [position, setPosition] = useState([51.505, -0.09])
   return(
     <>
       <MapContainer className='mapContainer' center={position} zoom={4} scrollWheelZoom={false}>
@@ -18,14 +11,31 @@ const MainMap = () => {
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        <Marker position={position} icon={customIcon}>
-          <Popup>
-            A pretty CSS3 popup. <br /> Easily customizable.
-          </Popup>
-        </Marker>
+        <LocationMarker position={position} setPosition={setPosition}/>
       </MapContainer>
     </>
   )
 }
 
+function LocationMarker(props) {
+  useMapEvents({
+    click(evt) {
+      props.setPosition([evt.latlng.lat, evt.latlng.lng])
+    },
+  })
+  const customIcon = new Icon({
+    iconUrl: "/mapicon.png",
+    iconSize: [38, 38],
+  });
+  return(
+    <Marker icon={customIcon} position={props.position}>
+      <Popup>
+        A pretty CSS3 popup. <br /> Easily customizable.
+      </Popup>
+    </Marker>
+
+  )
+}
+
+
 export default MainMap
\ No newline at end of file
diff --git a/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx
index fd29934..3d011de 100644
--- a/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx
+++ b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx
@@ -1,7 +1,9 @@
 import { Outlet } from "react-router-dom";
 import FormInput from "../../components/form/formInput";
+import usePreventZoom from '../../util/hooks/usePreventZoom';
 
 const MapLayout = () => {
+  usePreventZoom()
   return (
     <>
     <div className="h-screen flex flex-col">