Merge pull request #327 from Code-4-Community/SK.add-map-to-tree-page

Sk.add map to tree page
Code-4-Community · Mar 24, 2024 · 504ca79 · 504ca79
2 parents a9c31c3 + e816c2f
commit 504ca79
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git 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<SelectorMapDisplayProps> = ({
@@ -29,6 +30,7 @@ const SelectorMapDisplay: React.FC<SelectorMapDisplayProps> = ({
   onMove,
   site,
   setMarker,
+  mapHeight = '100%',
 }) => (
   <>
     {asyncRequestIsComplete(neighborhoods) && asyncRequestIsComplete(sites) && (
@@ -38,6 +40,7 @@ const SelectorMapDisplay: React.FC<SelectorMapDisplayProps> = ({
         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
@@ -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<PropsWithChildren<MapWithPopupProps>> = ({
   lat,
   lng,
   initMap,
+  mapHeight = '100%',
   defaultActiveTree,
   children,
 }) => {
@@ -222,7 +224,7 @@ const MapWithPopup: React.FC<PropsWithChildren<MapWithPopupProps>> = ({
           onChange={(event) => setSearchInput(event.target.value)}
         />
       </div>
-      <MapDiv id="map" ref={mapRef} />
+      <MapDiv id="map" ref={mapRef} height={mapHeight} />
       <TreePopup treeInfo={activeTreeInfo} popRef={treePopupRef} />
       {children}
     </>

diff --git 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<SelectorMapProps> = ({
@@ -28,6 +29,7 @@ const SelectorMap: React.FC<SelectorMapProps> = ({
   onMove,
   site,
   setMarker,
+  mapHeight = '100%',
 }) => {
   const defaultZoom = STREET_ZOOM;
 
@@ -98,6 +100,7 @@ const SelectorMap: React.FC<SelectorMapProps> = ({
       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
@@ -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<TreeProps> = ({
+  sites,
+  neighborhoods,
   siteData,
   stewardship,
   monthYearOptions,
@@ -326,6 +334,17 @@ const TreePage: React.FC<TreeProps> = ({
 
                             <SiteImageCarousel />
 
+                            <SelectorMapDisplay
+                              neighborhoods={neighborhoods}
+                              sites={sites}
+                              // eslint-disable-next-line @typescript-eslint/no-empty-function
+                              onMove={() => {}}
+                              site={siteData.result}
+                              // eslint-disable-next-line @typescript-eslint/no-empty-function
+                              setMarker={() => {}}
+                              mapHeight={'50%'}
+                            />
+
                             <TreeBenefits />
                           </HalfWidthContainer>
                         </Flex>
@@ -453,6 +472,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(