Feature/change route plant location

package.json

@@ -113,7 +113,7 @@
     "@storybook/testing-library": "^0.0.11",
     "@types/d3-ease": "^1.0.9",
     "@types/node": "^14.0.26",
-    "@types/react": "^16.9.43",
+    "@types/react": "^16.9.49",
     "@types/react-map-gl": "^5.2.7",
     "@types/styled-jsx": "^2.2.8",
     "@types/uuid": "^8.3.0",

pages/[p].tsx

@@ -4,12 +4,13 @@ import { ErrorHandlingContext } from '../src/features/common/Layout/ErrorHandlin
 import { ProjectPropsContext } from '../src/features/common/Layout/ProjectPropsContext';
 import Credits from '../src/features/projects/components/maps/Credits';
 import SingleProjectDetails from '../src/features/projects/screens/SingleProjectDetails';
-import { ThemeContext } from '../src/theme/themeContext';
 import { getRequest } from '../src/utils/apiRequests/api';
 import getStoredCurrency from '../src/utils/countryCurrency/getStoredCurrency';
 import GetProjectMeta from '../src/utils/getMetaTags/GetProjectMeta';
 import { getAllPlantLocations } from '../src/utils/maps/plantLocations';
 import i18next from '../i18n';
+import { SingleProjectGeojson } from '../src/features/common/types/project';
+import { Treemapper } from '../src/features/user/TreeMapper/Treemapper';
 
 const { useTranslation } = i18next;
 
@@ -28,11 +29,15 @@ export default function Donate({
   const [internalCurrencyCode, setInternalCurrencyCode] = React.useState('');
   const [internalLanguage, setInternalLanguage] = React.useState('');
   const [open, setOpen] = React.useState(false);
-  const { theme } = React.useContext(ThemeContext);
+
   const { i18n } = useTranslation();
   const {
+    geoJson,
     project,
+    setSelectedSite,
     setProject,
+    setSelectedPl,
+    plantLocations,
     setShowSingleProject,
     setZoomLevel,
     setPlantLocations,
@@ -116,6 +121,51 @@ export default function Donate({
       }
     }
   }, [router.asPath]);
+
+  React.useEffect(() => {
+    if (geoJson && !router.query.site && !router.query.ploc) {
+      router.push(
+        `/${project.slug}?site=${geoJson.features[0].properties.name}`,
+        undefined,
+        { shallow: true }
+      );
+    }
+  }, [router, geoJson]);
+
+  React.useEffect(() => {
+    //for selecting one of the site of project if user use link  to directly visit to site from home page
+    if (geoJson && router.query.site) {
+      const siteIndex: number = geoJson?.features.findIndex(
+        (singleSite: SingleProjectGeojson) => {
+          return router.query.site === singleSite?.properties.name;
+        }
+      );
+      if (siteIndex === -1) {
+        router.push(`/${project.slug}`);
+      } else {
+        setSelectedSite(siteIndex);
+      }
+    }
+  }, [setSelectedSite, geoJson]);
+
+  React.useEffect(() => {
+    //for selecting one of the plant location. if user use link  to directly visit to plantLocation from home page
+    if (geoJson && router.query.ploc && plantLocations) {
+      const singlePlantLocation: Treemapper.PlantLocation | undefined =
+        plantLocations?.find(
+          (dataOfSinglePlantLocation: Treemapper.PlantLocation) => {
+            return router.query.ploc === dataOfSinglePlantLocation?.hid;
+          }
+        );
+
+      if (singlePlantLocation === undefined) {
+        router.push(`/${project.slug}`);
+      } else {
+        setSelectedPl(singlePlantLocation);
+      }
+    }
+  }, [router, router.query.ploc, plantLocations, setSelectedPl, project]);
+
   return (
     <>
       {project ? <GetProjectMeta {...ProjectProps} /> : null}

src/features/common/Layout/index.tsx

@@ -17,9 +17,7 @@ const Layout: FC = ({ children }) => {
   return (
     <>
       <Header />
-      <style jsx global>
-        {theme}
-      </style>
+      <style>{theme}</style>
       <div className={`${themeType}`}>
         {!isEmbed && <Navbar theme={themeType} />}
         <div>{children}</div>

src/features/common/types/project.d.ts

@@ -18,3 +18,30 @@ export interface SingleProject {
   currency: string;
   unitCost: number;
 }
+
+export interface SingleProjectGeojson {
+  geometry: Geometry
+  type: string
+  properties: Properties
+}
+
+export interface Geometry {
+  coordinates: number[][][]
+  type: string
+}
+
+export interface Properties {
+  lastUpdated: LastUpdated
+  name: string
+  description: string
+  id: string
+  status: string
+}
+
+export interface LastUpdated {
+  date: string
+  timezone: string
+  timezone_type: number
+}
+
+

src/features/projects/components/ProjectSnippet.tsx

@@ -32,7 +32,8 @@ export default function ProjectSnippet({
     ? getImageUrl('project', 'medium', project.image)
     : '';
 
-  const { selectedPl, hoveredPl } = React.useContext(ProjectPropsContext);
+  const { selectedPl, hoveredPl, selectedSite } =
+    React.useContext(ProjectPropsContext);
 
   let progressPercentage = (project.countPlanted / project.countTarget) * 100;
 

src/features/projects/components/ProjectsMap.tsx

@@ -123,6 +123,7 @@ export default function ProjectsMap(): ReactElement {
             const element = plantLocations[key];
             if (element.id === e.features[0].layer?.source) {
               setSelectedPl(element);
+
               break;
             }
           }

src/features/projects/components/maps/Project.tsx

@@ -6,6 +6,8 @@ import { ErrorHandlingContext } from '../../../common/Layout/ErrorHandlingContex
 import { ProjectPropsContext } from '../../../common/Layout/ProjectPropsContext';
 import Location from './Location';
 import Sites from './Sites';
+import { useRouter } from 'next/router';
+import { zoomToPlantLocation } from '../../../../../src/utils/maps/plantLocations';
 
 interface Props {
   project: Object;
@@ -19,6 +21,8 @@ export default function Project({
   setViewPort,
 }: Props): ReactElement {
   const {
+    selectedPl,
+    plantLocations,
     geoJson,
     selectedSite,
     siteExists,
@@ -29,6 +33,9 @@ export default function Project({
   } = React.useContext(ProjectPropsContext);
 
   const { handleError } = React.useContext(ErrorHandlingContext);
+  const router = useRouter();
+  const [plantPolygonCoordinates, setPlantPolygonCoordinates] =
+    React.useState(null);
 
   async function loadRasterData() {
     const result = await getRasterData('', handleError);
@@ -43,8 +50,21 @@ export default function Project({
       setRasterData({ ...rasterData, imagery: result.imagery });
     }
   }
+
+  React.useEffect(() => {
+    if (plantLocations && selectedPl) {
+      setPlantPolygonCoordinates(selectedPl?.geometry.coordinates[0]);
+    }
+  }, [router, selectedPl, plantLocations]);
+
+  React.useEffect(() => {
+    if (selectedPl && plantPolygonCoordinates) {
+      router.push(`/${project.slug}?ploc=${selectedPl?.hid}`);
+    }
+  }, [selectedPl, plantPolygonCoordinates]);
+
   React.useEffect(() => {
-    if (siteExists) {
+    if (siteExists && !router.query.ploc) {
       loadRasterData();
       zoomToProjectSite(
         {
@@ -57,6 +77,19 @@ export default function Project({
         setSiteViewPort,
         4000
       );
+    } else if (
+      plantPolygonCoordinates &&
+      plantLocations &&
+      router.query.ploc &&
+      selectedPl
+    ) {
+      zoomToPlantLocation(
+        plantPolygonCoordinates,
+        viewport,
+        isMobile,
+        setViewPort,
+        1200
+      );
     } else {
       zoomToLocation(
         viewport,
@@ -67,7 +100,14 @@ export default function Project({
         3000
       );
     }
-  }, [project, siteExists]);
+  }, [
+    project,
+    siteExists,
+    plantLocations,
+    router.query.ploc,
+    selectedPl,
+    plantPolygonCoordinates,
+  ]);
 
   //Props
   const locationProps = {

src/features/projects/components/maps/SitesDropdown.tsx

@@ -6,37 +6,50 @@ import styles from '../../styles/ProjectsMap.module.scss';
 import BootstrapInput from '../../../common/InputTypes/BootstrapInput';
 import { ProjectPropsContext } from '../../../common/Layout/ProjectPropsContext';
 import { ParamsContext } from '../../../common/Layout/QueryParamsContext';
+import { SingleProjectGeojson } from '../../../../features/common/types/project';
 interface Props {}
 
 export default function SitesDropdown(): ReactElement {
   const {
+    setSelectedPl,
     geoJson,
+    project,
     selectedSite,
     setSelectedSite,
     isMobile,
     isPolygonMenuOpen,
     setIsPolygonMenuOpen,
   } = React.useContext(ProjectPropsContext);
   const { embed } = React.useContext(ParamsContext);
-  const { pathname } = useRouter();
+  const router = useRouter();
 
   const handleChangeSite = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setSelectedSite(event.target.value as string);
+    setSelectedPl(null);
+    setSelectedSite(event.target.value as number);
+    router.push(
+      `/${project.slug}/?site=${
+        geoJson.features[event.target.value].properties.name
+      }`
+    );
+
     if (isMobile) setIsPolygonMenuOpen(false);
   };
-
   const dropdownContainerClasses = `${
     embed === 'true' ? styles.embed_dropdownContainer : styles.dropdownContainer
   } ${
-    pathname === '/[p]' ? styles['dropdownContainer--reduce-right-offset'] : ''
+    router.pathname === '/[p]'
+      ? styles['dropdownContainer--reduce-right-offset']
+      : ''
   }`;
 
   const projectSitesButtonClasses = `${
     embed === 'true'
       ? styles.embed_projectSitesButton
       : styles.projectSitesButton
   } ${
-    pathname === '/[p]' ? styles['projectSitesButton--reduce-right-offset'] : ''
+    router.pathname === '/[p]'
+      ? styles['projectSitesButton--reduce-right-offset']
+      : ''
   }`;
 
   return (
@@ -69,13 +82,15 @@ export default function SitesDropdown(): ReactElement {
                     onChange={handleChangeSite}
                     input={<BootstrapInput />}
                   >
-                    {geoJson.features.map((site: any, index: any) => {
-                      return (
-                        <option key={index} value={index}>
-                          {site.properties.name}
-                        </option>
-                      );
-                    })}
+                    {geoJson?.features.map(
+                      (site: SingleProjectGeojson, index: number) => {
+                        return (
+                          <option key={index} value={index}>
+                            {site.properties.name}
+                          </option>
+                        );
+                      }
+                    )}
                   </NativeSelect>
                 </FormControl>
               </div>

src/features/user/TreeMapper/Treemapper.d.ts

@@ -1,4 +1,4 @@
-declare namespace Treemapper {
+export declare namespace Treemapper {
   export interface DeviceLocation {
     coordinates: number[];
     type: string;

src/utils/maps/plantLocations.ts

@@ -4,14 +4,15 @@ import * as turf from '@turf/turf';
 import { getRequest } from '../apiRequests/api';
 
 export function zoomToPlantLocation(
-  geoJson: Object,
+  coordinates: any,
   viewport: Object,
   isMobile: boolean,
   setViewPort: Function,
   duration = 1200
 ) {
   if (viewport.width && viewport.height) {
-    const bbox = turf.bbox(geoJson);
+    const polygon  = turf.polygon([coordinates])
+    const bbox = turf.bbox(polygon);
     const { longitude, latitude, zoom } = new WebMercatorViewport(
       viewport
     ).fitBounds(
@@ -38,7 +39,7 @@ export function zoomToPlantLocation(
       transitionEasing: d3.easeCubic,
     };
     setViewPort(newViewport);
-  } else {
+   } else {
     const newViewport = {
       ...viewport,
       height: window.innerHeight,

src/utils/maps/zoomToProjectSite.ts

@@ -23,6 +23,8 @@ export default function zoomToProjectSite(
     //console.log("zoomToProjectSite", viewport, viewport.width, window.innerWidth, viewport.height, window.innerHeight);
 
     const bbox = turf.bbox(geoJson.features[selectedSite]);
+
+
     const { longitude, latitude, zoom } = new WebMercatorViewport(
       viewport
     ).fitBounds(
@@ -42,8 +44,8 @@ export default function zoomToProjectSite(
     let defaultZoom = 15;
     if (zoom < defaultZoom) {
       defaultZoom = zoom;
-    }
-
+     }
+    
     const newViewport = {
       ...viewport,
       longitude,
@@ -53,6 +55,7 @@ export default function zoomToProjectSite(
       transitionInterpolator: new FlyToInterpolator(),
       transitionEasing: d3.easeCubic,
     };
+
     setViewPort(newViewport);
     setSiteViewPort({ center: [longitude, latitude], zoom: defaultZoom });
   } else {