[feat] done hiding

api/maps/AddMarkers.tsx

@@ -1,16 +1,20 @@
-import { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { Cluster, MarkerClusterer } from '@googlemaps/markerclusterer';
-import { useMap } from '@vis.gl/react-google-maps';
+import { useAdvancedMarkerRef, useMap } from '@vis.gl/react-google-maps';
 import { ClusterIcon } from '@/assets/Clusters/icons';
 import ProjectModal from '@/components/ProjectModal';
 import { Project } from '../../types/schema';
 import { MarkerInfoWindow } from './MarkerInfoWindow';
 
+// REMOVE ^^
+
 export default function AddMarker({
   projects,
+  filteredProjects,
 }: {
   projects: Project[] | null;
+  filteredProjects: Project[] | null;
 }) {
   const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
     null,
@@ -129,6 +133,39 @@ export default function AddMarker({
     return setClusterer;
   }, [map]);
 
+  const markerMap = useRef<Map<number, google.maps.Marker>>(new Map());
+
+  const hideMarker = (marker: google.maps.Marker) => {
+    marker.setMap(null);
+  };
+
+  const showMarker = (marker: google.maps.Marker, map: google.maps.Map) => {
+    marker.setMap(map);
+  };
+
+  useEffect(() => {
+    console.log('filteredProjects', filteredProjects);
+
+    // Iterate through the filtered projects to update the visibility of each marker
+    projects?.forEach(project => {
+      const marker = markerMap.current.get(project.id);
+      console.log('markerMap', markerMap);
+      console.log('marker', marker);
+      if (marker) {
+        // Check if the project is in the filtered list
+        const isInFilteredProjects = filteredProjects?.some(
+          filteredProject => filteredProject.id === project.id,
+        );
+
+        if (isInFilteredProjects && map) {
+          showMarker(marker, map);
+        } else {
+          hideMarker(marker);
+        }
+      }
+    });
+  }, [filteredProjects, map, projects]);
+
   return (
     <>
       {projects?.map((project: Project) => {
@@ -145,6 +182,7 @@ export default function AddMarker({
             onMarkerClick={handleMarkerClick}
             clusterer={clusterer}
             selectedProjectId={selectedProjectId}
+            markerMap={markerMap.current}
           />
         );
       })}

api/maps/MarkerInfoWindow.tsx

@@ -34,6 +34,7 @@ export const MarkerInfoWindow = ({
   onMarkerClick,
   clusterer,
   selectedProjectId,
+  markerMap,
 }: {
   position: { lat: number; lng: number };
   projectId: number;
@@ -45,6 +46,7 @@ export const MarkerInfoWindow = ({
   ) => void;
   clusterer: MarkerClusterer | null;
   selectedProjectId: number | null;
+  markerMap: Map<number, google.maps.Marker>;
 }) => {
   const [markerRef, marker] = useAdvancedMarkerRef();
   const [infoWindowShown, setInfoWindowShown] = useState(false);
@@ -87,6 +89,7 @@ export const MarkerInfoWindow = ({
   useEffect(() => {
     if (marker && clusterer) {
       clusterer.addMarker(marker);
+      markerMap.set(projectId, marker);
     }
   });
 

components/Map/index.tsx

@@ -4,8 +4,9 @@ import { APIProvider, Map as GoogleMap } from '@vis.gl/react-google-maps';
 import AddMarkers from '../../api/maps/AddMarkers';
 import { Project } from '../../types/schema';
 import './styles.css';
-import { CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 
+//REMOVE ^^
 const containerStyle: CSSProperties = {
   width: '100%',
   height: '100%',
@@ -21,7 +22,10 @@ const center = {
 
 const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker
 
-export default function Map(props: { projects: Project[] | null }) {
+export default function Map(props: {
+  projects: Project[] | null;
+  filteredProjects: Project[] | null;
+}) {
   return (
     <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string}>
       <GoogleMap
@@ -34,7 +38,10 @@ export default function Map(props: { projects: Project[] | null }) {
         mapTypeId={'roadmap'}
         clickableIcons={false}
       >
-        <AddMarkers projects={props.projects} />
+        <AddMarkers
+          projects={props.projects}
+          filteredProjects={props.filteredProjects}
+        />
       </GoogleMap>
     </APIProvider>
   );

components/MapViewScreen/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   LocationIcon,
   ProjectSizeIcon,
@@ -75,7 +75,7 @@ export default function MapViewScreen({
         selectedFilters={selectedFilters}
         setSelectedFilters={setSelectedFilters}
       />
-      <Map projects={projects} />
+      <Map projects={projects} filteredProjects={filteredProjects} />
       <ProjectsListingModal projects={filteredProjects} />
     </>
   );