From 12cae63c9bcbc35dfee48e5d3b724a8f98e1b942 Mon Sep 17 00:00:00 2001 From: Monique Date: Sun, 24 Nov 2024 14:43:25 -0800 Subject: [PATCH 1/2] 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 2/2] 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 (