Add slider functionality

3 files changed, 56 insertions, 87 deletions

diff --git a/src/Geshem.js b/src/Geshem.js
index f9c0aee..c419605 100644
--- a/src/Geshem.js
+++ b/src/Geshem.js
@@ -1,10 +1,10 @@
 import React, { useState, useEffect, Component } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
-import Slider from "rc-slider";
 import { DateTime } from "luxon";
 import axios from "axios";
 
 import Map from "./Map";
+import Slider from "./Slider";
 import { IMAGES_BASE_URL } from "./config";
 
 import "./Geshem.css";
@@ -19,8 +19,12 @@ function App() {
   );
 }
 
-function Geshem() {
+function Geshem(props) {
   const [images, setImages] = useState([]);
+  const [playback, setPlayback] = useState(
+    props.match.params.date || window.location.search.slice(-8) || false
+  );
+  const [slider, setSlider] = useState(playback ? 143 : 9);
 
   useEffect(() => {
     const fetchImages = async () => {
@@ -31,34 +35,17 @@ function Geshem() {
     fetchImages();
   }, []);
 
-  return <Map images={images} />;
+  return (
+    <>
+      <Map images={images} slider={slider} />
+      <div id="slider">
+        <Slider slider={slider} playback={playback} setSlider={setSlider} />
+      </div>
+    </>
+  );
 }
 
 class OldGeshem extends Component {
-  constructor(props) {
-    super(props);
-    const playback =
-      props.match.params.date || window.location.search.slice(-8) || false;
-    this.state = {
-      mapLoaded: false,
-      imgs: null,
-      playback: playback,
-      res: 280,
-      slider: playback ? 143 : 9,
-      lng: 35,
-      lat: 31.9,
-      zoom: 6.3,
-      rasterCoords: {
-        280: [
-          [31.7503896894, 34.4878044232],
-          [37.8574239563, 34.5078463729],
-          [37.7157066403, 29.4538271687],
-          [31.9347389087, 29.4373462909]
-        ]
-      }
-    };
-  }
-
   getGeolocation() {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(pos => {
@@ -78,16 +65,6 @@ class OldGeshem extends Component {
     }
   }
 
-  loadSources() {
-    const { imgs } = this.state;
-    let i = 0;
-    while (i < imgs["280"].length) {
-      this.addRadarSource("280", i, imgs["280"][i]);
-      this.addRadarLayer("280", i++);
-    }
-    this.showRadarLayer("280", 9);
-  }
-
   loadPlaybackData() {
     const date = this.state.playback;
     const hours = [...Array(24).keys()].map(
@@ -108,23 +85,6 @@ class OldGeshem extends Component {
     }
   }
 
-  loadRadarData() {
-    axios({
-      method: "get"
-    })
-      .then(res => {
-        this.setState({
-          imgs: res.data
-        });
-        if (this.state.mapLoaded) {
-          this.loadSources();
-        }
-      })
-      .catch(function(error) {
-        console.log(error);
-      });
-  }
-
   showRadarLayer(res, i) {
     this.map.setPaintProperty(`radar-${res}-${i}`, "raster-opacity", 0.85);
   }
@@ -180,24 +140,6 @@ class OldGeshem extends Component {
   }
 
   render() {
-    const handleStyle = {
-      height: 40,
-      width: 40,
-      border: 0,
-      marginTop: -10,
-      marginLeft: -20,
-      boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)"
-    };
-
-    const railStyle = {
-      height: 20,
-      backgroundColor: "#3498db"
-    };
-
-    const trackStyle = {
-      display: "none"
-    };
-
     const datetime = this.getDateTime();
     const date = datetime ? datetime.toFormat("dd-MM-y") : "";
     const time = datetime ? datetime.toFormat("HH:mm") : "";
@@ -213,17 +155,6 @@ class OldGeshem extends Component {
           <div id="date">{date}</div>
           <div id="time">{time}</div>
         </div>
-        <div id="slider">
-          <Slider
-            mix={0}
-            max={this.state.playback ? 143 : 9}
-            defaultValue={this.state.slider}
-            handleStyle={handleStyle}
-            railStyle={railStyle}
-            trackStyle={trackStyle}
-            onChange={val => this.onChangeSlider(val)}
-          />
-        </div>
       </div>
     );
   }
diff --git a/src/Map.js b/src/Map.js
index 4937298..783e8b3 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { Fragment, useState, useEffect } from "react";
 import ReactMapboxGl, { Layer, Source } from "react-mapbox-gl";
 
 import { MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES } from "./config";
@@ -29,9 +29,10 @@ function Map(props) {
       {props.images.map((img, i) => {
         const id = `radar-280-${i}`;
         return (
-          <>
+          <Fragment key={`image-${id}`}>
             <Source
               id={id}
+              key={`source-${id}`}
               tileJsonSource={{
                 type: "image",
                 url: img,
@@ -40,16 +41,17 @@ function Map(props) {
             />
             <Layer
               id={id}
+              key={`layer-${id}`}
               sourceId={id}
               type="raster"
               paint={{
-                "raster-opacity": i == 0 ? 1 : 0,
+                "raster-opacity": i == props.slider ? 1 : 0,
                 "raster-opacity-transition": {
                   duration: 0
                 }
               }}
             />
-          </>
+          </Fragment>
         );
       })}
     </Mapbox>
diff --git a/src/Slider.js b/src/Slider.js
new file mode 100644
index 0000000..b7267e1
--- /dev/null
+++ b/src/Slider.js
@@ -0,0 +1,36 @@
+import React, { useState, useEffect, Component } from "react";
+import RcSlider from "rc-slider";
+
+function Slider(props) {
+  const handleStyle = {
+    height: 40,
+    width: 40,
+    border: 0,
+    marginTop: -10,
+    marginLeft: -20,
+    boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)"
+  };
+
+  const railStyle = {
+    height: 20,
+    backgroundColor: "#3498db"
+  };
+
+  const trackStyle = {
+    display: "none"
+  };
+
+  return (
+    <RcSlider
+      mix={0}
+      max={props.playback ? 143 : 9}
+      defaultValue={props.slider}
+      handleStyle={handleStyle}
+      railStyle={railStyle}
+      trackStyle={trackStyle}
+      onChange={val => props.setSlider(val)}
+    />
+  );
+}
+
+export default Slider;