remove all mapbox token dependencies

Plant-for-the-Planet-org · Mar 4, 2021 · 3f3e1d8 · 3f3e1d8
1 parent 9d4b584
commit 3f3e1d8
Show file tree

Hide file tree

Showing 11 changed files with 495 additions and 337 deletions.
diff --git a/.env.development b/.env.development
@@ -6,7 +6,6 @@
 
 ## `.env.development` stays in git with default or empty values
 
-MAPBOXGL_ACCESS_TOKEN=
 API_ENDPOINT=app-development.plant-for-the-planet.org
 AUTH0_CUSTOM_DOMAIN=pftp.eu.auth0.com
 AUTH0_CLIENT_ID=yxABVrSIbmSO6QeTfZjkJefDnW2vrE7y

diff --git a/.env.local.example b/.env.local.example
@@ -1,4 +1,3 @@
-MAPBOXGL_ACCESS_TOKEN=
 AUTH0_CUSTOM_DOMAIN=
 AUTH0_CLIENT_ID=
 NEXTAUTH_URL=http://localhost:3000

diff --git a/.env.production b/.env.production
@@ -6,7 +6,6 @@
 
 ## `.env.production` stays in git with default or empty values
 
-MAPBOXGL_ACCESS_TOKEN=
 NEXTAUTH_URL=
 AUTH0_CLIENT_ID=
 API_ENDPOINT=app.plant-for-the-planet.org

diff --git a/app.json b/app.json
@@ -28,10 +28,6 @@
       "description": "Memory for a Node Worker (128 is recommended)",
       "value": "128"
     },
-    "MAPBOXGL_ACCESS_TOKEN": {
-      "required": false,
-      "description": "Mapbox Token - Required for the Map"
-    },
     "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY": {
       "required": false,
       "description": "Stripe Publishable Key"

diff --git a/next.config.js b/next.config.js
@@ -107,7 +107,6 @@ module.exports = withPlugins([[withBundleAnalyzer], [withSourceMaps]], {
     autoPrerender: false,
   },
   env: {
-    MAPBOXGL_ACCESS_TOKEN: process.env.MAPBOXGL_ACCESS_TOKEN,
     AUTH0_CUSTOM_DOMAIN: process.env.AUTH0_CUSTOM_DOMAIN,
     AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
     TENANT: process.env.TENANT,

diff --git a/src/features/user/ManageProjects/components/BasicDetails.tsx b/src/features/user/ManageProjects/components/BasicDetails.tsx
@@ -4,7 +4,11 @@ import { useForm, Controller } from 'react-hook-form';
 import i18next from './../../../../../i18n';
 import ToggleSwitch from '../../../common/InputTypes/ToggleSwitch';
 import styles from './../styles/StepForm.module.scss';
-import MapGL, { Marker, NavigationControl, FlyToInterpolator } from 'react-map-gl';
+import MapGL, {
+  Marker,
+  NavigationControl,
+  FlyToInterpolator,
+} from 'react-map-gl';
 import * as d3 from 'd3-ease';
 import { MenuItem } from '@material-ui/core';
 import InfoIcon from './../../../../../public/assets/images/icons/manageProjects/Info';
@@ -13,7 +17,11 @@ import {
   putAuthenticatedRequest,
 } from '../../../../utils/apiRequests/api';
 import addServerErrors from '../../../../utils/apiRequests/addServerErrors';
-import { getFormattedNumber, parseNumber } from '../../../../utils/getFormattedNumber';
+import {
+  getFormattedNumber,
+  parseNumber,
+} from '../../../../utils/getFormattedNumber';
+import getMapStyle from '../../../../utils/maps/getMapStyle';
 
 const { useTranslation } = i18next;
 
@@ -39,12 +47,17 @@ export default function BasicDetails({
   projectGUID,
 }: Props): ReactElement {
   const { t, i18n, ready } = useTranslation(['manageProjects']);
-
+  const EMPTY_STYLE = {
+    version: 8,
+    sources: {},
+    layers: [],
+  };
   const [isUploadingData, setIsUploadingData] = React.useState(false);
   // Map setup
   const defaultMapCenter = [0, 0];
   const defaultZoom = 1.4;
   const mapRef = React.useRef(null);
+  const [style, setStyle] = React.useState(EMPTY_STYLE);
   const [viewport, setViewPort] = React.useState({
     width: 760,
     height: 400,
@@ -53,6 +66,17 @@ export default function BasicDetails({
     zoom: defaultZoom,
   });
 
+  React.useEffect(() => {
+    //loads the default mapstyle
+    async function loadMapStyle() {
+      const result = await getMapStyle('openStreetMap');
+      if (result) {
+        setStyle(result);
+      }
+    }
+    loadMapStyle();
+  }, []);
+
   const [projectCoords, setProjectCoords] = React.useState([0, 0]);
 
   const changeLat = (e: any) => {
@@ -75,19 +99,40 @@ export default function BasicDetails({
   const _onViewportChange = (view: any) => setViewPort({ ...view });
 
   const classifications = [
-    { label: ready ? t('manageProjects:largeScalePlanting') : '', value: 'large-scale-planting' },
-    { label: ready ? t('manageProjects:agroforestry') : '', value: 'agroforestry' },
-    { label: ready ? t('manageProjects:naturalRegeneration') : '', value: 'natural-regeneration' },
-    { label: ready ? t('manageProjects:managedRegeneration') : '', value: 'managed-regeneration' },
-    { label: ready ? t('manageProjects:urbanPlanting') : '', value: 'urban-planting' },
-    { label: ready ? t('manageProjects:otherPlanting') : '', value: 'other-planting' },
+    {
+      label: ready ? t('manageProjects:largeScalePlanting') : '',
+      value: 'large-scale-planting',
+    },
+    {
+      label: ready ? t('manageProjects:agroforestry') : '',
+      value: 'agroforestry',
+    },
+    {
+      label: ready ? t('manageProjects:naturalRegeneration') : '',
+      value: 'natural-regeneration',
+    },
+    {
+      label: ready ? t('manageProjects:managedRegeneration') : '',
+      value: 'managed-regeneration',
+    },
+    {
+      label: ready ? t('manageProjects:urbanPlanting') : '',
+      value: 'urban-planting',
+    },
+    {
+      label: ready ? t('manageProjects:otherPlanting') : '',
+      value: 'other-planting',
+    },
   ];
 
   // Default Form Fields
   const defaultBasicDetails = {
     name: '',
     slug: '',
-    classification: { label: ready ? t('manageProjects:projectType') : '', value: null },
+    classification: {
+      label: ready ? t('manageProjects:projectType') : '',
+      value: null,
+    },
     countTarget: 0,
     website: '',
     description: '',
@@ -111,15 +156,14 @@ export default function BasicDetails({
     reset,
     setValue,
     watch,
-    setError
+    setError,
   } = useForm({ mode: 'onBlur', defaultValues: defaultBasicDetails });
 
   const [acceptDonations, setAcceptDonations] = useState(false);
-    // const treeCost = watch('treeCost');
+  // const treeCost = watch('treeCost');
 
   // console.log('watch treeCost',parseFloat(treeCost));
 
-
   React.useEffect(() => {
     if (projectDetails) {
       const basicDetails = {
@@ -130,7 +174,10 @@ export default function BasicDetails({
         website: projectDetails.website,
         description: projectDetails.description,
         acceptDonations: projectDetails.acceptDonations,
-        treeCost: getFormattedNumber(i18n.language, projectDetails.treeCost || 0),
+        treeCost: getFormattedNumber(
+          i18n.language,
+          projectDetails.treeCost || 0
+        ),
         publish: projectDetails.publish,
         visitorAssistance: projectDetails.visitorAssistance,
         enablePlantLocations: projectDetails.enablePlantLocations,
@@ -141,7 +188,10 @@ export default function BasicDetails({
         },
       };
       if (projectDetails.geoLongitude && projectDetails.geoLatitude) {
-        setProjectCoords([projectDetails.geoLongitude, projectDetails.geoLatitude]);
+        setProjectCoords([
+          projectDetails.geoLongitude,
+          projectDetails.geoLatitude,
+        ]);
         setViewPort({
           ...viewport,
           latitude: projectDetails.geoLatitude,
@@ -193,14 +243,12 @@ export default function BasicDetails({
           if (res.code === 404) {
             setIsUploadingData(false);
             setErrorMessage(res.message);
-          } 
-          else if (res.code === 400) {
-            setIsUploadingData(false)
+          } else if (res.code === 400) {
+            setIsUploadingData(false);
             if (res.errors && res.errors.children) {
-              addServerErrors(res.errors.children,setError);
+              addServerErrors(res.errors.children, setError);
             }
-          }
-          else {
+          } else {
             setIsUploadingData(false);
             setErrorMessage(res.message);
           }
@@ -219,14 +267,12 @@ export default function BasicDetails({
             if (res.code === 404) {
               setIsUploadingData(false);
               setErrorMessage(res.message);
-            }
-            else if (res.code === 400) {
-              setIsUploadingData(false)
+            } else if (res.code === 400) {
+              setIsUploadingData(false);
               if (res.errors && res.errors.children) {
-                addServerErrors(res.errors.children,setError);
+                addServerErrors(res.errors.children, setError);
               }
-            }
-            else {
+            } else {
               setIsUploadingData(false);
               setErrorMessage(res.message);
             }
@@ -296,7 +342,9 @@ export default function BasicDetails({
                   </MaterialTextField>
                 }
                 name="classification"
-                rules={{ required: t('manageProjects:classificationValidation') }}
+                rules={{
+                  required: t('manageProjects:classificationValidation'),
+                }}
                 control={control}
               />
               {errors.classification && (
@@ -395,9 +443,7 @@ export default function BasicDetails({
                         className={styles.popoverContent}
                         style={{ left: '-150px' }}
                       >
-                        <p>
-                          {t('manageProjects:receiveDonationsInfo')}
-                        </p>
+                        <p>{t('manageProjects:receiveDonationsInfo')}</p>
                       </div>
                     </div>
                   </div>
@@ -410,7 +456,10 @@ export default function BasicDetails({
                     <ToggleSwitch
                       id="acceptDonations"
                       checked={properties.value}
-                      onChange={(e) => {properties.onChange(e.target.checked); setAcceptDonations(!acceptDonations) } }
+                      onChange={(e) => {
+                        properties.onChange(e.target.checked);
+                        setAcceptDonations(!acceptDonations);
+                      }}
                       inputProps={{ 'aria-label': 'secondary checkbox' }}
                     />
                   )}
@@ -425,7 +474,9 @@ export default function BasicDetails({
                       value: true,
                       message: t('manageProjects:treeCostValidaitonRequired'),
                     },
-                    validate: (value) => parseNumber(i18n.language, value) > 0 && parseNumber(i18n.language, value) <= 100,
+                    validate: (value) =>
+                      parseNumber(i18n.language, value) > 0 &&
+                      parseNumber(i18n.language, value) <= 100,
                   })}
                   label={t('manageProjects:treeCost')}
                   variant="outlined"
@@ -444,22 +495,19 @@ export default function BasicDetails({
                   <span className={styles.formErrors}>
                     {errors.treeCost.message
                       ? errors.treeCost.message
-                      : t("manageProjects:treeCostValidation")}
+                      : t('manageProjects:treeCostValidation')}
                   </span>
                 )}
               </div>
             ) : null}
           </div>
 
           <div className={`${styles.formFieldLarge} ${styles.mapboxContainer}`}>
-            <p>
-              {t("manageProjects:projectLocation")}
-            </p>
+            <p>{t('manageProjects:projectLocation')}</p>
             <MapGL
               {...viewport}
               ref={mapRef}
-              mapStyle="mapbox://styles/mapbox/streets-v11?optimize=true"
-              mapboxApiAccessToken={process.env.MAPBOXGL_ACCESS_TOKEN}
+              mapStyle={style}
               onViewportChange={_onViewportChange}
               onClick={(event) => {
                 setProjectCoords(event.lngLat);
@@ -512,7 +560,7 @@ export default function BasicDetails({
                   onInput={(e) => {
                     e.target.value = e.target.value.replace(/[^0-9.-]/g, '');
                   }}
-                  InputLabelProps={{ shrink: true }} 
+                  InputLabelProps={{ shrink: true }}
                 />
               </div>
               <div className={`${styles.formFieldHalf} ${styles.latlongField}`}>
@@ -530,7 +578,7 @@ export default function BasicDetails({
                   onInput={(e) => {
                     e.target.value = e.target.value.replace(/[^0-9.-]/g, '');
                   }}
-                  InputLabelProps={{ shrink: true }} 
+                  InputLabelProps={{ shrink: true }}
                 />
               </div>
             </div>
@@ -614,19 +662,22 @@ export default function BasicDetails({
           </div> */}
 
           <div className={`${styles.formFieldHalf}`}>
-            <button id={'basicDetailsCont'}
+            <button
+              id={'basicDetailsCont'}
               onClick={handleSubmit(onSubmit)}
               className={styles.continueButton}
             >
               {isUploadingData ? (
                 <div className={styles.spinner}></div>
               ) : (
-                  t('manageProjects:saveAndContinue')
-                )}
+                t('manageProjects:saveAndContinue')
+              )}
             </button>
           </div>
         </div>
       </form>
     </div>
-  ) : <></>;
+  ) : (
+    <></>
+  );
 }