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/Slider.tsx | 37 +++++++++++++++++++++++++++++++++++++
1 file changed, 37 insertions(+)
create mode 100644 src/Slider.tsx
(limited to 'src/Slider.tsx')
diff --git a/src/Slider.tsx b/src/Slider.tsx
new file mode 100644
index 0000000..9e86f66
--- /dev/null
+++ b/src/Slider.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import RcSlider from "rc-slider";
+
+function Slider(props) {
+ const handleStyle = {
+ height: 40,
+ width: 40,
+ border: 0,
+ marginTop: -10,
+ boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)"
+ };
+
+ const railStyle = {
+ height: 20,
+ backgroundColor: "#3498db"
+ };
+
+ const trackStyle = {
+ display: "none"
+ };
+
+ return (
+
+ props.setSlider(val)}
+ />
+
+ );
+}
+
+export default Slider;
--
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/Slider.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 & React.RefAttributes>;
+
+interface GeshemSliderProps {
+ playback?: string,
+ slider: number,
+ setSlider: React.Dispatch>
+}
+
+function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
const handleStyle = {
height: 40,
width: 40,
@@ -21,14 +30,14 @@ function Slider(props) {
return (
- props.setSlider(val)}
+ onChange={val => setSlider(val)}
/>
);
--
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/Slider.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) {
);
}
-
-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 (
@@ -25,7 +25,7 @@ interface GeshemProps {
date?: string
}
-function Geshem({ date }: GeshemProps) {
+export function Geshem({ date }: GeshemProps) {
const [images, setImages] = useState([]);
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(null);
const [lng, setLng] = useState(35);
@@ -60,7 +60,7 @@ function Map({ slider, images }: MapProps) {
}} />
);
-
+}
// return (
//
// {images.map((img, i) => {
@@ -93,6 +93,3 @@ function Map({ slider, images }: MapProps) {
// })}
//
// );
-}
-
-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>
}
-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) {
);
}
-
-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
From ea1670f6e05d22c516d364072b7dde9bf3ebb5ae Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Thu, 1 Sep 2022 11:18:13 +0300
Subject: Extract playback slots to config
---
src/Geshem.tsx | 7 ++++---
src/Slider.tsx | 3 ++-
src/config.tsx | 4 ++++
3 files changed, 10 insertions(+), 4 deletions(-)
(limited to 'src/Slider.tsx')
diff --git a/src/Geshem.tsx b/src/Geshem.tsx
index 5210622..6e88f19 100644
--- a/src/Geshem.tsx
+++ b/src/Geshem.tsx
@@ -5,7 +5,7 @@ import { Map } from "./Map";
import { Slider } from "./Slider";
import { DateTime } from "./Datetime";
-import { IMAGES_BASE_URL } from "./config";
+import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "./config";
import "./Geshem.css";
import "rc-slider/assets/index.css";
@@ -25,6 +25,7 @@ interface GeshemProps {
date?: string
}
+
export function Geshem({ date }: GeshemProps) {
const [images, setImages] = useState([]);
const [playback] = useState(
@@ -32,7 +33,7 @@ export function Geshem({ date }: GeshemProps) {
new URL(window.location.toString()).searchParams.get("history") ||
undefined
);
- const [slider, setSlider] = useState(playback ? 143 : 9);
+ const [slider, setSlider] = useState(playback ? PLAYBACK_SLOTS : 9);
useEffect(() => {
const fetchImages = async () =>
@@ -43,7 +44,7 @@ export function Geshem({ date }: GeshemProps) {
const buildPlayback = async () => {
const date = playback;
- const hours = Array.from(Array(24).keys()).map(
+ const hours = Array.from(Array(PLAYBACK_HOURS).keys()).map(
h => `${String(h).padStart(2, "0")}`
);
const minutes = Array.from(Array(6).keys()).map(
diff --git a/src/Slider.tsx b/src/Slider.tsx
index 4d287a2..50223fc 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -1,5 +1,6 @@
import React from "react";
import RcSlider, { SliderProps, SliderRef } from 'rc-slider/lib/Slider';
+import { PLAYBACK_SLOTS } from "./config";
// use workaround from: https://github.com/react-component/slider/issues/835#issuecomment-1201805736
const CustomSlider = RcSlider as React.ForwardRefExoticComponent & React.RefAttributes>;
@@ -32,7 +33,7 @@ export function Slider({ playback, slider, setSlider }: GeshemSliderProps) {