diff --git a/client/.env b/client/.env index f333588..28a8ef8 100644 --- a/client/.env +++ b/client/.env @@ -2,4 +2,3 @@ PORT=3001 PUBLIC_URL=/ HOST=nuc.ketrenos.com DANGEROUSLY_DISABLE_HOST_CHECK='true' -LOG_LINE=1 \ No newline at end of file diff --git a/client/src/Common.js b/client/src/Common.js index d97ce6a..d38c22f 100644 --- a/client/src/Common.js +++ b/client/src/Common.js @@ -1,5 +1,6 @@ const base = process.env.PUBLIC_URL; + export { base }; diff --git a/client/src/Group.js b/client/src/Group.js index b0b8db1..5fcc014 100644 --- a/client/src/Group.js +++ b/client/src/Group.js @@ -81,15 +81,13 @@ function Group() { display: 'flex', flexDirection: 'column' }}> - - { error &&
{error}
} - { !error && <> -
Group: {groupId}
-
Locations
- { locations.map(location => - ) } - } -
+ { error &&
{error}
} + { !error && <> +
Group: {groupId}
+
Locations
+ { locations.map(location => + ) } + } ); } diff --git a/client/src/Location.js b/client/src/Location.js index fbcdc45..0432871 100644 --- a/client/src/Location.js +++ b/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 =>
-
{field}
-
- {location[field]} + .filter(field => location[field]) + .map(field => { + return
+
{field}
+
+ { typeof location[field] === 'string' + && location[field].match(/^http.*/) + && {field.toUpperCase()} } + { typeof location[field] === 'string' + && !location[field].match(/^http.*/) + && location[field] } +
-
- ); + } ); return
{fields}
; + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }}> +
{fields}
+ { googleApiKey &&