From 3f3e1d82ff4d2e2f3f0d06770dffe3ce1c9d0b0e Mon Sep 17 00:00:00 2001 From: Sarvesh Warge Date: Thu, 4 Mar 2021 13:23:27 +0530 Subject: [PATCH] remove all mapbox token dependencies --- .env.development | 1 - .env.local.example | 1 - .env.production | 1 - app.json | 4 - next.config.js | 1 - .../components/BasicDetails.tsx | 141 ++++++--- .../components/MapComponent.tsx | 213 +++++++------ .../components/ProjectSites.tsx | 47 ++- .../user/ManageProjects/screens/index.tsx | 286 +++++++++++------- .../UserProfile/components/RegisterTrees.tsx | 34 +-- .../components/RegisterTrees/DrawMap.tsx | 103 ++++--- 11 files changed, 495 insertions(+), 337 deletions(-) diff --git a/.env.development b/.env.development index 29b6af67dc..edf36598b0 100644 --- 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 index b1357660a5..7c66b9dd9f 100644 --- 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 index 40f4dfac64..602723c3a5 100644 --- 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 index 4ea01a7b10..8762b91c85 100644 --- 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 index 42dfc0f7b4..41dff8572a 100644 --- 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 index e2a618f0fc..aee2dc6115 100644 --- 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({ } 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' }} > -

- {t('manageProjects:receiveDonationsInfo')} -

+

{t('manageProjects:receiveDonationsInfo')}

@@ -410,7 +456,10 @@ export default function BasicDetails({ {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,7 +495,7 @@ export default function BasicDetails({ {errors.treeCost.message ? errors.treeCost.message - : t("manageProjects:treeCostValidation")} + : t('manageProjects:treeCostValidation')} )} @@ -452,14 +503,11 @@ export default function BasicDetails({
-

- {t("manageProjects:projectLocation")} -

+

{t('manageProjects:projectLocation')}

{ 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 }} />
@@ -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 }} />
@@ -614,19 +662,22 @@ export default function BasicDetails({ */}
-
- ) : <>; + ) : ( + <> + ); } diff --git a/src/features/user/ManageProjects/components/MapComponent.tsx b/src/features/user/ManageProjects/components/MapComponent.tsx index af88c81fbf..5ad789f568 100644 --- a/src/features/user/ManageProjects/components/MapComponent.tsx +++ b/src/features/user/ManageProjects/components/MapComponent.tsx @@ -9,7 +9,8 @@ import Dropzone from 'react-dropzone'; import tj from '@mapbox/togeojson'; import i18next from './../../../../../i18n'; import WebMercatorViewport from '@math.gl/web-mercator'; -import gjv from "geojson-validation"; +import gjv from 'geojson-validation'; +import getMapStyle from '../../../../utils/maps/getMapStyle'; const { useTranslation } = i18next; interface Props { @@ -19,17 +20,13 @@ interface Props { setGeoJsonError: Function; } -const MAPBOX_TOKEN = process.env.MAPBOXGL_ACCESS_TOKEN; - -const Map = ReactMapboxGl({ - accessToken: MAPBOX_TOKEN, -}); +const Map = ReactMapboxGl({}); export default function MapComponent({ geoJson, setGeoJson, geoJsonError, - setGeoJsonError + setGeoJsonError, }: Props): ReactElement { const defaultMapCenter = [-28.5, 36.96]; const defaultZoom = 1.4; @@ -46,6 +43,20 @@ export default function MapComponent({ center: defaultMapCenter, zoom: defaultZoom, }); + const [style, setStyle] = React.useState({ + version: 8, + sources: {}, + layers: [], + }); + + React.useEffect(() => { + const promise = getMapStyle('openStreetMap'); + promise.then((style: any) => { + if (style) { + setStyle(style); + } + }); + }, []); const reader = new FileReader(); const mapParentRef = React.useRef(null); @@ -80,8 +91,7 @@ export default function MapComponent({ if (drawControlRef.current) { try { drawControlRef.current.draw.add(geoJson); - } - catch (e) { + } catch (e) { setGeoJsonError(true); setGeoJson(null); console.log('We only support feature collection for now', e); @@ -97,94 +107,101 @@ export default function MapComponent({ } }, [geoJson]); - return ready ? ( -
- - - - - { - if (drawControlRef.current) { - drawControlRef.current.draw.deleteAll(); - } - acceptedFiles.forEach((file: any) => { - const fileType = - file.name.substring( - file.name.lastIndexOf('.') + 1, - file.name.length - ) || file.name; - if (fileType === 'kml') { - reader.readAsText(file); - reader.onabort = () => console.log('file reading was aborted'); - reader.onerror = () => console.log('file reading has failed'); - reader.onload = (event) => { - const dom = new DOMParser().parseFromString( - event.target.result, - 'text/xml' - ); - const geo = tj.kml(dom); - if (gjv.isGeoJSONObject(geo)) { - setGeoJsonError(false); - setGeoJson(geo); - } else { - setGeoJsonError(true); - console.log('invalid kml'); - } - }; - } else if (fileType === 'geojson') { - reader.readAsText(file); - reader.onabort = () => console.log('file reading was aborted'); - reader.onerror = () => console.log('file reading has failed'); - reader.onload = (event) => { - const geo = JSON.parse(event.target.result); - if (gjv.isGeoJSONObject(geo)) { - setGeoJsonError(false); - setGeoJson(geo); - } else { - setGeoJsonError(true); - console.log('invalid geojson'); - } - }; + return ( + <> + {ready ? ( +
+ + + + + { + if (drawControlRef.current) { + drawControlRef.current.draw.deleteAll(); + } + acceptedFiles.forEach((file: any) => { + const fileType = + file.name.substring( + file.name.lastIndexOf('.') + 1, + file.name.length + ) || file.name; + if (fileType === 'kml') { + reader.readAsText(file); + reader.onabort = () => + console.log('file reading was aborted'); + reader.onerror = () => console.log('file reading has failed'); + reader.onload = (event) => { + const dom = new DOMParser().parseFromString( + event.target.result, + 'text/xml' + ); + const geo = tj.kml(dom); + if (gjv.isGeoJSONObject(geo)) { + setGeoJsonError(false); + setGeoJson(geo); + } else { + setGeoJsonError(true); + console.log('invalid kml'); + } + }; + } else if (fileType === 'geojson') { + reader.readAsText(file); + reader.onabort = () => + console.log('file reading was aborted'); + reader.onerror = () => console.log('file reading has failed'); + reader.onload = (event) => { + const geo = JSON.parse(event.target.result); + if (gjv.isGeoJSONObject(geo)) { + setGeoJsonError(false); + setGeoJson(geo); + } else { + setGeoJsonError(true); + console.log('invalid geojson'); + } + }; - // Upload the base 64 to API and use the response to show preview to the user - } - }); - }} - > - {({ getRootProps, getInputProps }) => ( -
- - {t('manageProjects:dropGeoJson')} -
- )} - - {geoJsonError ? -
Invalid geojson/kml
: null} -
- ) : null; + // Upload the base 64 to API and use the response to show preview to the user + } + }); + }} + > + {({ getRootProps, getInputProps }) => ( +
+ + {t('manageProjects:dropGeoJson')} +
+ )} + + {geoJsonError ? ( +
Invalid geojson/kml
+ ) : null} +
+ ) : null} + + ); } diff --git a/src/features/user/ManageProjects/components/ProjectSites.tsx b/src/features/user/ManageProjects/components/ProjectSites.tsx index 6e85b12f34..3bc1cbdbf0 100644 --- a/src/features/user/ManageProjects/components/ProjectSites.tsx +++ b/src/features/user/ManageProjects/components/ProjectSites.tsx @@ -17,12 +17,11 @@ import { getAuthenticatedRequest, postAuthenticatedRequest, } from '../../../../utils/apiRequests/api'; +import getMapStyle from '../../../../utils/maps/getMapStyle'; const { useTranslation } = i18next; -const MAPBOX_TOKEN = process.env.MAPBOXGL_ACCESS_TOKEN; const MapStatic = ReactMapboxGl({ - accessToken: MAPBOX_TOKEN, interactive: false, }); @@ -83,6 +82,20 @@ export default function ProjectSites({ center: defaultMapCenter, zoom: [defaultZoom], }); + const [style, setStyle] = React.useState({ + version: 8, + sources: {}, + layers: [], + }); + + React.useEffect(() => { + const promise = getMapStyle('openStreetMap'); + promise.then((style: any) => { + if (style) { + setStyle(style); + } + }); + }, []); const [showForm, setShowForm] = React.useState(true); @@ -168,9 +181,18 @@ export default function ProjectSites({ }; const status = [ - { label: ready ? t('manageProjects:siteStatusPlanting') : '', value: 'planting' }, - { label: ready ? t('manageProjects:siteStatusPlanted') : '', value: 'planted' }, - { label: ready ? t('manageProjects:siteStatusBarren') : '', value: 'barren' }, + { + label: ready ? t('manageProjects:siteStatusPlanting') : '', + value: 'planting', + }, + { + label: ready ? t('manageProjects:siteStatusPlanted') : '', + value: 'planted', + }, + { + label: ready ? t('manageProjects:siteStatusBarren') : '', + value: 'barren', + }, { label: ready ? t('manageProjects:siteStatusReforestation') : '', value: 'reforestation', @@ -225,7 +247,8 @@ export default function ProjectSites({
{String(site.status).toUpperCase()}
- ) : ( -