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

---
 src/Datetime.tsx | 10 +++++++---
 src/Geshem.tsx   |  2 +-
 src/Slider.tsx   | 23 ++++++++++++++++-------
 3 files changed, 24 insertions(+), 11 deletions(-)

(limited to 'src')

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