Merge branch 'user-story/18/task/57/map-api'

agiledev-students-fall2023 · Oct 31, 2023 · 5d94b6b · 5d94b6b
2 parents 88721f6 + d64ecf2
commit 5d94b6b
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 32 deletions.
diff --git a/front-end/GoodOldMap/src/App.jsx b/front-end/GoodOldMap/src/App.jsx
@@ -10,6 +10,7 @@ import FavoriteList from './pages/FavoriteList/FavoriteList';
 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="/favoritelist" element={<FavoriteList />}/>
           <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
@@ -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
@@ -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
diff --git a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx
@@ -1,31 +1,41 @@
 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}>
         <TileLayer
           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
diff --git 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">