Update changeset-map and add configuration (#684)

.gitignore

@@ -12,6 +12,7 @@
 # misc
 .DS_Store
 .env
+.env.*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "osmcha-frontend",
-  "version": "0.85.7",
+  "version": "0.86.0",
   "license": "ISC",
   "engines": {
     "node": ">=7.0"
@@ -19,7 +19,7 @@
     "@turf/simplify": "^6.5.0",
     "@turf/truncate": "^6.5.0",
     "animate.css": "^3.7.2",
-    "changeset-map": "^1.11.2",
+    "changeset-map": "^1.12.0",
     "date-fns": "^2.22.1",
     "dompurify": "^3.0.3",
     "history": "^4.10.1",

src/config/constants.js

@@ -1,27 +1,39 @@
 //@flow
 import { API_URL } from './';
 
-export const PAGE_SIZE = 25;
-export const overpassBase = '//overpass.osmcha.org/api/interpreter';
-export const osmBase = '//www.openstreetmap.org/api/0.6/';
+export const PAGE_SIZE = process.env.REACT_APP_PAGE_SIZE || 25;
+export const overpassBase =
+  process.env.REACT_APP_OVERPASS_BASE ||
+  '//overpass.osmcha.org/api/interpreter';
 export const mapboxAccessToken =
+  process.env.REACT_APP_MAPBOX_ACCESS_TOKEN ||
   'pk.eyJ1Ijoib3BlbnN0cmVldG1hcCIsImEiOiJjam10OXpmc2YwMXI5M3BqeTRiMDBqMHVyIn0.LIcIDe3TZLSDdTWDoojzNg';
 export const statusUrl =
   'https://raw.githubusercontent.com/mapbox/osmcha-frontend/status/status.json';
+export const enableRealChangesets = process.env.REACT_APP_ENABLE_REAL_CHANGESETS
+  ? Boolean(process.env.REACT_APP_ENABLE_REAL_CHANGESETS)
+  : true;
 
 export const osmchaSocialTokenUrl = `${API_URL}/social-auth/`;
+export const osmchaUrl = API_URL.replace('api/v1', '');
 
-export const osmAuthUrl = 'https://www.openstreetmap.org/oauth/authorize';
-export const apiOSM = 'https://api.openstreetmap.org/api/0.6';
+export const osmUrl =
+  process.env.REACT_APP_OSM_URL || 'https://www.openstreetmap.org';
+export const osmAuthUrl = `${osmUrl}/oauth/authorize`;
+export const isOfficialOSM = osmUrl === 'https://www.openstreetmap.org';
+export const apiOSM =
+  process.env.REACT_APP_OSM_API || 'https://api.openstreetmap.org/api/0.6';
 
 export const whosThat =
   'https://rksbsqdel4.execute-api.us-east-1.amazonaws.com/testing?action=names&id=';
 
-export const nominatimUrl = 'https://nominatim.openstreetmap.org/search.php';
+export const nominatimUrl =
+  process.env.REACT_APP_NOMINATIM_URL ||
+  'https://nominatim.openstreetmap.org/search.php';
 
 // set a default from date x days before today
-export const DEFAULT_FROM_DATE = 2;
+export const DEFAULT_FROM_DATE = process.env.REACT_APP_DEFAULT_FROM_DATE || 2;
 // exclude changesets newer than x minutes. It's needed because of the difference
 // between the time a changeset is processed by OSMCha and the time its map
 // visualization is available
-export const DEFAULT_TO_DATE = 5;
+export const DEFAULT_TO_DATE = process.env.REACT_APP_DEFAULT_TO_DATE || 5;

src/config/index.js

@@ -6,10 +6,11 @@ export const isLocal = process.env.NODE_ENV === 'development';
 export const stack = process.env.REACT_APP_STACK;
 export const appVersion = process.env.REACT_APP_VERSION;
 
-let url = 'https://staging.osmcha.org/api/v1';
+let url =
+  process.env.REACT_APP_STAGING_API_URL || 'https://staging.osmcha.org/api/v1';
 
 if (isProd) {
-  url = 'https://osmcha.org/api/v1';
+  url = process.env.REACT_APP_PRODUCTION_API_URL || 'https://osmcha.org/api/v1';
 }
 
 window.debug_info = () =>

src/store/changeset_actions.js

@@ -7,6 +7,15 @@ import notifications from '../config/notifications';
 
 import { fetchChangeset, setHarmful, setTag } from '../network/changeset';
 import { importChangesetMap } from '../utils/cmap';
+import {
+  apiOSM,
+  osmUrl,
+  isOfficialOSM,
+  osmchaUrl,
+  overpassBase,
+  enableRealChangesets,
+  mapboxAccessToken
+} from '../config/constants';
 
 import {
   getChangesetIdFromLocation,
@@ -264,7 +273,15 @@ export function* fetchChangesetAction(changesetId: number): Object {
 
 export function changesetMapModule(changesetId: number): any {
   return importChangesetMap('getChangeset').then((getCMapData: any) =>
-    getCMapData(changesetId)
+    getCMapData(changesetId, {
+      osmApiBase: apiOSM,
+      osmBase: osmUrl,
+      enableRealChangesets,
+      overpassBase,
+      mapboxAccessToken,
+      isOSMApp: isOfficialOSM,
+      osmchaBase: osmchaUrl
+    })
   );
 }
 export const changesetMapSelector = (state: RootStateType) =>

src/views/map.js

@@ -7,6 +7,12 @@ import { SignIn } from '../components/sign_in';
 import { dispatchEvent } from '../utils/dispatch_event';
 import { updateStyle } from '../store/map_controls_actions';
 import { importChangesetMap } from '../utils/cmap';
+import {
+  mapboxAccessToken,
+  osmUrl,
+  isOfficialOSM,
+  enableRealChangesets
+} from '../config/constants';
 
 import 'changeset-map/public/css/style.css';
 import type { RootStateType } from '../store';
@@ -47,7 +53,11 @@ function loadMap() {
       width: width + 'px',
       height: Math.max(400, height) + 'px',
       data: currentChangesetMap,
-      disableSidebar: true
+      disableSidebar: true,
+      enableRealChangesets: enableRealChangesets,
+      mapboxAccessToken: mapboxAccessToken,
+      osmBase: osmUrl,
+      isOSMApp: isOfficialOSM
     });
   });
 }