From ae9fdba62c965182df2f9989dfa3651361512943 Mon Sep 17 00:00:00 2001 From: Justin Lee Date: Sun, 24 Nov 2024 13:42:43 -0800 Subject: [PATCH 1/4] meow --- components/MapViewScreen/index.tsx | 5 +++-- components/ProjectItem/index.tsx | 10 ++++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 7e1969f..9e50df5 100644 --- a/components/MapViewScreen/index.tsx +++ b/components/MapViewScreen/index.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from 'react'; +import { APIProvider } from '@vis.gl/react-google-maps'; import { LocationIcon, ProjectSizeIcon, @@ -67,7 +68,7 @@ export default function MapViewScreen({ }, [projects, searchTerm, setFilteredProjects]); return ( - <> + - + ); } diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index b31ae15..55026ed 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import Image from 'next/image'; +import { useMap } from '@vis.gl/react-google-maps'; import { queryDefaultImages, queryProjectbyId, @@ -40,6 +41,8 @@ export default function ProjectItem({ project_id }: { project_id: number }) { const [defaultImage, setDefaultImage] = useState(null); const [modalOpen, setModalOpen] = useState(false); + const map = useMap(); + useEffect(() => { queryProjectbyId(project_id).then(data => { setProject(data); @@ -69,8 +72,8 @@ export default function ProjectItem({ project_id }: { project_id: number }) { renewable_energy_technology, size, // developer, - // longitude, - // latitude, + longitude, + latitude, project_status, // county, // town, @@ -142,6 +145,9 @@ export default function ProjectItem({ project_id }: { project_id: number }) { const handleProjectClick = () => { setModalOpen(true); + const position = { lat: latitude, lng: longitude }; + map?.panTo({ lat: 0, lng: 0 }); + console.log(position); }; if (modalOpen) { From 12cae63c9bcbc35dfee48e5d3b724a8f98e1b942 Mon Sep 17 00:00:00 2001 From: Monique Date: Sun, 24 Nov 2024 14:43:25 -0800 Subject: [PATCH 2/4] fixes --- api/maps/AddMarkers.tsx | 6 +++++- app/testing/page.tsx | 23 ----------------------- components/Map/index.tsx | 4 ++-- components/MapViewScreen/index.tsx | 8 ++++---- components/ProjectItem/index.tsx | 4 +--- components/ProjectsListingModal/index.tsx | 4 +++- 6 files changed, 15 insertions(+), 34 deletions(-) delete mode 100644 app/testing/page.tsx diff --git a/api/maps/AddMarkers.tsx b/api/maps/AddMarkers.tsx index 7b6460e..5f59821 100644 --- 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>; + map: google.maps.Map | null; }) { const [selectedProjectId, setSelectedProjectId] = useState( 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 deleted file mode 100644 index 52420fb..0000000 --- a/app/testing/page.tsx +++ /dev/null @@ -1,23 +0,0 @@ -'use client'; - -import { CSSProperties } from 'react'; -import ProjectItem from '@/components/ProjectItem'; - -export default function Home() { - return ( -
- -
- ); -} - -// CSS styles - -const mainStyles: CSSProperties = { - width: '100%', - height: '100%', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', -}; diff --git a/components/Map/index.tsx b/components/Map/index.tsx index dd127ea..2d0fa2c 100644 --- 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>, map: google.maps.Map | null}) { return ( - + ); diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 9e50df5..9ae275a 100644 --- 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: , }, ]; - + const [map, setMap] = useState(useMap()); const [searchTerm, setSearchTerm] = useState(''); const [selectedFilters, setSelectedFilters] = useState({ status: [], @@ -76,8 +76,8 @@ export default function MapViewScreen({ selectedFilters={selectedFilters} setSelectedFilters={setSelectedFilters} /> - - + + ); } diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index 55026ed..526298f 100644 --- 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(null); const [defaultImage, setDefaultImage] = useState(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 index 545ddd0..7e7ae3d 100644 --- 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 ; + return ; }); return ( From ac8b0e3cd0c1e9a8d834b1e538eeaebf2a6534ca Mon Sep 17 00:00:00 2001 From: Monique Date: Sun, 24 Nov 2024 15:09:47 -0800 Subject: [PATCH 3/4] fixes --- api/maps/AddMarkers.tsx | 2 +- components/Map/index.tsx | 12 ++++++++++-- components/MapViewScreen/index.tsx | 4 ++-- components/ProjectItem/index.tsx | 9 +++++++-- components/ProjectsListingModal/index.tsx | 2 +- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/api/maps/AddMarkers.tsx b/api/maps/AddMarkers.tsx index 5f59821..5b7fa57 100644 --- a/api/maps/AddMarkers.tsx +++ b/api/maps/AddMarkers.tsx @@ -13,7 +13,7 @@ export default function AddMarker({ map, }: { projects: Project[] | null; - setMap: React.Dispatch>; + setMap: React.Dispatch>; map: google.maps.Map | null; }) { const [selectedProjectId, setSelectedProjectId] = useState( diff --git a/components/Map/index.tsx b/components/Map/index.tsx index 2d0fa2c..d821066 100644 --- a/components/Map/index.tsx +++ b/components/Map/index.tsx @@ -21,7 +21,11 @@ const center = { const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker -export default function Map(props: { projects: Project[] | null, setMap: React.Dispatch>, map: google.maps.Map | null}) { +export default function Map(props: { + projects: Project[] | null; + setMap: React.Dispatch>; + map: google.maps.Map | null; +}) { return ( - + ); diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 9ae275a..20d7a25 100644 --- a/components/MapViewScreen/index.tsx +++ b/components/MapViewScreen/index.tsx @@ -76,8 +76,8 @@ export default function MapViewScreen({ selectedFilters={selectedFilters} setSelectedFilters={setSelectedFilters} /> - - + + ); } diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index 526298f..b0eb0cb 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import Image from 'next/image'; -import { useMap } from '@vis.gl/react-google-maps'; import { queryDefaultImages, queryProjectbyId, @@ -36,7 +35,13 @@ import { StyledProjectItem, } from './styles'; -export default function ProjectItem({ project_id, map }: { project_id: number , map: google.maps.Map | null}) { +export default function ProjectItem({ + project_id, + map, +}: { + project_id: number; + map: google.maps.Map | null; +}) { const [project, setProject] = useState(null); const [defaultImage, setDefaultImage] = useState(null); const [modalOpen, setModalOpen] = useState(false); diff --git a/components/ProjectsListingModal/index.tsx b/components/ProjectsListingModal/index.tsx index 7e7ae3d..36666fe 100644 --- a/components/ProjectsListingModal/index.tsx +++ b/components/ProjectsListingModal/index.tsx @@ -19,7 +19,7 @@ export default function ProjectsListingModal({ map: google.maps.Map | null; }) { const projectItems = projects?.map((project: Project) => { - return ; + return ; }); return ( From 9f83c7111fe3daaa3a86f07e5ad3bcfca407fe8d Mon Sep 17 00:00:00 2001 From: Justin Lee Date: Sun, 24 Nov 2024 15:37:09 -0800 Subject: [PATCH 4/4] rawr --- api/maps/AddMarkers.tsx | 24 ++++------------- app/testing/page.tsx | 23 ---------------- components/Map/index.tsx | 16 ++++++++++-- components/MapViewScreen/index.tsx | 26 ++++++++++++++---- components/ProjectItem/index.tsx | 32 +++++++---------------- components/ProjectModal/index.tsx | 25 ++++++++++-------- components/ProjectModal/styles.ts | 3 ++- components/ProjectsListingModal/index.tsx | 10 ++++++- 8 files changed, 75 insertions(+), 84 deletions(-) delete mode 100644 app/testing/page.tsx diff --git a/api/maps/AddMarkers.tsx b/api/maps/AddMarkers.tsx index 7b6460e..50af8f9 100644 --- a/api/maps/AddMarkers.tsx +++ b/api/maps/AddMarkers.tsx @@ -1,21 +1,20 @@ -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, + setSelectedProjectId, }: { projects: Project[] | null; + selectedProjectId: number | null; + setSelectedProjectId: React.Dispatch>; }) { - const [selectedProjectId, setSelectedProjectId] = useState( - null, - ); // track currently open modal - const map = useMap(); const handleMarkerClick = ( @@ -29,11 +28,6 @@ export default function AddMarker({ } }; - 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; @@ -148,14 +142,6 @@ export default function AddMarker({ /> ); })} - - {selectedProjectId && ( - - )} ); } diff --git a/app/testing/page.tsx b/app/testing/page.tsx deleted file mode 100644 index 52420fb..0000000 --- a/app/testing/page.tsx +++ /dev/null @@ -1,23 +0,0 @@ -'use client'; - -import { CSSProperties } from 'react'; -import ProjectItem from '@/components/ProjectItem'; - -export default function Home() { - return ( -
- -
- ); -} - -// CSS styles - -const mainStyles: CSSProperties = { - width: '100%', - height: '100%', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', -}; diff --git a/components/Map/index.tsx b/components/Map/index.tsx index dd127ea..628e439 100644 --- a/components/Map/index.tsx +++ b/components/Map/index.tsx @@ -21,7 +21,15 @@ const center = { const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker -export default function Map(props: { projects: Project[] | null }) { +export default function Map({ + projects, + selectedProjectId, + setSelectedProjectId, +}: { + projects: Project[] | null; + selectedProjectId: number | null; + setSelectedProjectId: React.Dispatch>; +}) { return ( - + ); diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 9e50df5..db8e8eb 100644 --- a/components/MapViewScreen/index.tsx +++ b/components/MapViewScreen/index.tsx @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import { APIProvider } from '@vis.gl/react-google-maps'; import { LocationIcon, ProjectSizeIcon, @@ -11,6 +10,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({ @@ -45,6 +45,9 @@ export default function MapViewScreen({ }, ]; + const [selectedProjectId, setSelectedProjectId] = useState( + null, + ); const [searchTerm, setSearchTerm] = useState(''); const [selectedFilters, setSelectedFilters] = useState({ status: [], @@ -68,7 +71,7 @@ export default function MapViewScreen({ }, [projects, searchTerm, setFilteredProjects]); return ( - + <> - - - + + + {selectedProjectId && ( + + )} + ); } diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index 55026ed..98d2d74 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import Image from 'next/image'; -import { useMap } from '@vis.gl/react-google-maps'; import { queryDefaultImages, queryProjectbyId, @@ -24,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, @@ -36,12 +34,15 @@ import { StyledProjectItem, } from './styles'; -export default function ProjectItem({ project_id }: { project_id: number }) { +export default function ProjectItem({ + project_id, + setSelectedProjectId, +}: { + project_id: number; + setSelectedProjectId: React.Dispatch>; +}) { const [project, setProject] = useState(null); const [defaultImage, setDefaultImage] = useState(null); - const [modalOpen, setModalOpen] = useState(false); - - const map = useMap(); useEffect(() => { queryProjectbyId(project_id).then(data => { @@ -72,8 +73,8 @@ export default function ProjectItem({ project_id }: { project_id: number }) { renewable_energy_technology, size, // developer, - longitude, - latitude, + // longitude, + // latitude, project_status, // county, // town, @@ -144,22 +145,9 @@ export default function ProjectItem({ project_id }: { project_id: number }) { }; const handleProjectClick = () => { - setModalOpen(true); - const position = { lat: latitude, lng: longitude }; - map?.panTo({ lat: 0, lng: 0 }); - console.log(position); + setSelectedProjectId(project_id); }; - if (modalOpen) { - return ( - setModalOpen(false)} - openFirst={true} - /> - ); - } - return ( diff --git a/components/ProjectModal/index.tsx b/components/ProjectModal/index.tsx index 4175b7e..05b4ad6 100644 --- a/components/ProjectModal/index.tsx +++ b/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>; }) { const [project, setProject] = useState(null); const [defaultImage, setDefaultImage] = useState(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 ( - Developer ‣ {developer} + {developer ? 'Developer ‣ ' + developer : ''} @@ -158,7 +161,7 @@ export default function ProjectModal({ {KDMs} - + DETAILS diff --git a/components/ProjectModal/styles.ts b/components/ProjectModal/styles.ts index e812e73..6016ec1 100644 --- a/components/ProjectModal/styles.ts +++ b/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; diff --git a/components/ProjectsListingModal/index.tsx b/components/ProjectsListingModal/index.tsx index 545ddd0..064386b 100644 --- a/components/ProjectsListingModal/index.tsx +++ b/components/ProjectsListingModal/index.tsx @@ -13,11 +13,19 @@ import { export default function ProjectsListingModal({ projects, + setSelectedProjectId, }: { projects: Project[] | null; + setSelectedProjectId: React.Dispatch>; }) { const projectItems = projects?.map((project: Project) => { - return ; + return ( + + ); }); return (