Merge branch 'main' into neha/80-feat-hiding-markers-when-search-and-…

…filters-are-activated
calblueprint · Dec 6, 2024 · feb8179 · feb8179
2 parents 9bb7006 + 3ba2101
commit feb8179
Show file tree

Hide file tree

Showing 16 changed files with 232 additions and 118 deletions.
diff --git a/api/maps/AddMarkers.tsx b/api/maps/AddMarkers.tsx
@@ -3,22 +3,25 @@ import ReactDOM from 'react-dom/client';
 import { Cluster, MarkerClusterer } from '@googlemaps/markerclusterer';
 import { 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';
 
 export default function AddMarker({
   projects,
   filteredProjects,
+  selectedProjectId,
+  map,
+  setSelectedProjectId,
+  setMap,
 }: {
   projects: Project[] | null;
   filteredProjects: 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 [selectedProjectId, setSelectedProjectId] = useState<number | null>(
-    null,
-  ); // track currently open modal
-
-  const map = useMap();
+  setMap(useMap());
 
   const handleMarkerClick = (
     projectId: number,
@@ -30,12 +33,7 @@ export default function AddMarker({
       document.title = 'ACE NY';
     }
   };
-
-  const closeModal = () => {
-    document.title = 'ACE NY';
-    setSelectedProjectId(null); // close modal
-  };
-
+  /*
   function euclideanDistance(point1: number[], point2: number[]): number {
     const [x1, y1] = point1;
     const [x2, y2] = point2;
@@ -93,6 +91,7 @@ export default function AddMarker({
     }
     return mapZoom;
   };
+*/
 
   const clusterer = useMemo(() => {
     if (!map) return null;
@@ -113,18 +112,22 @@ export default function AddMarker({
       },
     };
 
-    const setClusterer = new MarkerClusterer({ map, renderer });
-
-    setClusterer.addListener('click', function (cluster: Cluster) {
-      const mapZoom = map.getZoom() ?? 0;
-      const minZoom = getMinZoom(cluster, mapZoom);
-
-      if (mapZoom && mapZoom < minZoom) {
-        const idleListener = map.addListener('idle', function () {
-          map.setZoom(minZoom);
-          idleListener.remove();
-        });
+    const clusterHandler = (
+      event: google.maps.MapMouseEvent,
+      cluster: Cluster,
+      map: google.maps.Map,
+    ) => {
+      if (event.latLng) {
+        const mapZoom = (map.getZoom() ?? 0) + 3;
+        map.setCenter(event.latLng);
+        map.setZoom(mapZoom);
       }
+    };
+
+    const setClusterer = new MarkerClusterer({
+      map,
+      renderer,
+      onClusterClick: clusterHandler,
     });
 
     return setClusterer;
@@ -194,14 +197,6 @@ export default function AddMarker({
           />
         );
       })}
-
-      {selectedProjectId && (
-        <ProjectModal
-          project_id={selectedProjectId}
-          closeModal={closeModal}
-          openFirst={true}
-        />
-      )}
     </>
   );
 }
diff --git a/api/maps/MarkerInfoWindow.tsx b/api/maps/MarkerInfoWindow.tsx
@@ -50,7 +50,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(() => {
@@ -61,17 +60,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);
@@ -82,7 +80,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/app/testing/page.tsx b/app/testing/page.tsx
diff --git a/assets/blur_image.png b/assets/blur_image.png
diff --git a/components/Filter/index.tsx b/components/Filter/index.tsx
@@ -16,6 +16,8 @@ interface FilterProps {
   selectedFilters: Filters;
   filterChangeHandlers: FilterChangeHandlers;
   handleButtonClick: (filter: FilterType) => void;
+  handleFilterButtonClick: () => void;
+  clearFilters: () => void;
 }
 
 export default function Filter({
@@ -24,6 +26,8 @@ export default function Filter({
   selectedFilters,
   filterChangeHandlers,
   handleButtonClick,
+  handleFilterButtonClick,
+  clearFilters,
 }: FilterProps) {
   return (
     <FilterBackgroundStyles isActive={isActive}>
@@ -36,6 +40,8 @@ export default function Filter({
             icon={filter.icon}
             label={filter.label}
             currFilter={filter}
+            handleFilterButtonClick={handleFilterButtonClick}
+            clearFilters={clearFilters}
           />
         ) : filter.id === 'status' ? (
           <StatusDropdown

diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
@@ -5,20 +5,21 @@ import { FilterContainerStyles } from './styles';
 
 export const FilterBar = ({
   filters,
-  onFilterChange,
   selectedFilters,
   setSelectedFilters,
+  handleFilterButtonClick,
+  clearFilters,
 }: {
   filters: FilterType[];
-  onFilterChange: (filter: FilterType) => void;
   selectedFilters: Filters;
   setSelectedFilters: React.Dispatch<React.SetStateAction<Filters>>;
+  handleFilterButtonClick: () => void;
+  clearFilters: () => void;
 }) => {
   const [activeFilter, setActiveFilter] = useState<FilterType | null>(null);
 
   const handleButtonClick = (filter: FilterType) => {
     setActiveFilter(activeFilter?.id === filter.id ? null : filter);
-    onFilterChange(filter);
   };
 
   const handleTechnologyChange = (options: string[]) => {
@@ -52,6 +53,8 @@ export const FilterBar = ({
           selectedFilters={selectedFilters}
           filterChangeHandlers={filterChangeHandlers}
           handleButtonClick={handleButtonClick}
+          handleFilterButtonClick={handleFilterButtonClick}
+          clearFilters={clearFilters}
         />
       ))}
     </FilterContainerStyles>

diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx
@@ -19,13 +19,25 @@ export default function KeyDevelopmentMilestone({
     'IA tendered',
     'Operations begun',
   ];
-
+  function getDate() {
+    if (!date) return null;
+    const res = new Date(date);
+    return res;
+  }
   // Sets status label to date of completion or 'Pending' if incomplete
-  if (date) {
-    const year = date.slice(2, 4);
-    const month = date.slice(5, 7);
-    const day = date.slice(8, 10);
-    statusLabel = `${month}.${day}.${year}`;
+  if (milestoneLabels[index] === 'NYSERDA contracted' && date) {
+    const date_object = getDate();
+    statusLabel = String(date_object?.getFullYear());
+  } else if (date) {
+    const date_object = getDate();
+    if (date_object) {
+      const year = String(date_object?.getFullYear()).slice(-2);
+      const month = String(1 + date_object?.getMonth()).padStart(2, '0');
+      const day = String(date_object?.getDate()).padStart(2, '0');
+      statusLabel = `${month}.${day}.${year}`;
+    }
+  } else if (completed) {
+    statusLabel = 'Completed';
   } else {
     statusLabel = 'Pending';
   }

diff --git a/components/Map/index.tsx b/components/Map/index.tsx
@@ -19,11 +19,28 @@ const center = {
   lng: -76.1474,
 };
 
+/*onst map_bounds = {
+  north: 35,
+  south: 50,
+  west: -65,
+  east: -85,
+};*/
+
 const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker
 
-export default function Map(props: {
+export default function Map({
+  projects,
+  selectedProjectId,
+  map,
+  setMap,
+  setSelectedProjectId,
+}: {
   projects: Project[] | null;
   filteredProjects: 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 (
     <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string}>
@@ -36,10 +53,15 @@ export default function Map(props: {
         mapId={mapId}
         mapTypeId={'roadmap'}
         clickableIcons={false}
+        minZoom={7}
       >
         <AddMarkers
-          projects={props.projects}
-          filteredProjects={props.filteredProjects}
+          projects={projects}
+        filteredProjects={filteredProjects}
+          map={map}
+          setMap={setMap}
+          selectedProjectId={selectedProjectId}
+          setSelectedProjectId={setSelectedProjectId}
         />
       </GoogleMap>
     </APIProvider>