ruff

calblueprint · Nov 25, 2024 · 6c9e074 · 6c9e074
2 parents 9f83c71 + ac8b0e3
commit 6c9e074
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/api/maps/AddMarkers.tsx b/api/maps/AddMarkers.tsx
@@ -9,13 +9,17 @@ import { MarkerInfoWindow } from './MarkerInfoWindow';
 export default function AddMarker({
   projects,
   selectedProjectId,
+  map,
   setSelectedProjectId,
+  setMap,
 }: {
   projects: Project[] | null;
   selectedProjectId: number | null;
+  map: google.maps.Map | null;
   setSelectedProjectId: React.Dispatch<React.SetStateAction<number | null>>;
+  setMap: React.Dispatch<React.SetStateAction<google.maps.Map | null>>;
 }) {
-  const map = useMap();
+  setMap(useMap());
 
   const handleMarkerClick = (
     projectId: number,

diff --git a/api/maps/MarkerInfoWindow.tsx b/api/maps/MarkerInfoWindow.tsx
@@ -48,7 +48,6 @@ export const MarkerInfoWindow = ({
 }) => {
   const [markerRef, marker] = useAdvancedMarkerRef();
   const [infoWindowShown, setInfoWindowShown] = useState(false);
-  const [modalOpen, setModalOpen] = useState(false);
 
   // open infowindow when marker is hovered and not already open
   const handleMarkerEnter = useCallback(() => {
@@ -59,17 +58,16 @@ export const MarkerInfoWindow = ({
 
   // close infowindow when modal is closed
   const handleClose = useCallback(() => {
-    if (!modalOpen) {
+    if (selectedProjectId !== projectId) {
       setInfoWindowShown(false);
     }
-  }, [modalOpen]);
+  }, [projectId, selectedProjectId]);
 
   const handleMarkerClick = () => {
     onMarkerClick(projectId, position);
-    setModalOpen(!modalOpen);
 
     // toggle infowindow when marker is clicked
-    if (!modalOpen) {
+    if (selectedProjectId === null) {
       setInfoWindowShown(true);
     } else {
       setInfoWindowShown(false);
@@ -80,7 +78,8 @@ export const MarkerInfoWindow = ({
     // close infowindow and modal if new marker is clicked
     if (selectedProjectId !== projectId) {
       setInfoWindowShown(false);
-      setModalOpen(false);
+    } else {
+      setInfoWindowShown(true);
     }
   }, [selectedProjectId, projectId]);
 

diff --git a/components/Map/index.tsx b/components/Map/index.tsx
@@ -24,10 +24,14 @@ const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker
 export default function Map({
   projects,
   selectedProjectId,
+  map,
+  setMap,
   setSelectedProjectId,
 }: {
   projects: Project[] | null;
   selectedProjectId: number | null;
+  map: google.maps.Map | null;
+  setMap: React.Dispatch<React.SetStateAction<google.maps.Map | null>>;
   setSelectedProjectId: React.Dispatch<React.SetStateAction<number | null>>;
 }) {
   return (
@@ -44,6 +48,8 @@ export default function Map({
       >
         <AddMarkers
           projects={projects}
+          map={map}
+          setMap={setMap}
           selectedProjectId={selectedProjectId}
           setSelectedProjectId={setSelectedProjectId}
         />

diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useMap } from '@vis.gl/react-google-maps';
 import {
   LocationIcon,
   ProjectSizeIcon,
@@ -44,7 +45,7 @@ export default function MapViewScreen({
       icon: <LocationIcon />,
     },
   ];
-
+  const [map, setMap] = useState<google.maps.Map | null>(useMap());
   const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
     null,
   );
@@ -81,11 +82,14 @@ export default function MapViewScreen({
       />
       <Map
         projects={projects}
+        map={map}
+        setMap={setMap}
         selectedProjectId={selectedProjectId}
         setSelectedProjectId={setSelectedProjectId}
       />
       <ProjectsListingModal
         projects={filteredProjects}
+        map={map}
         setSelectedProjectId={setSelectedProjectId}
       />
       {selectedProjectId && (

diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx
@@ -36,9 +36,11 @@ import {
 
 export default function ProjectItem({
   project_id,
+  map,
   setSelectedProjectId,
 }: {
   project_id: number;
+  map: google.maps.Map | null;
   setSelectedProjectId: React.Dispatch<React.SetStateAction<number | null>>;
 }) {
   const [project, setProject] = useState<Project | null>(null);
@@ -73,8 +75,8 @@ export default function ProjectItem({
     renewable_energy_technology,
     size,
     // developer,
-    // longitude,
-    // latitude,
+    longitude,
+    latitude,
     project_status,
     // county,
     // town,
@@ -145,6 +147,8 @@ export default function ProjectItem({
   };
 
   const handleProjectClick = () => {
+    const position = new google.maps.LatLng(latitude ?? 0, longitude ?? 0);
+    map?.panTo(position);
     setSelectedProjectId(project_id);
   };
 

diff --git a/components/ProjectsListingModal/index.tsx b/components/ProjectsListingModal/index.tsx
@@ -13,9 +13,11 @@ import {
 
 export default function ProjectsListingModal({
   projects,
+  map,
   setSelectedProjectId,
 }: {
   projects: Project[] | null;
+  map: google.maps.Map | null;
   setSelectedProjectId: React.Dispatch<React.SetStateAction<number | null>>;
 }) {
   const projectItems = projects?.map((project: Project) => {
@@ -24,6 +26,7 @@ export default function ProjectsListingModal({
         key={project.id}
         project_id={project.id}
         setSelectedProjectId={setSelectedProjectId}
+        map={map}
       />
     );
   });