From 569875cdc27de2adbf154d0683f68df80c33bd31 Mon Sep 17 00:00:00 2001 From: SurabhiKeesara Date: Sun, 25 Feb 2024 15:32:36 -0500 Subject: [PATCH 1/4] Add map to page --- src/containers/treePage/index.tsx | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/containers/treePage/index.tsx b/src/containers/treePage/index.tsx index 54b54fcc..2c5b9caf 100644 --- a/src/containers/treePage/index.tsx +++ b/src/containers/treePage/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { useLocation } from 'react-router-dom'; import PageLayout from '../../components/pageLayout'; @@ -52,6 +52,10 @@ import { Trans, useTranslation } from 'react-i18next'; import { site } from '../../constants'; import { n } from '../../utils/stringFormat'; import TreeBenefits from '../../components/treePage/treeBenefits'; +import SelectorMapDisplay from '../../components/mapComponents/mapDisplays/selectorMapDisplay'; +import { round } from 'lodash'; +import { LAT_LNG_PRECISION } from '../../components/forms/constants'; +import { MapGeoDataReducerState } from '../../components/mapComponents/ducks/types'; const TreePageContainer = styled.div` width: 90vw; @@ -105,6 +109,8 @@ const TreePlantingRequestContainer = styled.div` `; interface TreeProps { + readonly neighborhoods: MapGeoDataReducerState['neighborhoodGeoData']; + readonly sites: MapGeoDataReducerState['siteGeoData']; readonly tokens: UserAuthenticationReducerState['tokens']; readonly siteData: SiteReducerState['siteData']; readonly stewardship: TreeCare[]; @@ -117,6 +123,8 @@ export interface TreeParams { } const TreePage: React.FC = ({ + sites, + neighborhoods, siteData, stewardship, monthYearOptions, @@ -126,6 +134,9 @@ const TreePage: React.FC = ({ nsMode: 'fallback', }); + const [editSiteForm] = Form.useForm(); + const [mapSearchMarker, setMapSearchMarker] = useState(); + const location = useLocation(); const dispatch = useDispatch(); @@ -326,6 +337,18 @@ const TreePage: React.FC = ({ + { + editSiteForm.setFieldsValue({ + lat: round(pos.lat(), LAT_LNG_PRECISION), + lng: round(pos.lng(), LAT_LNG_PRECISION), + }); + }} + setMarker={setMapSearchMarker} + /> + @@ -453,6 +476,8 @@ const TreePlantingRequest: React.FC = () => { const mapStateToProps = (state: C4CState): TreeProps => { return { + neighborhoods: state.mapGeoDataState.neighborhoodGeoData, + sites: state.mapGeoDataState.siteGeoData, tokens: state.authenticationState.tokens, siteData: state.siteState.siteData, stewardship: mapStewardshipToTreeCare( From 7250b380b10780d89958bede0e724304c2ef8142 Mon Sep 17 00:00:00 2001 From: SurabhiKeesara Date: Sun, 25 Feb 2024 15:48:41 -0500 Subject: [PATCH 2/4] Add resizeable map to fit tree page --- .../mapDisplays/selectorMapDisplay/index.tsx | 3 +++ src/components/mapComponents/maps/mapWithPopup/index.tsx | 8 +++++--- src/components/mapComponents/maps/selectorMap/index.tsx | 3 +++ src/containers/treePage/index.tsx | 1 + 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/mapComponents/mapDisplays/selectorMapDisplay/index.tsx b/src/components/mapComponents/mapDisplays/selectorMapDisplay/index.tsx index cb10f4a7..8833bec9 100644 --- a/src/components/mapComponents/mapDisplays/selectorMapDisplay/index.tsx +++ b/src/components/mapComponents/mapDisplays/selectorMapDisplay/index.tsx @@ -21,6 +21,7 @@ interface SelectorMapDisplayProps { readonly onMove: (pos: google.maps.LatLng) => void; readonly site?: SiteProps; readonly setMarker: (marker: google.maps.Marker) => void; + readonly mapHeight?: string; } const SelectorMapDisplay: React.FC = ({ @@ -29,6 +30,7 @@ const SelectorMapDisplay: React.FC = ({ onMove, site, setMarker, + mapHeight = '100%', }) => ( <> {asyncRequestIsComplete(neighborhoods) && asyncRequestIsComplete(sites) && ( @@ -38,6 +40,7 @@ const SelectorMapDisplay: React.FC = ({ onMove={onMove} site={site} setMarker={setMarker} + mapHeight={mapHeight} /> )} {(asyncRequestIsFailed(neighborhoods) || asyncRequestIsFailed(sites)) && ( diff --git a/src/components/mapComponents/maps/mapWithPopup/index.tsx b/src/components/mapComponents/maps/mapWithPopup/index.tsx index d31d3821..13c9a36b 100644 --- a/src/components/mapComponents/maps/mapWithPopup/index.tsx +++ b/src/components/mapComponents/maps/mapWithPopup/index.tsx @@ -29,8 +29,8 @@ const StyledSearch = styled(Input.Search)` } `; -const MapDiv = styled.div` - height: 100%; +const MapDiv = styled.div<{ height: string }>` + height: ${(props) => props.height || 0}; `; interface MapWithPopupProps { @@ -40,6 +40,7 @@ interface MapWithPopupProps { readonly lng: number; readonly initMap: (mapData: InitMapData) => ReturnMapData; readonly defaultActiveTree: BasicTreeInfo; + readonly mapHeight?: string; } let map: google.maps.Map; @@ -51,6 +52,7 @@ const MapWithPopup: React.FC> = ({ lat, lng, initMap, + mapHeight = '100%', defaultActiveTree, children, }) => { @@ -222,7 +224,7 @@ const MapWithPopup: React.FC> = ({ onChange={(event) => setSearchInput(event.target.value)} /> - + {children} diff --git a/src/components/mapComponents/maps/selectorMap/index.tsx b/src/components/mapComponents/maps/selectorMap/index.tsx index a306ff09..dcc5f353 100644 --- a/src/components/mapComponents/maps/selectorMap/index.tsx +++ b/src/components/mapComponents/maps/selectorMap/index.tsx @@ -20,6 +20,7 @@ interface SelectorMapProps { readonly onMove: (pos: google.maps.LatLng) => void; readonly site?: SiteProps; readonly setMarker: (marker: google.maps.Marker) => void; + readonly mapHeight?: string; } const SelectorMap: React.FC = ({ @@ -28,6 +29,7 @@ const SelectorMap: React.FC = ({ onMove, site, setMarker, + mapHeight = '100%', }) => { const defaultZoom = STREET_ZOOM; @@ -98,6 +100,7 @@ const SelectorMap: React.FC = ({ lat={defaultCenter.lat} lng={defaultCenter.lng} initMap={setSearchMarkerAndInitSiteMap} + mapHeight={mapHeight} defaultActiveTree={basicSite} /> ); diff --git a/src/containers/treePage/index.tsx b/src/containers/treePage/index.tsx index 2c5b9caf..1d445207 100644 --- a/src/containers/treePage/index.tsx +++ b/src/containers/treePage/index.tsx @@ -347,6 +347,7 @@ const TreePage: React.FC = ({ }); }} setMarker={setMapSearchMarker} + mapHeight={'50%'} /> From ab4e54964ee2201a1a1973a85850b5dd4fa5f069 Mon Sep 17 00:00:00 2001 From: SurabhiKeesara Date: Wed, 28 Feb 2024 16:08:31 -0500 Subject: [PATCH 3/4] Fix location to pass in current site --- src/containers/treePage/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/containers/treePage/index.tsx b/src/containers/treePage/index.tsx index 1d445207..49049c67 100644 --- a/src/containers/treePage/index.tsx +++ b/src/containers/treePage/index.tsx @@ -346,6 +346,7 @@ const TreePage: React.FC = ({ lng: round(pos.lng(), LAT_LNG_PRECISION), }); }} + site={siteData.result} setMarker={setMapSearchMarker} mapHeight={'50%'} /> From e816c2f9b4ee68a420a729eb6d462384d7cbbb89 Mon Sep 17 00:00:00 2001 From: SurabhiKeesara Date: Sun, 17 Mar 2024 00:51:48 -0400 Subject: [PATCH 4/4] Remove excess values, add empty lambda functions --- src/containers/treePage/index.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/containers/treePage/index.tsx b/src/containers/treePage/index.tsx index 49049c67..274a22ef 100644 --- a/src/containers/treePage/index.tsx +++ b/src/containers/treePage/index.tsx @@ -134,9 +134,6 @@ const TreePage: React.FC = ({ nsMode: 'fallback', }); - const [editSiteForm] = Form.useForm(); - const [mapSearchMarker, setMapSearchMarker] = useState(); - const location = useLocation(); const dispatch = useDispatch(); @@ -340,14 +337,11 @@ const TreePage: React.FC = ({ { - editSiteForm.setFieldsValue({ - lat: round(pos.lat(), LAT_LNG_PRECISION), - lng: round(pos.lng(), LAT_LNG_PRECISION), - }); - }} + // eslint-disable-next-line @typescript-eslint/no-empty-function + onMove={() => {}} site={siteData.result} - setMarker={setMapSearchMarker} + // eslint-disable-next-line @typescript-eslint/no-empty-function + setMarker={() => {}} mapHeight={'50%'} />