fixes

calblueprint · Nov 24, 2024 · 12cae63 · 12cae63
1 parent ae9fdba
commit 12cae63
Show file tree

Hide file tree

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

diff --git a/app/testing/page.tsx b/app/testing/page.tsx
diff --git a/components/Map/index.tsx b/components/Map/index.tsx
@@ -21,7 +21,7 @@ const center = {
 
 const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker
 
-export default function Map(props: { projects: Project[] | null }) {
+export default function Map(props: { projects: Project[] | null, setMap:  React.Dispatch<React.SetStateAction<google.maps.Map | null>>, map: google.maps.Map | null}) {
   return (
     <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string}>
       <GoogleMap
@@ -34,7 +34,7 @@ export default function Map(props: { projects: Project[] | null }) {
         mapTypeId={'roadmap'}
         clickableIcons={false}
       >
-        <AddMarkers projects={props.projects} />
+        <AddMarkers projects={props.projects} setMap={props.setMap} map={props.map} />
       </GoogleMap>
     </APIProvider>
   );

diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { APIProvider } from '@vis.gl/react-google-maps';
+import { APIProvider, useMap } from '@vis.gl/react-google-maps';
 import {
   LocationIcon,
   ProjectSizeIcon,
@@ -44,7 +44,7 @@ export default function MapViewScreen({
       icon: <LocationIcon />,
     },
   ];
-
+  const [map, setMap] = useState<google.maps.Map | null>(useMap());
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedFilters, setSelectedFilters] = useState<Filters>({
     status: [],
@@ -76,8 +76,8 @@ export default function MapViewScreen({
         selectedFilters={selectedFilters}
         setSelectedFilters={setSelectedFilters}
       />
-      <Map projects={projects} />
-      <ProjectsListingModal projects={filteredProjects} />
+      <Map projects={projects} setMap={setMap} map={map}/>
+      <ProjectsListingModal projects={filteredProjects} map={map}/>
     </APIProvider>
   );
 }
diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx
@@ -36,13 +36,11 @@ import {
   StyledProjectItem,
 } from './styles';
 
-export default function ProjectItem({ project_id }: { project_id: number }) {
+export default function ProjectItem({ project_id, map }: { project_id: number , map: google.maps.Map | null}) {
   const [project, setProject] = useState<Project | null>(null);
   const [defaultImage, setDefaultImage] = useState<string | null>(null);
   const [modalOpen, setModalOpen] = useState(false);
 
-  const map = useMap();
-
   useEffect(() => {
     queryProjectbyId(project_id).then(data => {
       setProject(data);

diff --git a/components/ProjectsListingModal/index.tsx b/components/ProjectsListingModal/index.tsx
@@ -13,11 +13,13 @@ import {
 
 export default function ProjectsListingModal({
   projects,
+  map,
 }: {
   projects: Project[] | null;
+  map: google.maps.Map | null;
 }) {
   const projectItems = projects?.map((project: Project) => {
-    return <ProjectItem key={project.id} project_id={project.id} />;
+    return <ProjectItem key={project.id} project_id={project.id} map={map}/>;
   });
 
   return (