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.js | 26 ---------- src/Datetime.tsx | 26 ++++++++++ src/Geshem.js | 94 ---------------------------------- src/Geshem.test.js | 9 ---- src/Geshem.test.tsx | 9 ++++ src/Geshem.tsx | 94 ++++++++++++++++++++++++++++++++++ src/Map.js | 65 ------------------------ src/Map.tsx | 65 ++++++++++++++++++++++++ src/Slider.js | 37 -------------- src/Slider.tsx | 37 ++++++++++++++ src/config.js | 17 ------- src/config.tsx | 17 +++++++ src/index.js | 14 ----- src/index.tsx | 13 +++++ src/react-app-env.d.ts | 1 + src/serviceWorker.js | 135 ------------------------------------------------- src/setupTests.js | 5 -- src/setupTests.ts | 5 ++ 18 files changed, 267 insertions(+), 402 deletions(-) delete mode 100644 src/Datetime.js create mode 100644 src/Datetime.tsx delete mode 100644 src/Geshem.js delete mode 100644 src/Geshem.test.js create mode 100644 src/Geshem.test.tsx create mode 100644 src/Geshem.tsx delete mode 100644 src/Map.js create mode 100644 src/Map.tsx delete mode 100644 src/Slider.js create mode 100644 src/Slider.tsx delete mode 100644 src/config.js create mode 100644 src/config.tsx delete mode 100644 src/index.js create mode 100644 src/index.tsx create mode 100644 src/react-app-env.d.ts delete mode 100644 src/serviceWorker.js delete mode 100644 src/setupTests.js create mode 100644 src/setupTests.ts (limited to 'src') diff --git a/src/Datetime.js b/src/Datetime.js deleted file mode 100644 index 9807211..0000000 --- a/src/Datetime.js +++ /dev/null @@ -1,26 +0,0 @@ -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 ( -
-
{date}
-
{time}
-
- ); -} - -export default DateTime; 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 ( +
+
{date}
+
{time}
+
+ ); +} + +export default DateTime; diff --git a/src/Geshem.js b/src/Geshem.js deleted file mode 100644 index 1eecdd0..0000000 --- a/src/Geshem.js +++ /dev/null @@ -1,94 +0,0 @@ -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; diff --git a/src/Geshem.test.js b/src/Geshem.test.js deleted file mode 100644 index 185b1f4..0000000 --- a/src/Geshem.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Geshem from './Geshem'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/Geshem.test.tsx b/src/Geshem.test.tsx new file mode 100644 index 0000000..185b1f4 --- /dev/null +++ b/src/Geshem.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Geshem from './Geshem'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); 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; diff --git a/src/Map.js b/src/Map.js deleted file mode 100644 index c39e1ac..0000000 --- a/src/Map.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { Fragment, useState } from "react"; -import ReactMapboxGl, { Layer, Source } from "react-mapbox-gl"; - -import { - MAPBOX_ACCESS_TOKEN, - IMAGE_COORDINATES, - IMAGES_BASE_URL -} from "./config"; - -import "mapbox-gl/dist/mapbox-gl.css"; - -const Mapbox = ReactMapboxGl({ - accessToken: MAPBOX_ACCESS_TOKEN, - minZoom: 5, - maxZoom: 10, - hash: false -}); - -function Map(props) { - const [center] = useState([35, 31.9]); - const [zoom] = useState([6.3]); - - return ( - - {props.images.map((img, i) => { - const id = `radar-280-${i}`; - return ( - - - - - ); - })} - - ); -} - -export default Map; diff --git a/src/Map.tsx b/src/Map.tsx new file mode 100644 index 0000000..c39e1ac --- /dev/null +++ b/src/Map.tsx @@ -0,0 +1,65 @@ +import React, { Fragment, useState } from "react"; +import ReactMapboxGl, { Layer, Source } from "react-mapbox-gl"; + +import { + MAPBOX_ACCESS_TOKEN, + IMAGE_COORDINATES, + IMAGES_BASE_URL +} from "./config"; + +import "mapbox-gl/dist/mapbox-gl.css"; + +const Mapbox = ReactMapboxGl({ + accessToken: MAPBOX_ACCESS_TOKEN, + minZoom: 5, + maxZoom: 10, + hash: false +}); + +function Map(props) { + const [center] = useState([35, 31.9]); + const [zoom] = useState([6.3]); + + return ( + + {props.images.map((img, i) => { + const id = `radar-280-${i}`; + return ( + + + + + ); + })} + + ); +} + +export default Map; diff --git a/src/Slider.js b/src/Slider.js deleted file mode 100644 index 9e86f66..0000000 --- a/src/Slider.js +++ /dev/null @@ -1,37 +0,0 @@ -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; 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; diff --git a/src/config.js b/src/config.js deleted file mode 100644 index f74382c..0000000 --- a/src/config.js +++ /dev/null @@ -1,17 +0,0 @@ -const hostname = window && window.location && window.location.hostname; - -const PRODUCTION = hostname.includes("geshem"); - -const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : ""; - -const MAPBOX_ACCESS_TOKEN = - "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw"; - -const IMAGE_COORDINATES = [ - [31.7503896894, 34.4878044232], - [37.8574239563, 34.5078463729], - [37.7157066403, 29.4538271687], - [31.9347389087, 29.4373462909] -]; - -module.exports = { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES }; diff --git a/src/config.tsx b/src/config.tsx new file mode 100644 index 0000000..f74382c --- /dev/null +++ b/src/config.tsx @@ -0,0 +1,17 @@ +const hostname = window && window.location && window.location.hostname; + +const PRODUCTION = hostname.includes("geshem"); + +const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : ""; + +const MAPBOX_ACCESS_TOKEN = + "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw"; + +const IMAGE_COORDINATES = [ + [31.7503896894, 34.4878044232], + [37.8574239563, 34.5078463729], + [37.7157066403, 29.4538271687], + [31.9347389087, 29.4373462909] +]; + +module.exports = { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES }; diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 6203150..0000000 --- a/src/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './Geshem'; - -console.log() - - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..8d5df82 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './Geshem'; + +console.log() + +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); +root.render( + + + +); \ No newline at end of file diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/serviceWorker.js b/src/serviceWorker.js deleted file mode 100644 index 85daadc..0000000 --- a/src/serviceWorker.js +++ /dev/null @@ -1,135 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read http://bit.ly/CRA-PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit http://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } -} diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; -- cgit v1.3.1