fix(earth-map): prefix environment variables with MAP namespace

packages/earth-map/.env.sample

@@ -1,23 +1,23 @@
 NODE_ENV='production' # required
 
-GATSBY_APP_NAME='marapp' # required
-GATSBY_APP_BASE_URL='/' # required
-GATSBY_APP_ASSETS_URL='' # required
-GATSBY_APP_API_URL='' # required
-GATSBY_APP_MAPBOX_TOKEN='' # required
-GATSBY_APP_ADMIN_URL='/admin/' # required
-GATSBY_APP_FULLPAGE_LICENSE='11A64E11-6A674726-89F7B31C-36D8EAF7'
+GATSBY_APP_MAP_NAME='marapp' # required
+GATSBY_APP_MAP_BASE_URL='/' # required
+GATSBY_APP_MAP_ASSETS_URL='' # required
+GATSBY_APP_MAP_API_URL='' # required
+GATSBY_APP_MAP_MAPBOX_TOKEN='' # required
+GATSBY_APP_MAP_ADMIN_URL='/admin/' # required
+GATSBY_APP_MAP_FULLPAGE_LICENSE='11A64E11-6A674726-89F7B31C-36D8EAF7'
 
-GATSBY_APP_AUTH0_DOMAIN='' # required
-GATSBY_APP_AUTH0_CLIENT_ID='' # required
-GATSBY_APP_AUTH0_AUDIENCE='' # required
-GATSBY_APP_AUTH0_NAMESPACE='https://marapp.org' # required
+GATSBY_APP_MAP_AUTH0_DOMAIN='' # required
+GATSBY_APP_MAP_AUTH0_CLIENT_ID='' # required
+GATSBY_APP_MAP_AUTH0_AUDIENCE='' # required
+GATSBY_APP_MAP_AUTH0_NAMESPACE='https://marapp.org' # required
 
-GATSBY_APP_GTM_TAG='' # optional
-GATSBY_APP_WEGLOT_API_KEY='' # optional
+GATSBY_APP_MAP_GTM_TAG='' # optional
+GATSBY_APP_MAP_WEGLOT_API_KEY='' # optional
 
-GATSBY_APP_ENABLE_PUBLIC_ACCESS='false' # optional
-GATSBY_APP_EXTERNAL_IDP_URL='' # optional
-GATSBY_APP_COMPANY_URL='' # optional
+GATSBY_APP_MAP_ENABLE_PUBLIC_ACCESS='false' # optional
+GATSBY_APP_MAP_EXTERNAL_IDP_URL='' # optional
+GATSBY_APP_MAP_COMPANY_URL='' # optional
 
 GATSBY_TELEMETRY_DISABLED=1

packages/earth-map/README.md

@@ -22,21 +22,21 @@ The following environment variables are required by the application.
 | ------------- |:----------------|
 | `NODE_ENV` | Node.js environment (e.g. `development`, `production`) |
 | `PUBLIC_URL` | The public URL (e.g. `/`) |
-| `GATSBY_APP_NAME` | The name of the app (e.g. `marapp`) |
-| `GATSBY_APP_BASE_URL` | The base URL (e.g. `/`) |
-| `GATSBY_APP_ASSETS_URL` | The assets URL |
-| `GATSBY_APP_API_URL` | The API URL |
-| `GATSBY_APP_FULLPAGE_LICENSE` | https://alvarotrigo.com/fullPage/ - fullPage.js License KEY |
-| `GATSBY_APP_MAPBOX_TOKEN` | https://docs.mapbox.com/help/glossary/access-token - Mapbox access token |
-| `GATSBY_APP_AUTH0_DOMAIN` | https://auth0.com/docs/custom-domains - Auth0 domain |
-| `GATSBY_APP_AUTH0_CLIENT_ID`| https://auth0.com/docs/flows/concepts/client-credentials - Auth0 Client ID |
-| `GATSBY_APP_AUTH0_AUDIENCE` | https://auth0.com/docs/tokens/guides/get-access-tokens - Auth0 audience |
-| `GATSBY_APP_AUTH0_NAMESPACE` | https://auth0.com/docs/tokens/guides/create-namespaced-custom-claims - Auth0 namespace |
-| `GATSBY_APP_ADMIN_URL` | The URL for admin component (e.g. `/admin/`) |
-| `GATSBY_APP_GTM_TAG` | Google Tag Manager ID |
-| `GATSBY_APP_ENABLE_PUBLIC_ACCESS` | Enable unauthenticated access |
-| `GATSBY_APP_EXTERNAL_IDP_URL` | External Identity Provider URL |
-| `GATSBY_APP_WEGLOT_API_KEY` | https://weglot.com/ - Weglot API Key |
+| `GATSBY_APP_MAP_NAME` | The name of the app (e.g. `marapp`) |
+| `GATSBY_APP_MAP_BASE_URL` | The base URL (e.g. `/`) |
+| `GATSBY_APP_MAP_ASSETS_URL` | The assets URL |
+| `GATSBY_APP_MAP_API_URL` | The API URL |
+| `GATSBY_APP_MAP_FULLPAGE_LICENSE` | https://alvarotrigo.com/fullPage/ - fullPage.js License KEY |
+| `GATSBY_APP_MAP_MAPBOX_TOKEN` | https://docs.mapbox.com/help/glossary/access-token - Mapbox access token |
+| `GATSBY_APP_MAP_AUTH0_DOMAIN` | https://auth0.com/docs/custom-domains - Auth0 domain |
+| `GATSBY_APP_MAP_AUTH0_CLIENT_ID`| https://auth0.com/docs/flows/concepts/client-credentials - Auth0 Client ID |
+| `GATSBY_APP_MAP_AUTH0_AUDIENCE` | https://auth0.com/docs/tokens/guides/get-access-tokens - Auth0 audience |
+| `GATSBY_APP_MAP_AUTH0_NAMESPACE` | https://auth0.com/docs/tokens/guides/create-namespaced-custom-claims - Auth0 namespace |
+| `GATSBY_APP_MAP_ADMIN_URL` | The URL for admin component (e.g. `/admin/`) |
+| `GATSBY_APP_MAP_GTM_TAG` | Google Tag Manager ID |
+| `GATSBY_APP_MAP_ENABLE_PUBLIC_ACCESS` | Enable unauthenticated access |
+| `GATSBY_APP_MAP_EXTERNAL_IDP_URL` | External Identity Provider URL |
+| `GATSBY_APP_MAP_WEGLOT_API_KEY` | https://weglot.com/ - Weglot API Key |
 
 ## Getting started
 

packages/earth-map/gatsby-browser.js

@@ -26,10 +26,10 @@ import { Auth0Provider } from './src/auth/auth0';
 import { onRedirectCallback, onSuccessHook, onFailureHook } from './src/auth/hooks';
 import auth0 from './src/config/auth0';
 
-import { GTM_TAG } from './src/config';
+import { MAP_GTM_TAG } from './src/config';
 
-if (GTM_TAG) {
-  const tagManagerArgs = { gtmId: GTM_TAG };
+if (MAP_GTM_TAG) {
+  const tagManagerArgs = { gtmId: MAP_GTM_TAG };
   TagManager.initialize(tagManagerArgs);
 }
 

packages/earth-map/gatsby-config.js

@@ -24,7 +24,7 @@ const GATSBY_ACTIVE_ENV = process.env.GATSBY_ACTIVE_ENV || '.env';
 require('dotenv').config({ path: GATSBY_ACTIVE_ENV });
 
 module.exports = {
-  pathPrefix: process.env.GATSBY_APP_BASE_URL,
+  pathPrefix: process.env.GATSBY_APP_MAP_BASE_URL,
   siteMetadata: {
     siteName: 'Map',
   },
@@ -55,6 +55,7 @@ module.exports = {
         '@app/images': path.join(__dirname, 'src/images'),
         '@app/modules': path.join(__dirname, 'src/modules'),
         '@app/pages': path.join(__dirname, 'src/pages'),
+        '@app/pages-client': path.join(__dirname, 'src/pages-client'),
         '@app/sagas': path.join(__dirname, 'src/sagas'),
         '@app/services': path.join(__dirname, 'src/services'),
         '@app/store': path.join(__dirname, 'src/store'),

packages/earth-map/src/auth/auth0.tsx

@@ -34,14 +34,13 @@ import {
 
 import auth0 from '../config/auth0';
 import { routeToPage } from '../utils';
-import { Auth0 } from './model';
+import { Auth0Context } from '../utils/contexts';
 
 // Auth0 will enforce namespacing when performing OIDC-conformant
 // login flows, meaning that any custom claims without HTTP/HTTPS
 // namespaces will be silently excluded from tokens.
 const NAMESPACE = auth0.config.namespace;
 
-export const Auth0Context = React.createContext<Auth0>(null);
 export const useAuth0 = () => useContext(Auth0Context);
 
 interface Auth0ProviderOptions {

packages/earth-map/src/components/collection/collection-editplaces/CollectionEditPlaces.tsx

@@ -25,7 +25,7 @@ import { replace } from 'redux-first-router';
 
 import { AsyncSelect, Card, DropdownItem, TitleHero } from '@marapp/earth-shared';
 
-import { ENABLE_PUBLIC_ACCESS } from '../../../config';
+import { MAP_ENABLE_PUBLIC_ACCESS } from '../../../config';
 import { ICollection } from '../../../modules/collections/model';
 import { LocationTypeEnum } from '../../../modules/places/model';
 import PlacesService from '../../../services/PlacesService';
@@ -73,7 +73,7 @@ export function CollectionEditPlaces(props: IProps) {
                 title: option.name,
               };
 
-              if (ENABLE_PUBLIC_ACCESS) {
+              if (MAP_ENABLE_PUBLIC_ACCESS) {
                 itemProps.subtitle = option.organization;
               }
 

packages/earth-map/src/components/header/component.tsx

@@ -25,11 +25,11 @@ import Link from 'redux-first-router-link';
 
 import { AppContextSwitcher, checkAdminRole } from '@marapp/earth-shared';
 
-import { Auth0Context } from '../../auth/auth0';
-import { ADMIN_URL, APP_NAME } from '../../config';
+import { MAP_ADMIN_URL, MAP_APP_NAME } from '../../config';
 import { EPanels } from '../../modules/sidebar/model';
 import OrganizationService from '../../services/OrganizationService';
 import { APP_LOGO } from '../../theme';
+import { Auth0Context } from '../../utils/contexts';
 
 const { Option } = AppContextSwitcher;
 
@@ -141,7 +141,7 @@ const Header = (props: IProps) => {
     >
       <img
         src={APP_LOGO}
-        alt={APP_NAME}
+        alt={MAP_APP_NAME}
         className="ng-margin-remove ng-display-block"
         onClick={handleResetLocation}
       />
@@ -189,7 +189,7 @@ const Header = (props: IProps) => {
       value="map-view"
       checkedCount={selectedGroups.length}
       renderDropdown={isAuthenticated}
-      onChange={(g) => window.location.assign(`${ADMIN_URL}${g}`)}
+      onChange={(g) => window.location.assign(`${MAP_ADMIN_URL}${g}`)}
     >
       <Option value="map-view">{t('Map View')}</Option>
       {orgCheckBoxes}

packages/earth-map/src/components/home/component.tsx

@@ -20,7 +20,7 @@
 import ReactFullpage from '@fullpage/react-fullpage';
 import React from 'react';
 
-import { FULLPAGE_LICENSE } from '../../config';
+import { MAP_FULLPAGE_LICENSE } from '../../config';
 import Globe from '../globe';
 import OutroStep from './steps/outro';
 import './styles.scss';
@@ -31,7 +31,7 @@ class HomeComponent extends React.PureComponent {
       <React.Fragment>
         <div className="c-landing marapp-qa-home">
           <ReactFullpage
-            licenseKey={FULLPAGE_LICENSE}
+            licenseKey={MAP_FULLPAGE_LICENSE}
             render={({ state, fullpageApi }) => {
               return (
                 <ReactFullpage.Wrapper>

packages/earth-map/src/components/home/steps/outro/component.tsx

@@ -22,7 +22,7 @@ import { animated, Transition } from 'react-spring/renderprops.cjs';
 
 import { Button } from '@marapp/earth-shared';
 
-import { APP_NAME } from '../../../../config';
+import { MAP_APP_NAME } from '../../../../config';
 import './styles.scss';
 
 export interface IOutro {
@@ -47,7 +47,7 @@ class OutroComponent extends React.PureComponent<IOutro> {
             <animated.div style={props} className="landing-outro--container">
               <div className="outro">
                 <p className="landing-outro--text">Start Exploring</p>
-                <h3 className="landing-outro--title">{APP_NAME}</h3>
+                <h3 className="landing-outro--title">{MAP_APP_NAME}</h3>
                 <Button className="ng-button ng-button-primary" link={{ to: '/earth' }}>
                   Launch
                 </Button>

packages/earth-map/src/components/layer-config-error/component.tsx

@@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Card } from '@marapp/earth-shared';
 
-import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_WIDE } from '../../config';
+import { MAP_SIDEBAR_WIDTH, MAP_SIDEBAR_WIDTH_WIDE } from '../../config';
 import './styles.scss';
 
 interface IProps {
@@ -39,10 +39,10 @@ const LayerConfigError = (props: IProps) => {
   };
 
   if (open) {
-    containerStyle.marginLeft = SIDEBAR_WIDTH;
+    containerStyle.marginLeft = MAP_SIDEBAR_WIDTH;
 
     if (selectedOpen) {
-      containerStyle.marginLeft = SIDEBAR_WIDTH_WIDE;
+      containerStyle.marginLeft = MAP_SIDEBAR_WIDTH_WIDE;
     }
   }
 

packages/earth-map/src/components/map/component.tsx

@@ -28,10 +28,10 @@ import Link from 'redux-first-router-link';
 
 import { Map, Spinner, UserMenu } from '@marapp/earth-shared';
 
-import { Auth0Context } from '../../auth/auth0';
-import { API_URL, MAPBOX_TOKEN } from '../../config';
+import { MAP_API_URL, MAP_MAPBOX_TOKEN } from '../../config';
 import experienceIMG from '../../images/pins/experience-marker.svg';
 import { APP_ABOUT, RESOURCE_WATCH_URL } from '../../theme';
+import { Auth0Context } from '../../utils/contexts';
 import {
   extractCoordinatesFromUrl,
   isValidUrlCoordinateGroup,
@@ -212,7 +212,7 @@ class MapComponent extends React.Component<IMap, IMapState> {
   };
 
   public onTransformRequest = (url, resourceType) => {
-    if (resourceType === 'Source' && url.includes(API_URL)) {
+    if (resourceType === 'Source' && url.includes(MAP_API_URL)) {
       return {
         url,
         headers: { Authorization: axios.defaults.headers.common.Authorization },
@@ -331,7 +331,7 @@ class MapComponent extends React.Component<IMap, IMapState> {
         <UserMenuWrapper selected={page} />
 
         <Map
-          mapboxApiAccessToken={MAPBOX_TOKEN}
+          mapboxApiAccessToken={MAP_MAPBOX_TOKEN}
           // Attributtes
           mapStyle={mapStyle}
           viewport={viewport}

packages/earth-map/src/components/sidebar/company-redirect/component.tsx

@@ -15,14 +15,14 @@
 
 import React from 'react';
 
-import { APP_NAME, COMPANY_URL } from '../../../config';
+import { MAP_APP_NAME, MAP_COMPANY_URL } from '../../../config';
 import './styles.scss';
 
 const SidebarToggle = () => {
-  return COMPANY_URL ? (
+  return MAP_COMPANY_URL ? (
     <a
-      href={COMPANY_URL}
-      title={APP_NAME}
+      href={MAP_COMPANY_URL}
+      title={MAP_APP_NAME}
       className="marapp-qa-company-link company-link ng-flex ng-flex-center ng-flex-middle"
     >
       <i className="ng-body-color ng-icon-small ng-icon-home" />

packages/earth-map/src/components/sidebar/component.tsx

@@ -21,15 +21,15 @@ import classNames from 'classnames';
 import React from 'react';
 import { animated, Keyframes } from 'react-spring/renderprops.cjs';
 
-import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_WIDE } from '../../config';
+import { MAP_SIDEBAR_WIDTH, MAP_SIDEBAR_WIDTH_WIDE } from '../../config';
 import CompanyRedirect from './company-redirect';
 import SidebarToggle from './sidebar-toggle';
 import './styles.scss';
 
 // Creates a spring with predefined animation slots
 const SidebarPanel: any = Keyframes.Spring({
-  open: { x: 0, width: SIDEBAR_WIDTH, from: { x: -100 }, delay: 0 },
-  openW: { x: 0, width: SIDEBAR_WIDTH_WIDE, from: { x: 0 }, delay: 0 },
+  open: { x: 0, width: MAP_SIDEBAR_WIDTH, from: { x: -100 }, delay: 0 },
+  openW: { x: 0, width: MAP_SIDEBAR_WIDTH_WIDE, from: { x: 0 }, delay: 0 },
   close: { x: -100, delay: 100 },
 });
 

packages/earth-map/src/config/auth0.tsx

@@ -19,12 +19,17 @@
 
 import urljoin from 'url-join';
 
+import { windowPropertySSR } from '../utils';
+
 const config = {
-  domain: process.env.GATSBY_APP_AUTH0_DOMAIN,
-  clientId: process.env.GATSBY_APP_AUTH0_CLIENT_ID,
-  redirectUri: urljoin(window.location.origin, process.env.GATSBY_APP_BASE_URL || ''),
-  audience: process.env.GATSBY_APP_AUTH0_AUDIENCE,
-  namespace: process.env.GATSBY_APP_AUTH0_NAMESPACE,
+  domain: process.env.GATSBY_APP_MAP_AUTH0_DOMAIN,
+  clientId: process.env.GATSBY_APP_MAP_AUTH0_CLIENT_ID,
+  redirectUri: urljoin(
+    windowPropertySSR('location.origin', '/'),
+    process.env.GATSBY_APP_MAP_BASE_URL || '/'
+  ),
+  audience: process.env.GATSBY_APP_MAP_AUTH0_AUDIENCE,
+  namespace: process.env.GATSBY_APP_MAP_AUTH0_NAMESPACE,
 };
 
 export default { config };

packages/earth-map/src/config/index.tsx

@@ -19,24 +19,40 @@
 
 import yn from 'yn';
 
-export const NODE_ENV = process.env.NODE_ENV;
-export const PUBLIC_URL = process.env.PUBLIC_URL;
-
-export const BASE_URL = process.env.GATSBY_APP_BASE_URL || '/';
-export const API_URL = process.env.GATSBY_APP_API_URL;
-export const FULLPAGE_LICENSE = process.env.GATSBY_APP_FULLPAGE_LICENSE;
-export const ADMIN_URL = process.env.GATSBY_APP_ADMIN_URL;
-export const APP_NAME = process.env.GATSBY_APP_NAME;
-export const MAPBOX_TOKEN = process.env.GATSBY_APP_MAPBOX_TOKEN;
-export const WEGLOT_API_KEY = process.env.GATSBY_APP_WEGLOT_API_KEY;
-export const COMPANY_URL = process.env.GATSBY_APP_COMPANY_URL;
-
-export const GTM_TAG = process.env.GATSBY_APP_GTM_TAG;
-export const ENABLE_PUBLIC_ACCESS = yn(process.env.GATSBY_APP_ENABLE_PUBLIC_ACCESS, {
+const NODE_ENV: string = process.env.NODE_ENV;
+const PUBLIC_URL: string = process.env.PUBLIC_URL;
+
+const MAP_BASE_URL: string = process.env.GATSBY_APP_MAP_BASE_URL || '/';
+const MAP_API_URL: string = process.env.GATSBY_APP_MAP_API_URL;
+const MAP_FULLPAGE_LICENSE: string = process.env.GATSBY_APP_MAP_FULLPAGE_LICENSE;
+const MAP_ADMIN_URL: string = process.env.GATSBY_APP_MAP_ADMIN_URL;
+const MAP_APP_NAME: string = process.env.GATSBY_APP_MAP_NAME;
+const MAP_MAPBOX_TOKEN: string = process.env.GATSBY_APP_MAP_MAPBOX_TOKEN;
+const MAP_WEGLOT_API_KEY: string = process.env.GATSBY_APP_MAP_WEGLOT_API_KEY;
+const MAP_COMPANY_URL: string = process.env.GATSBY_APP_MAP_COMPANY_URL;
+const MAP_EXTERNAL_IDP_URL: string = process.env.GATSBY_APP_MAP_EXTERNAL_IDP_URL || '';
+const MAP_GTM_TAG: string = process.env.GATSBY_APP_MAP_GTM_TAG;
+const MAP_ENABLE_PUBLIC_ACCESS: boolean = yn(process.env.GATSBY_APP_MAP_ENABLE_PUBLIC_ACCESS, {
   default: false,
 });
 
-export const SIDEBAR_WIDTH = 375;
-export const SIDEBAR_WIDTH_WIDE = 500;
-
-export const GATSBY_APP_EXTERNAL_IDP_URL = process.env.GATSBY_APP_EXTERNAL_IDP_URL || '';
+const MAP_SIDEBAR_WIDTH = 375;
+const MAP_SIDEBAR_WIDTH_WIDE = 500;
+
+export {
+  NODE_ENV,
+  PUBLIC_URL,
+  MAP_BASE_URL,
+  MAP_API_URL,
+  MAP_FULLPAGE_LICENSE,
+  MAP_ADMIN_URL,
+  MAP_APP_NAME,
+  MAP_MAPBOX_TOKEN,
+  MAP_WEGLOT_API_KEY,
+  MAP_COMPANY_URL,
+  MAP_EXTERNAL_IDP_URL,
+  MAP_GTM_TAG,
+  MAP_ENABLE_PUBLIC_ACCESS,
+  MAP_SIDEBAR_WIDTH,
+  MAP_SIDEBAR_WIDTH_WIDE,
+};

packages/earth-map/src/env.d.ts

@@ -17,7 +17,7 @@
   specific language governing permissions and limitations under the License.
 */
 
-declare module '@marapp/earth-shared';
-declare module '@fullpage/react-fullpage';
-declare module 'layer-manager';
-declare module 'vizzuality-components';
+// declare module '@marapp/earth-shared';
+// declare module '@fullpage/react-fullpage';
+// declare module 'layer-manager';
+// declare module 'vizzuality-components';