From 67a1524062f1fc2e45a9f35dbb582e072315ef9e Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Tue, 15 Oct 2019 23:34:54 +0300
Subject: Initial fetchImages() implementation doesn't work due to CORS

---
 src/Geshem.js |  6 +-----
 src/Map.js    | 16 ++++++++++++++--
 src/config.js |  5 +++++
 3 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 src/config.js

(limited to 'src')

diff --git a/src/Geshem.js b/src/Geshem.js
index e272e3a..c2b6e6e 100644
--- a/src/Geshem.js
+++ b/src/Geshem.js
@@ -9,9 +9,6 @@ import Map from './Map'
 import './Geshem.css';
 import 'rc-slider/assets/index.css';
 
-
-const IMGS_BASE_URL = 'https://imgs.geshem.space/'
-
 function App() {
   return (
     <Router>
@@ -100,7 +97,6 @@ class OldGeshem extends Component {
 
   loadRadarData() {
     axios({
-      url: IMGS_BASE_URL + 'imgs.json',
       method: 'get',
     }).then((res) => {
       this.setState({
@@ -117,7 +113,7 @@ class OldGeshem extends Component {
   addRadarSource(res, i, url) {
     this.map.addSource(`radar-${res}-${i}`, {
       type: 'image',
-      url: IMGS_BASE_URL + url,
+      // url: IMGS_BASE_URL + url,
       coordinates: this.state.rasterCoords[res]
     })
   }
diff --git a/src/Map.js b/src/Map.js
index 78dbebf..0a8065b 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
+
+import { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN } from './config';
+
 import 'mapbox-gl/dist/mapbox-gl.css';
 
-const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';
 
 const Mapbox = ReactMapboxGl({
   accessToken: MAPBOX_ACCESS_TOKEN,
@@ -14,6 +16,16 @@ const Mapbox = ReactMapboxGl({
 function Map() {
   const [center, setCenter] = useState([35, 31.9]);
   const [zoom, setZoom] = useState([6.3]);
+  const [images, setImages] = useState({});
+
+  useEffect(() => {
+    const fetchImages = async() => {
+      const res = await fetch(`${IMAGES_BASE_URL}/imgs.json`);
+      const imgs = await res.json();
+      setImages(imgs);
+    };
+    fetchImages();
+  }, []);
 
   return (
     <Mapbox style="mapbox://styles/mapbox/dark-v9" center={center} zoom={zoom}
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..83f0192
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,5 @@
+const IMAGES_BASE_URL = 'https://imgs.geshem.space'
+
+const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';
+
+module.exports = { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN };
-- 
cgit v1.3.1