Add DateTime component and remove unused vars

4 files changed, 37 insertions, 28 deletions

diff --git a/src/Datetime.js b/src/Datetime.js
new file mode 100644
index 0000000..df29ba1
--- /dev/null
+++ b/src/Datetime.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { DateTime as LuxonDateTime } from "luxon";
+
+function DateTime(props) {
+  let { images, slider } = props;
+  let datetime = null;
+
+  if (images.length > 0) {
+    const ds = images[slider].substr(5, 13);
+    datetime = LuxonDateTime.fromFormat(ds, "yyyyMMdd/HHmm", {
+      zone: "utc"
+    }).setZone("Asia/Jerusalem");
+  }
+
+  const date = datetime ? datetime.toFormat("dd-MM-y") : "";
+  const time = datetime ? datetime.toFormat("HH:mm") : "";
+
+  return (
+    <>
+      <div id="date">{date}</div>
+      <div id="time">{time}</div>
+    </>
+  );
+}
+
+export default DateTime;
diff --git a/src/Geshem.css b/src/Geshem.css
index 5e6e3d8..b99a95c 100644
--- a/src/Geshem.css
+++ b/src/Geshem.css
@@ -1,6 +1,7 @@
 #datetime {
   position: absolute;
-  margin: 20px 0px 0px 20px;
+  top: 20px;
+  left: 20px;
   color: white;
   font-family: monospace;
 }
diff --git a/src/Geshem.js b/src/Geshem.js
index c419605..6e09561 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 { DateTime } from "luxon";
-import axios from "axios";
 
 import Map from "./Map";
 import Slider from "./Slider";
+import DateTime from "./Datetime";
+
 import { IMAGES_BASE_URL } from "./config";
 
 import "./Geshem.css";
@@ -21,7 +21,7 @@ function App() {
 
 function Geshem(props) {
   const [images, setImages] = useState([]);
-  const [playback, setPlayback] = useState(
+  const [playback] = useState(
     props.match.params.date || window.location.search.slice(-8) || false
   );
   const [slider, setSlider] = useState(playback ? 143 : 9);
@@ -38,6 +38,9 @@ function Geshem(props) {
   return (
     <>
       <Map images={images} slider={slider} />
+      <div id="datetime">
+        <DateTime images={images} slider={slider} />
+      </div>
       <div id="slider">
         <Slider slider={slider} playback={playback} setSlider={setSlider} />
       </div>
@@ -126,24 +129,7 @@ class OldGeshem extends Component {
     this.initMap();
   }
 
-  getDateTime() {
-    const { imgs, res, slider } = this.state;
-
-    if (imgs === null) {
-      return null;
-    }
-
-    const ds = imgs[res][slider].substr(5, 13);
-    return DateTime.fromFormat(ds, "yyyyMMdd/HHmm", { zone: "utc" }).setZone(
-      "Asia/Jerusalem"
-    );
-  }
-
   render() {
-    const datetime = this.getDateTime();
-    const date = datetime ? datetime.toFormat("dd-MM-y") : "";
-    const time = datetime ? datetime.toFormat("HH:mm") : "";
-
     return (
       <div id="geshem">
         <div
@@ -151,10 +137,6 @@ class OldGeshem extends Component {
           ref={el => (this.mapContainer = el)}
           className="absolute top right left bottom"
         />
-        <div id="datetime">
-          <div id="date">{date}</div>
-          <div id="time">{time}</div>
-        </div>
       </div>
     );
   }
diff --git a/src/Map.js b/src/Map.js
index 783e8b3..843b9be 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useEffect } from "react";
+import React, { Fragment, useState } from "react";
 import ReactMapboxGl, { Layer, Source } from "react-mapbox-gl";
 
 import { MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES } from "./config";
@@ -13,8 +13,8 @@ const Mapbox = ReactMapboxGl({
 });
 
 function Map(props) {
-  const [center, setCenter] = useState([35, 31.9]);
-  const [zoom, setZoom] = useState([6.3]);
+  const [center] = useState([35, 31.9]);
+  const [zoom] = useState([6.3]);
 
   return (
     <Mapbox