Cleanup lots of typescript and ref issues

3 files changed, 60 insertions, 60 deletions

diff --git a/app/components/Geshem.tsx b/app/components/Geshem.tsx
index 50659be..05ad308 100644
--- a/app/components/Geshem.tsx
+++ b/app/components/Geshem.tsx
@@ -8,32 +8,12 @@ import { Slider } from "./Slider";
 import { DateTime } from "./Datetime";
 import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "./config";
 
-// import "./Geshem.css";
 import "rc-slider/assets/index.css";
 
-// export function App() {
-//   return (
-//     <BrowserRouter>
-//       <Routes>
-//         <Route path="/" element={<Geshem />} />
-//         <Route path="/history/:date" element={<Geshem />} />
-//       </Routes>
-//     </BrowserRouter>
-//   );
-// }
-
-interface GeshemProps {
-  date?: string
-}
-
-export function Geshem({ date }: GeshemProps) {
+export function Geshem() {
   const [images, setImages] = useState<string[]>([]);
-  const [playback] = useState(
-    date ||
-    new URL(window.location.toString()).searchParams.get("history") ||
-    undefined
-  );
-  const [slider, setSlider] = useState(playback ? PLAYBACK_SLOTS : 9);
+  const [fragment, setFragment] = useState<string | undefined>(undefined);
+  const [slider, setSlider] = useState(fragment ? PLAYBACK_SLOTS : 9);
 
   useEffect(() => {
     const fetchImages = async () =>
@@ -43,7 +23,7 @@ export function Geshem({ date }: GeshemProps) {
         .then(setImages);
 
     const buildPlayback = async () => {
-      const date = playback;
+      const date = fragment;
       const hours = Array.from(Array(PLAYBACK_HOURS).keys()).map(
         h => `${String(h).padStart(2, "0")}`
       );
@@ -58,23 +38,39 @@ export function Geshem({ date }: GeshemProps) {
       setImages(paths);
     };
 
-    let timer: number;
-    if (playback) buildPlayback();
+    let timer: any;
+    if (fragment) buildPlayback();
     else {
       fetchImages();
-      timer = window.setInterval(fetchImages, 60 * 1000);
+      timer = setInterval(fetchImages, 60 * 1000);
     }
 
     return () => {
       if (timer !== undefined) clearInterval(timer);
     };
-  }, [playback]);
+  }, [fragment]);
+
+  useEffect(() => {
+    const fragment = window.location.hash.slice(1);
+    setFragment(fragment);
+
+    const handleHashChange = () => {
+      const newFragment = window.location.hash.slice(1);
+      setFragment(newFragment);
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+
+    return () => {
+      window.removeEventListener('hashchange', handleHashChange);
+    };
+  }, []);
 
   return (
     <>
       <Map images={images} slider={slider} />
       <DateTime images={images} slider={slider} />
-      <Slider slider={slider} playback={playback} setSlider={setSlider} />
+      <Slider slider={slider} playback={fragment} setSlider={setSlider} />
     </>
   );
 }
diff --git a/app/components/Map.tsx b/app/components/Map.tsx
index 39f28fa..426fd88 100644
--- a/app/components/Map.tsx
+++ b/app/components/Map.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-// @ts-ignore
-import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
+import mapboxgl from 'mapbox-gl';
 
 import {
   MAPBOX_ACCESS_TOKEN,
@@ -16,8 +15,8 @@ interface MapProps {
 }
 
 export function Map({ slider, images }: MapProps) {
-  const mapContainer = useRef(null);
-  const map = useRef<mapboxgl.Map>(null);
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
 
   const [lng] = useState(35);
   const [lat] = useState(31.9);
@@ -29,42 +28,45 @@ export function Map({ slider, images }: MapProps) {
   useEffect(() => {
     if (map.current) return;
 
-    map.current = new mapboxgl.Map({
-      accessToken: MAPBOX_ACCESS_TOKEN,
-      container: mapContainer.current,
-      style: "mapbox://styles/mapbox/dark-v9",
-      center: [lng, lat],
-      zoom: zoom,
-      minZoom: 5,
-      maxZoom: 10,
-      hash: false,
-    });
+    if (mapContainer.current) {
+      map.current = new mapboxgl.Map({
+        accessToken: MAPBOX_ACCESS_TOKEN,
+        container: mapContainer.current,
+        style: "mapbox://styles/mapbox/dark-v9",
+        center: [lng, lat],
+        zoom: zoom,
+        minZoom: 5,
+        maxZoom: 10,
+        hash: false,
+      });
+
+      map.current.on("style.load", () => {
+        setLoaded(true);
+      });
+    }
 
-    map.current.on("style.load", () => {
-      setLoaded(true);
-    });
   });
 
   useEffect(() => {
-    if (!loaded) return;
+    if (!loaded || !map.current) return;
 
     // remove old layers
     prevImages.forEach((img) => {
       if (!images.includes(img)) {
-        map.current.removeLayer(`layer-${img}`);
-        map.current.removeSource(`source-${img}`);
+        map.current?.removeLayer(`layer-${img}`);
+        map.current?.removeSource(`source-${img}`);
       }
     });
 
     // add new layers
-    images.forEach((img, i) => {
-      if (!prevImages.includes(img) && !map.current.getSource(`source-${img}`)) {
-        map.current.addSource(`source-${img}`, {
+    images.forEach(img => {
+      if (!prevImages.includes(img) && !map.current?.getSource(`source-${img}`)) {
+        map.current?.addSource(`source-${img}`, {
           type: "image",
           url: `${IMAGES_BASE_URL}/${img}`,
           coordinates: IMAGE_COORDINATES
         });
-        map.current.addLayer({
+        map.current?.addLayer({
           id: `layer-${img}`,
           source: `source-${img}`,
           type: "raster",
@@ -80,11 +82,15 @@ export function Map({ slider, images }: MapProps) {
   }, [loaded, prevImages, images]);
 
   useEffect(() => {
-    if (!loaded || !images.length) return;
-    images[slider] && map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85);
+    if (!loaded || !images.length || !map.current) return;
+
+    if (images[slider]) {
+      map.current?.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85)
+    };
+
     return () => {
       // callback will hide the previous layer with the previous slider value
-      map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0);
+      map.current?.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0);
     }
   }, [loaded, slider, images]);
 
diff --git a/app/components/config.tsx b/app/components/config.tsx
index 4dc3d6a..f69143d 100644
--- a/app/components/config.tsx
+++ b/app/components/config.tsx
@@ -1,13 +1,11 @@
-const hostname = window !== undefined && window.location && window.location.hostname;
-
-const PRODUCTION = hostname && hostname.includes("geshem");
+const PRODUCTION = process.env.NODE_ENV == "production";
 
 export const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : "";
 
 export const MAPBOX_ACCESS_TOKEN =
   "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw";
 
-export const IMAGE_COORDINATES = [
+export const IMAGE_COORDINATES: [[number, number], [number, number], [number, number], [number, number]] = [
   [31.7503896894, 34.4878044232],
   [37.8574239563, 34.5078463729],
   [37.7157066403, 29.4538271687],