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/Geshem.tsx | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 src/Geshem.tsx (limited to 'src/Geshem.tsx') diff --git a/src/Geshem.tsx b/src/Geshem.tsx new file mode 100644 index 0000000..1eecdd0 --- /dev/null +++ b/src/Geshem.tsx @@ -0,0 +1,94 @@ +import React, { useState, useEffect } from "react"; +import { BrowserRouter as Router, 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 ( + + + + + ); +} + +function Geshem(props) { + const [images, setImages] = useState([]); + const [playback] = useState( + props.match.params.date || + new URL(window.location).searchParams.get("history") || + false + ); + 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(24).keys()].map( + h => `${String(h).padStart(2, "0")}` + ); + const minutes = [...Array(6).keys()].map( + m => `${String(m * 10).padStart(2, "0")}` + ); + const paths = hours.reduce( + (acc, h) => + acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)), + [] + ); + setImages(paths); + }; + + let timer; + if (playback) buildPlayback(); + else { + fetchImages(); + timer = setInterval(fetchImages, 60 * 1000); + } + + return () => { + if (timer !== undefined) clearInterval(timer); + }; + }, [playback]); + + return ( + <> + + + + + ); +} + +function getGeolocation() { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(pos => { + const { longitude, latitude } = pos.coords; + this.setState({ + lng: longitude, + lat: latitude, + zoom: 11 + }); + if (this.state.mapLoaded) { + this.map.jumpTo({ + center: [longitude, latitude], + zoom: 11 + }); + } + }); + } +} + +export default App; -- cgit v1.3.1 From 842d239f40310923cb8d9f53e80167dca0aebff9 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 11:14:58 +0300 Subject: Fix types in Geshem --- src/Geshem.tsx | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'src/Geshem.tsx') diff --git a/src/Geshem.tsx b/src/Geshem.tsx index 1eecdd0..5fda053 100644 --- a/src/Geshem.tsx +++ b/src/Geshem.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { BrowserRouter as Router, Route } from "react-router-dom"; +import { BrowserRouter, Route } from "react-router-dom"; import Map from "./Map"; import Slider from "./Slider"; @@ -12,18 +12,22 @@ import "rc-slider/assets/index.css"; function App() { return ( - - - - + + } /> + } /> + ); } -function Geshem(props) { - const [images, setImages] = useState([]); +interface GeshemProps { + date?: string +} + +function Geshem({ date }: GeshemProps) { + const [images, setImages] = useState([]); const [playback] = useState( - props.match.params.date || - new URL(window.location).searchParams.get("history") || + date || + new URL(window.location.toString()).searchParams.get("history") || false ); const [slider, setSlider] = useState(playback ? 143 : 9); @@ -37,13 +41,13 @@ function Geshem(props) { const buildPlayback = async () => { const date = playback; - const hours = [...Array(24).keys()].map( + const hours = Array.from(Array(24).keys()).map( h => `${String(h).padStart(2, "0")}` ); - const minutes = [...Array(6).keys()].map( + const minutes = Array.from(Array(6).keys()).map( m => `${String(m * 10).padStart(2, "0")}` ); - const paths = hours.reduce( + const paths = hours.reduce( (acc, h) => acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)), [] @@ -51,11 +55,11 @@ function Geshem(props) { setImages(paths); }; - let timer; + let timer: number; if (playback) buildPlayback(); else { fetchImages(); - timer = setInterval(fetchImages, 60 * 1000); + timer = window.setInterval(fetchImages, 60 * 1000); } return () => { -- cgit v1.3.1 From 06c7f6f6e17ce089800ea4ba14ee02924a040223 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 11:15:12 +0300 Subject: Remove unused geolocation func --- src/Geshem.tsx | 19 ------------------- 1 file changed, 19 deletions(-) (limited to 'src/Geshem.tsx') diff --git a/src/Geshem.tsx b/src/Geshem.tsx index 5fda053..a74af61 100644 --- a/src/Geshem.tsx +++ b/src/Geshem.tsx @@ -76,23 +76,4 @@ function Geshem({ date }: GeshemProps) { ); } -function getGeolocation() { - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(pos => { - const { longitude, latitude } = pos.coords; - this.setState({ - lng: longitude, - lat: latitude, - zoom: 11 - }); - if (this.state.mapLoaded) { - this.map.jumpTo({ - center: [longitude, latitude], - zoom: 11 - }); - } - }); - } -} - export default App; -- 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/Geshem.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 726393779822333d04d76a2c7fb5c9e121fb830f Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 17:34:52 +0300 Subject: Fix Routes --- src/Geshem.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src/Geshem.tsx') diff --git a/src/Geshem.tsx b/src/Geshem.tsx index 3664546..a0750d4 100644 --- a/src/Geshem.tsx +++ b/src/Geshem.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { BrowserRouter, Route } from "react-router-dom"; +import { BrowserRouter, Route, Routes } from "react-router-dom"; import Map from "./Map"; import Slider from "./Slider"; @@ -13,8 +13,10 @@ import "rc-slider/assets/index.css"; function App() { return ( - } /> - } /> + + } /> + } /> + ); } -- 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/Geshem.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/Geshem.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) {