Disable places page when mapbox token isn't defined

docker-compose.example.yml

@@ -31,6 +31,11 @@ services:
       # change this value to http://example.com/
       - PUBLIC_ENDPOINT=http://localhost:8000/
 
+      # Optional: To enable map related features, you need to create a mapbox token.
+      # A token can be generated for free here https://account.mapbox.com/access-tokens/
+      # It's a good idea to limit the scope of the token to your own domain, to prevent others from using it.
+      # - MAPBOX_TOKEN=<YOUR TOKEN HERE>
+
     volumes:
       - api_cache:/app/cache
 

ui/src/Layout.js

@@ -4,13 +4,13 @@ import styled from 'styled-components'
 import { NavLink } from 'react-router-dom'
 import { Icon } from 'semantic-ui-react'
 import Sidebar from './components/sidebar/Sidebar'
-import { Query } from 'react-apollo'
+import { useQuery } from 'react-apollo'
 import gql from 'graphql-tag'
 import { Authorized } from './AuthorizedRoute'
 import { Helmet } from 'react-helmet'
 import Header from './components/header/Header'
 
-const adminQuery = gql`
+const ADMIN_QUERY = gql`
   query adminQuery {
     myUser {
       admin
@@ -18,6 +18,12 @@ const adminQuery = gql`
   }
 `
 
+const MAPBOX_QUERY = gql`
+  query mapboxEnabledQuery {
+    mapboxToken
+  }
+`
+
 const Container = styled.div`
   height: 100%;
   display: flex;
@@ -88,54 +94,58 @@ const SideButtonLabel = styled.div`
   font-size: 16px;
 `
 
-const Layout = ({ children, title }) => (
-  <Container>
-    <Helmet>
-      <title>{title ? `${title} - Photoview` : `Photoview`}</title>
-    </Helmet>
-    <Authorized>
-      <SideMenu>
-        <SideButton to="/photos" exact>
-          <Icon name="image outline" />
-          <SideButtonLabel>Photos</SideButtonLabel>
-        </SideButton>
-        <SideButton to="/albums" exact>
-          <Icon name="images outline" />
-          <SideButtonLabel>Albums</SideButtonLabel>
-        </SideButton>
-        <SideButton to="/places" exact>
-          <Icon name="map outline" />
-          <SideButtonLabel>Places</SideButtonLabel>
-        </SideButton>
-        <Query query={adminQuery}>
-          {({ loading, error, data }) => {
-            if (data && data.myUser && data.myUser.admin) {
-              return (
-                <SideButton to="/settings" exact>
-                  <Icon name="settings" />
-                  <SideButtonLabel>Settings</SideButtonLabel>
-                </SideButton>
-              )
-            }
+const Layout = ({ children, title }) => {
+  const adminQuery = useQuery(ADMIN_QUERY)
+  const mapboxQuery = useQuery(MAPBOX_QUERY)
 
-            return null
-          }}
-        </Query>
-        <SideButton to="/logout">
-          <Icon name="lock" />
-          <SideButtonLabel>Log out</SideButtonLabel>
-        </SideButton>
-      </SideMenu>
-    </Authorized>
-    <Sidebar>
-      <Content id="layout-content">
-        {children}
-        <div style={{ height: 24 }}></div>
-      </Content>
-    </Sidebar>
-    <Header />
-  </Container>
-)
+  const isAdmin =
+    adminQuery.data && adminQuery.data.myUser && adminQuery.data.myUser.admin
+
+  const mapboxEnabled = mapboxQuery.data && mapboxQuery.data.mapboxToken != null
+
+  return (
+    <Container>
+      <Helmet>
+        <title>{title ? `${title} - Photoview` : `Photoview`}</title>
+      </Helmet>
+      <Authorized>
+        <SideMenu>
+          <SideButton to="/photos" exact>
+            <Icon name="image outline" />
+            <SideButtonLabel>Photos</SideButtonLabel>
+          </SideButton>
+          <SideButton to="/albums" exact>
+            <Icon name="images outline" />
+            <SideButtonLabel>Albums</SideButtonLabel>
+          </SideButton>
+          {mapboxEnabled ? (
+            <SideButton to="/places" exact>
+              <Icon name="map outline" />
+              <SideButtonLabel>Places</SideButtonLabel>
+            </SideButton>
+          ) : null}
+          {isAdmin ? (
+            <SideButton to="/settings" exact>
+              <Icon name="settings" />
+              <SideButtonLabel>Settings</SideButtonLabel>
+            </SideButton>
+          ) : null}
+          <SideButton to="/logout">
+            <Icon name="lock" />
+            <SideButtonLabel>Log out</SideButtonLabel>
+          </SideButton>
+        </SideMenu>
+      </Authorized>
+      <Sidebar>
+        <Content id="layout-content">
+          {children}
+          <div style={{ height: 24 }}></div>
+        </Content>
+      </Sidebar>
+      <Header />
+    </Container>
+  )
+}
 
 Layout.propTypes = {
   children: PropTypes.any.isRequired,

ui/src/Pages/PlacesPage/PlacesPage.js

@@ -37,7 +37,6 @@ const MapPage = () => {
   useEffect(() => {
     async function loadMapboxLibrary() {
       const mapbox = await import('mapbox-gl')
-      // mapbox.accessToken = <INSERT ACCESS TOKEN>
       setMapboxLibrary(mapbox)
     }
     loadMapboxLibrary()
@@ -95,6 +94,23 @@ const MapPage = () => {
     })
   }, [mapContainer, mapboxLibrary, mapboxData])
 
+  if (mapboxData && mapboxData.mapboxToken == null) {
+    return (
+      <Layout>
+        <h1>Mapbox token is not set</h1>
+        <p>
+          To use map related features a mapbox token is needed.
+          <br /> A mapbox token can be created for free at{' '}
+          <a href="https://account.mapbox.com/access-tokens/">mapbox.com</a>.
+        </p>
+        <p>
+          Make sure the access token is added as the MAPBOX_TOKEN environment
+          variable.
+        </p>
+      </Layout>
+    )
+  }
+
   return (
     <Layout>
       <MapWrapper>