[feat] Project Item & Project Modal Functionality Fixes

api/maps/AddMarkers.tsx

@@ -1,22 +1,25 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 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,
+  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 [selectedProjectId, setSelectedProjectId] = useState<number | null>(
-    null,
-  ); // track currently open modal
-
-  const map = useMap();
+  setMap(useMap());
 
   const handleMarkerClick = (
     projectId: number,
@@ -28,11 +31,6 @@ 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;
@@ -164,14 +162,6 @@ export default function AddMarker({
           />
         );
       })}
-
-      {selectedProjectId && (
-        <ProjectModal
-          project_id={selectedProjectId}
-          closeModal={closeModal}
-          openFirst={true}
-        />
-      )}
     </>
   );
 }

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]);
 

components/Map/index.tsx

@@ -28,7 +28,19 @@ const center = {
 
 const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker
 
-export default function Map(props: { projects: Project[] | null }) {
+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 (
     <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string}>
       <GoogleMap
@@ -42,7 +54,13 @@ export default function Map(props: { projects: Project[] | null }) {
         clickableIcons={false}
         minZoom={7}
       >
-        <AddMarkers projects={props.projects} />
+        <AddMarkers
+          projects={projects}
+          map={map}
+          setMap={setMap}
+          selectedProjectId={selectedProjectId}
+          setSelectedProjectId={setSelectedProjectId}
+        />
       </GoogleMap>
     </APIProvider>
   );

components/MapViewScreen/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useMap } from '@vis.gl/react-google-maps';
 import {
   LocationIcon,
   ProjectSizeIcon,
@@ -10,6 +11,7 @@ import Map from '@/components/Map';
 import { SearchBar } from '@/components/SearchBar';
 import { Filters, FilterType } from '@/types/schema';
 import { Project } from '../../types/schema';
+import ProjectModal from '../ProjectModal';
 import ProjectsListingModal from '../ProjectsListingModal';
 
 export default function MapViewScreen({
@@ -43,7 +45,10 @@ export default function MapViewScreen({
       icon: <LocationIcon />,
     },
   ];
-
+  const [map, setMap] = useState<google.maps.Map | null>(useMap());
+  const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
+    null,
+  );
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedFilters, setSelectedFilters] = useState<Filters>({
     status: [],
@@ -75,8 +80,24 @@ export default function MapViewScreen({
         selectedFilters={selectedFilters}
         setSelectedFilters={setSelectedFilters}
       />
-      <Map projects={projects} />
-      <ProjectsListingModal projects={filteredProjects} />
+      <Map
+        projects={projects}
+        map={map}
+        setMap={setMap}
+        selectedProjectId={selectedProjectId}
+        setSelectedProjectId={setSelectedProjectId}
+      />
+      <ProjectsListingModal
+        projects={filteredProjects}
+        map={map}
+        setSelectedProjectId={setSelectedProjectId}
+      />
+      {selectedProjectId && (
+        <ProjectModal
+          selectedProjectId={selectedProjectId}
+          setSelectedProjectId={setSelectedProjectId}
+        />
+      )}
     </>
   );
 }

components/ProjectItem/index.tsx

@@ -23,7 +23,6 @@ import {
 import COLORS from '@/styles/colors';
 import { Heading2, TagText1 } from '@/styles/texts';
 import { Project } from '@/types/schema';
-import ProjectModal from '../ProjectModal';
 import {
   projectImageStyles,
   ProjectInfo,
@@ -35,10 +34,17 @@ import {
   StyledProjectItem,
 } from './styles';
 
-export default function ProjectItem({ project_id }: { project_id: number }) {
+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);
   const [defaultImage, setDefaultImage] = useState<string | null>(null);
-  const [modalOpen, setModalOpen] = useState(false);
 
   useEffect(() => {
     queryProjectbyId(project_id).then(data => {
@@ -69,8 +75,8 @@ export default function ProjectItem({ project_id }: { project_id: number }) {
     renewable_energy_technology,
     size,
     // developer,
-    // longitude,
-    // latitude,
+    longitude,
+    latitude,
     project_status,
     // county,
     // town,
@@ -141,19 +147,11 @@ export default function ProjectItem({ project_id }: { project_id: number }) {
   };
 
   const handleProjectClick = () => {
-    setModalOpen(true);
+    const position = new google.maps.LatLng(latitude ?? 0, longitude ?? 0);
+    map?.panTo(position);
+    setSelectedProjectId(project_id);
   };
 
-  if (modalOpen) {
-    return (
-      <ProjectModal
-        project_id={project_id}
-        closeModal={() => setModalOpen(false)}
-        openFirst={true}
-      />
-    );
-  }
-
   return (
     <StyledProjectItem onClick={handleProjectClick}>
       <ProjectInfo>

components/ProjectModal/index.tsx

@@ -37,22 +37,20 @@ import {
 } from './styles';
 
 export default function ProjectModal({
-  project_id,
-  closeModal,
-  openFirst,
+  selectedProjectId,
+  setSelectedProjectId,
 }: {
-  project_id: number;
-  closeModal: () => void;
-  openFirst: boolean;
+  selectedProjectId: number | null;
+  setSelectedProjectId: React.Dispatch<React.SetStateAction<number | null>>;
 }) {
   const [project, setProject] = useState<Project | null>(null);
   const [defaultImage, setDefaultImage] = useState<string | null>(null);
 
   useEffect(() => {
-    queryProjectbyId(project_id).then(data => {
+    queryProjectbyId(selectedProjectId ?? 0).then(data => {
       setProject(data);
     });
-  }, [project_id]);
+  }, [selectedProjectId]);
 
   useEffect(() => {
     // Fetch default image when project data is available
@@ -117,9 +115,14 @@ export default function ProjectModal({
       ? `${renewable_energy_technology} default image`
       : 'No image available';
 
+  const closeModal = () => {
+    document.title = 'ACE NY';
+    setSelectedProjectId(null); // close modal
+  };
+
   return (
     <Modal
-      isOpen={openFirst}
+      isOpen={selectedProjectId !== null}
       style={{
         overlay: modalOverlayStyles,
         content: modalContentStyles,
@@ -135,7 +138,7 @@ export default function ProjectModal({
         />
         <ProjectOverview>
           <Developer>
-            {developer ? <BodyText1>Developer ‣ {developer}</BodyText1> : null}
+            <BodyText1>{developer ? 'Developer ‣ ' + developer : ''}</BodyText1>
             <CloseButton onClick={closeModal}>
               <FiX size={20} color="#000" />
             </CloseButton>
@@ -157,17 +160,15 @@ export default function ProjectModal({
         </ProjectSize>
         <Divider />
         <AllKDMS>{KDMs}</AllKDMS>
-        {additional_information ? (
-          <AdditionalInfo>
-            <DetailsContainer>
-              <BodyText1>DETAILS</BodyText1>
-              <Divider />
-            </DetailsContainer>
-            <AdditionalText>
-              <BodyText1>{additional_information}</BodyText1>
-            </AdditionalText>
-          </AdditionalInfo>
-        ) : null}
+        <AdditionalInfo>
+          <DetailsContainer $isEmpty={!additional_information}>
+            <BodyText1>DETAILS</BodyText1>
+            <Divider />
+          </DetailsContainer>
+          <AdditionalText>
+            <BodyText1>{additional_information}</BodyText1>
+          </AdditionalText>
+        </AdditionalInfo>
       </ProjectDetails>
     </Modal>
   );

components/ProjectModal/styles.ts

@@ -112,8 +112,9 @@ export const AdditionalInfo = styled.div`
   padding: 1.25rem;
 `;
 
-export const DetailsContainer = styled.div`
+export const DetailsContainer = styled.div<{ $isEmpty: boolean }>`
   display: flex;
+  visibility: ${({ $isEmpty }) => ($isEmpty ? 'hidden' : 'visible')};
   align-items: center;
   width: 100%;
   gap: 0.5rem;

components/ProjectsListingModal/index.tsx

@@ -13,11 +13,22 @@ 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) => {
-    return <ProjectItem key={project.id} project_id={project.id} />;
+    return (
+      <ProjectItem
+        key={project.id}
+        project_id={project.id}
+        setSelectedProjectId={setSelectedProjectId}
+        map={map}
+      />
+    );
   });
 
   return (