Map locations

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/.env

@@ -2,4 +2,3 @@ PORT=3001
 PUBLIC_URL=/
 HOST=nuc.ketrenos.com
 DANGEROUSLY_DISABLE_HOST_CHECK='true'
-LOG_LINE=1

client/src/Common.js

@@ -1,5 +1,6 @@
 
 const base = process.env.PUBLIC_URL;
+
 export {
   base
 };

client/src/Group.js

@@ -81,15 +81,13 @@ function Group() {
       display: 'flex',
       flexDirection: 'column'
     }}>
-      <GlobalContext.Provider value={{user, setUser}}>
-        { error && <div>{error}</div>}
-        { !error && <>
-          <div>Group: {groupId}</div>
-          <div>Locations</div>
-          { locations.map(location =>
-            <Location location={location} key={location.id}/>) }
-        </> }
-      </GlobalContext.Provider>
+      { error && <div>{error}</div>}
+      { !error && <>
+        <div>Group: {groupId}</div>
+        <div>Locations</div>
+        { locations.map(location =>
+          <Location location={location} key={location.id}/>) }
+      </> }
     </Paper>
   );
 }

client/src/Location.js

@@ -12,14 +12,43 @@ import { base } from "./Common.js";
 function Location(props) {
   const propLocation = props.location;
   const { csrfToken } = useContext(GlobalContext);
+  const [googleApiKey, setGoogleApiKey] = useState(undefined);
   const [ location, setLocation ] = useState(
     typeof propLocation === 'object' ? propLocation : undefined);
+  const [ error, setError ] = useState(null);
   const locationId =
     typeof propLocation === 'number' ? propLocation : undefined;
-  const [ error, setError ] = useState(null);
  
   useEffect(() => {
-    if (!csrfToken && (location || !locationId)) {
+    if (!csrfToken || googleApiKey) {
+      return;
+    }
+    const effect = async () => {
+      const res = await window.fetch(
+        `${base}/api/v1/locations/google-api-key`, {
+        method: 'GET',
+        cache: 'no-cache',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'application/json',
+          'CSRF-Token': csrfToken
+        }
+      });
+      const data = await res.json();
+      if (res.status >= 400) {
+        setError(data.message ? data.message : res.statusText);
+        return;
+      }
+      if (!data) {
+        return;
+      }
+      setGoogleApiKey(data.key);
+    }
+    effect();
+  }, [csrfToken, googleApiKey, setGoogleApiKey]);
+
+  useEffect(() => {
+    if (!csrfToken || location || !locationId) {
       return;
     }
 
@@ -49,33 +78,56 @@ function Location(props) {
 
   const createLocation = (location) => {
     const fields = Object.getOwnPropertyNames(location)
-      .map(field => <div key={field}
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          width: '100%'
-        }}>
-        <div style={{
-          display: 'flex',
-          alignSelf: 'flex-start',
-          fontWeight: 'bold',
-          minWidth: '8rem'
-        }}>{field}</div>
-        <div style={{
-          display: 'flex',
-          alignSelf: 'flex-start',
-          textAlign: 'left'
-        }}>
-          {location[field]}
+      .filter(field => location[field])
+      .map(field => {
+        return <div key={field}
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            width: '100%'
+          }}>
+          <div style={{
+            display: 'flex',
+            alignSelf: 'flex-start',
+            fontWeight: 'bold',
+            minWidth: '8rem'
+          }}>{field}</div>
+          <div style={{
+            display: 'flex',
+            alignSelf: 'flex-start',
+            textAlign: 'left'
+          }}>
+            { typeof location[field] === 'string' 
+            && location[field].match(/^http.*/) 
+            && <a href={location[field]}>{field.toUpperCase()}</a> }
+            { typeof location[field] === 'string'
+            && !location[field].match(/^http.*/) 
+            && location[field] }
+          </div>
         </div>
-      </div>
-      );
+      } );
     return <div key={location.id} style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center'
-    }}>{fields}</div>;
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      }}>{fields}</div>
+      { googleApiKey && <iframe
+        title={location.id}
+        width="256"
+        height="128"
+        style={{ border: "0" }}
+        loading="lazy"
+        referrerPolicy="no-referrer-when-downgrade"
+        src={`https://www.google.com/maps/embed/v1/place?key=${googleApiKey}&q=${encodeURIComponent(location.name.replace(/ +/g, '+'))},Hillsboro+OR`}
+      /> }
+    </div>;
   };
   
   return (

server/app.js

@@ -25,7 +25,7 @@ require('./console-line.js'); /* Monkey-patch console.log with line numbers */
  * set in the headers */
 app.set('trust proxy', true);
 app.use(session({
-  secret: 'm@g1x!c00k13$',
+  secret: config.get('sessions.store-secret'),
   maxAge: 30 * 24 * 60 * 60 * 1000, /* 1 month */
   resave: false,
   saveUninitialized: true,

server/config/default.json

@@ -15,5 +15,6 @@
   "sessions": {
     "db": "../db/sessions.db",
     "store-secret": "m@g1kc00ki3z!"
-  }
+  },
+  "googleApi": "AIzaSyBiBThAIMggko6Gjdxti3WKm4JnSxJrZLE"
 }

server/routes/locations.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const config = require('config');
 const express = require('express');
 const router = express.Router();
 
@@ -12,6 +13,10 @@ router.put('/', (req, res) => {
   res.status(200).send([ location ]);
 });
 
+router.get('/google-api-key', (req, res) => {
+  return res.status(200).send({ key: config.get('googleApi') });
+});
+
 router.get('/:locationId?', (req, res) => {
   const { locationId } = req.params;
   if (locationId) {