From 44a1c5b7e62e83af4d670e011f5998b9b8aedfef Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Mon, 29 Aug 2022 10:24:51 +0300
Subject: Update all .tsx files and remove unused

---
 src/Datetime.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/Datetime.tsx

(limited to 'src/Datetime.tsx')

diff --git a/src/Datetime.tsx b/src/Datetime.tsx
new file mode 100644
index 0000000..9807211
--- /dev/null
+++ b/src/Datetime.tsx
@@ -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="datetime">
+      <div id="date">{date}</div>
+      <div id="time">{time}</div>
+    </div>
+  );
+}
+
+export default DateTime;
-- 
cgit v1.3.1


From c3398948ffa608d132503ab94790857f8d53891c Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Mon, 29 Aug 2022 11:41:21 +0300
Subject: Fix more types in components

---
 package-lock.json | 11 +++++++++++
 package.json      |  3 ++-
 src/Datetime.tsx  | 10 +++++++---
 src/Geshem.tsx    |  2 +-
 src/Slider.tsx    | 23 ++++++++++++++++-------
 5 files changed, 37 insertions(+), 12 deletions(-)

(limited to 'src/Datetime.tsx')

diff --git a/package-lock.json b/package-lock.json
index ae5c8a8..3669ffb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
+        "@types/luxon": "^3.0.0",
         "@types/node": "^16.11.56",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
@@ -3818,6 +3819,11 @@
       "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
       "dev": true
     },
+    "node_modules/@types/luxon": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.0.0.tgz",
+      "integrity": "sha512-Lx+EZoJxUKw4dp8uei9XiUVNlgkYmax5+ovqt6Xf3LzJOnWhlfJw/jLBmqfGVwOP/pDr4HT8bI1WtxK0IChMLw=="
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -21384,6 +21390,11 @@
       "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
       "dev": true
     },
+    "@types/luxon": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.0.0.tgz",
+      "integrity": "sha512-Lx+EZoJxUKw4dp8uei9XiUVNlgkYmax5+ovqt6Xf3LzJOnWhlfJw/jLBmqfGVwOP/pDr4HT8bI1WtxK0IChMLw=="
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
diff --git a/package.json b/package.json
index 7fc7111..0a02f1f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/luxon": "^3.0.0",
     "@types/node": "^16.11.56",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
@@ -58,4 +59,4 @@
     "serverless-python-requirements": "^5.0.1"
   },
   "proxy": "https://imgs.geshem.space/"
-}
\ No newline at end of file
+}
diff --git a/src/Datetime.tsx b/src/Datetime.tsx
index 9807211..84009a7 100644
--- a/src/Datetime.tsx
+++ b/src/Datetime.tsx
@@ -1,12 +1,16 @@
 import React from "react";
 import { DateTime as LuxonDateTime } from "luxon";
 
-function DateTime(props) {
-  let { images, slider } = props;
+interface DateTimeProps {
+  images: string[],
+  slider: number
+}
+
+function DateTime({ images, slider }: DateTimeProps) {
   let datetime = null;
 
   if (images.length > 0) {
-    const ds = images[slider].substr(5, 13);
+    const ds = images[slider].substring(5, 18);
     datetime = LuxonDateTime.fromFormat(ds, "yyyyMMdd/HHmm", {
       zone: "utc",
     }).setZone("Asia/Jerusalem");
diff --git a/src/Geshem.tsx b/src/Geshem.tsx
index a74af61..3664546 100644
--- a/src/Geshem.tsx
+++ b/src/Geshem.tsx
@@ -28,7 +28,7 @@ function Geshem({ date }: GeshemProps) {
   const [playback] = useState(
     date ||
     new URL(window.location.toString()).searchParams.get("history") ||
-    false
+    undefined
   );
   const [slider, setSlider] = useState(playback ? 143 : 9);
 
diff --git a/src/Slider.tsx b/src/Slider.tsx
index 9e86f66..64edb99 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -1,7 +1,16 @@
 import React from "react";
-import RcSlider from "rc-slider";
+import RcSlider, { SliderProps, SliderRef } from 'rc-slider/lib/Slider';
 
-function Slider(props) {
+// use workaround from: https://github.com/react-component/slider/issues/835#issuecomment-1201805736
+const CustomSlider = RcSlider as React.ForwardRefExoticComponent<SliderProps<number> & React.RefAttributes<SliderRef>>;
+
+interface GeshemSliderProps {
+  playback?: string,
+  slider: number,
+  setSlider: React.Dispatch<React.SetStateAction<number>>
+}
+
+function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
   const handleStyle = {
     height: 40,
     width: 40,
@@ -21,14 +30,14 @@ function Slider(props) {
 
   return (
     <div id="slider">
-      <RcSlider
-        mix={0}
-        max={props.playback ? 143 : 9}
-        defaultValue={props.slider}
+      <CustomSlider
+        min={0}
+        max={playback ? 143 : 9}
+        defaultValue={slider}
         handleStyle={handleStyle}
         railStyle={railStyle}
         trackStyle={trackStyle}
-        onChange={val => props.setSlider(val)}
+        onChange={val => setSlider(val)}
       />
     </div>
   );
-- 
cgit v1.3.1


From 43fff9d6f8e1b7ba38078804217bb98f6740af99 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Thu, 1 Sep 2022 09:31:33 +0300
Subject: Fix default exports

---
 src/Datetime.tsx    |  4 +---
 src/Geshem.test.tsx |  2 +-
 src/Geshem.tsx      | 12 +++++-------
 src/Map.tsx         |  7 ++-----
 src/Slider.tsx      |  4 +---
 src/index.tsx       |  2 +-
 6 files changed, 11 insertions(+), 20 deletions(-)

(limited to 'src/Datetime.tsx')

diff --git a/src/Datetime.tsx b/src/Datetime.tsx
index 84009a7..0a8fbcf 100644
--- a/src/Datetime.tsx
+++ b/src/Datetime.tsx
@@ -6,7 +6,7 @@ interface DateTimeProps {
   slider: number
 }
 
-function DateTime({ images, slider }: DateTimeProps) {
+export function DateTime({ images, slider }: DateTimeProps) {
   let datetime = null;
 
   if (images.length > 0) {
@@ -26,5 +26,3 @@ function DateTime({ images, slider }: DateTimeProps) {
     </div>
   );
 }
-
-export default DateTime;
diff --git a/src/Geshem.test.tsx b/src/Geshem.test.tsx
index 185b1f4..8e4652d 100644
--- a/src/Geshem.test.tsx
+++ b/src/Geshem.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Geshem from './Geshem';
+import { Geshem } from './Geshem';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
diff --git a/src/Geshem.tsx b/src/Geshem.tsx
index a0750d4..5210622 100644
--- a/src/Geshem.tsx
+++ b/src/Geshem.tsx
@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import Map from "./Map";
-import Slider from "./Slider";
-import DateTime from "./Datetime";
+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() {
+export function App() {
   return (
     <BrowserRouter>
       <Routes>
@@ -25,7 +25,7 @@ interface GeshemProps {
   date?: string
 }
 
-function Geshem({ date }: GeshemProps) {
+export function Geshem({ date }: GeshemProps) {
   const [images, setImages] = useState<string[]>([]);
   const [playback] = useState(
     date ||
@@ -77,5 +77,3 @@ function Geshem({ date }: GeshemProps) {
     </>
   );
 }
-
-export default App;
diff --git a/src/Map.tsx b/src/Map.tsx
index 62bebb2..7a49416 100644
--- a/src/Map.tsx
+++ b/src/Map.tsx
@@ -15,7 +15,7 @@ interface MapProps {
   images: string[],
 }
 
-function Map({ slider, images }: MapProps) {
+export function Map({ slider, images }: MapProps) {
   const mapContainer = useRef(null);
   const map = useRef<mapboxgl.Map>(null);
   const [lng, setLng] = useState(35);
@@ -60,7 +60,7 @@ function Map({ slider, images }: MapProps) {
       }} />
     </div>
   );
-
+}
   // return (
   //   <Mapbox >
   //     {images.map((img, i) => {
@@ -93,6 +93,3 @@ function Map({ slider, images }: MapProps) {
   //     })}
   //   </Mapbox>
   // );
-}
-
-export default Map;
diff --git a/src/Slider.tsx b/src/Slider.tsx
index 64edb99..4d287a2 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -10,7 +10,7 @@ interface GeshemSliderProps {
   setSlider: React.Dispatch<React.SetStateAction<number>>
 }
 
-function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
+export function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
   const handleStyle = {
     height: 40,
     width: 40,
@@ -42,5 +42,3 @@ function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
     </div>
   );
 }
-
-export default Slider;
diff --git a/src/index.tsx b/src/index.tsx
index 8d5df82..353cebb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './Geshem';
+import { App } from './Geshem';
 
 console.log()
 
-- 
cgit v1.3.1