Initial fetchImages() implementation doesn't work due to CORS

1 files changed, 14 insertions, 2 deletions

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}