src/Geshem.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

import React, { useState, useEffect } from "react";
import { BrowserRouter, Route } from "react-router-dom";

import Map from "./Map";
import Slider from "./Slider";
import DateTime from "./Datetime";

import { IMAGES_BASE_URL } from "./config";

import "./Geshem.css";
import "rc-slider/assets/index.css";

function App() {
  return (
    <BrowserRouter>
      <Route path="/" element={<Geshem />} />
      <Route path="/history/:date" element={<Geshem />} />
    </BrowserRouter>
  );
}

interface GeshemProps {
  date?: string
}

function Geshem({ date }: GeshemProps) {
  const [images, setImages] = useState<string[]>([]);
  const [playback] = useState(
    date ||
    new URL(window.location.toString()).searchParams.get("history") ||
    undefined
  );
  const [slider, setSlider] = useState(playback ? 143 : 9);

  useEffect(() => {
    const fetchImages = async () =>
      fetch(`${IMAGES_BASE_URL}/imgs.json`)
        .then(res => res.json())
        .then(imgs => imgs["280"])
        .then(setImages);

    const buildPlayback = async () => {
      const date = playback;
      const hours = Array.from(Array(24).keys()).map(
        h => `${String(h).padStart(2, "0")}`
      );
      const minutes = Array.from(Array(6).keys()).map(
        m => `${String(m * 10).padStart(2, "0")}`
      );
      const paths = hours.reduce<string[]>(
        (acc, h) =>
          acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)),
        []
      );
      setImages(paths);
    };

    let timer: number;
    if (playback) buildPlayback();
    else {
      fetchImages();
      timer = window.setInterval(fetchImages, 60 * 1000);
    }

    return () => {
      if (timer !== undefined) clearInterval(timer);
    };
  }, [playback]);

  return (
    <>
      <Map images={images} slider={slider} />
      <DateTime images={images} slider={slider} />
      <Slider slider={slider} playback={playback} setSlider={setSlider} />
    </>
  );
}

export default App;