From 4811b2062c4283ca2dfb30abb54a49142e71fbf7 Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Thu, 6 Jan 2022 21:40:57 +0100 Subject: [PATCH] A few fixes --- .drone.yml | 2 +- src/components/Calendar.tsx | 22 +++++++++++----------- src/components/DVB.tsx | 17 ++++++++--------- src/components/News.tsx | 16 ++++++++-------- src/components/Spotify.tsx | 6 +++--- src/components/WeatherAndTime.tsx | 12 ++++++------ src/pages/index.tsx | 12 ++++++------ 7 files changed, 43 insertions(+), 44 deletions(-) diff --git a/.drone.yml b/.drone.yml index af3bf65..1853b46 100644 --- a/.drone.yml +++ b/.drone.yml @@ -75,5 +75,5 @@ steps: #- docker login -u $${DOCKER_USER} -p $${DOCKER_PASS} - docker-compose -p infoscreen -f docker-compose.yml rm -s -v -f - docker rmi $${REGISTRY_HOST}/$${IMAGE} || true - - docker pull $${REGISTRY_HOST}/$${IMAGE} + - docker pull $${REGISTRY_HOST}/$${IMAGE}:latest - docker-compose -p infoscreen -f docker-compose.yml up --no-build -d \ No newline at end of file diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index f20b12c..f841c00 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -19,17 +19,6 @@ const Calendar = ({ secrets }: { secrets: SecretsCalendar }) => { const [token, setToken] = React.useState("") const [events, setEvents] = React.useState([]) - React.useEffect(() => { - requestToken().then(pullCalendar) - const calendarInterval = setInterval(pullCalendar, CALENDAR_REFRESH_INTERVAL); - const calendarTokenInterval = setInterval(requestToken, CALENDAR_TOKEN_REFRESH_INTERVAL); - - return () => { - clearInterval(calendarInterval); - clearInterval(calendarTokenInterval); - } - }, []) - const processEventData = (events: Event[]) => { const eventTable = []; let lastDate = ""; @@ -110,6 +99,17 @@ const Calendar = ({ secrets }: { secrets: SecretsCalendar }) => { setEvents(processEventData(events.items)); } + React.useEffect(() => { + requestToken().then(pullCalendar) + const calendarInterval = setInterval(pullCalendar, CALENDAR_REFRESH_INTERVAL); + const calendarTokenInterval = setInterval(requestToken, CALENDAR_TOKEN_REFRESH_INTERVAL); + + return () => { + clearInterval(calendarInterval); + clearInterval(calendarTokenInterval); + } + }, []) + return
{events} diff --git a/src/components/DVB.tsx b/src/components/DVB.tsx index 80ab66b..5704190 100644 --- a/src/components/DVB.tsx +++ b/src/components/DVB.tsx @@ -9,13 +9,6 @@ const DVB = ({ stopId }: { stopId: number }) => { const [departuresHead, setDeparturesHead] = React.useState("") const [departuresTable, setDeparturesTable] = React.useState([]) - React.useEffect(() => { - pullDepartures(); - const dvbInterval = setInterval(pullDepartures, DVB_REFRESH_INTERVAL); - - return () => clearInterval(dvbInterval); - }, []) - const processDepatures = (departures: Departure[]) => { const depTable = []; @@ -55,13 +48,19 @@ const DVB = ({ stopId }: { stopId: number }) => { }); const data = await response.json(); if (data.Name !== departuresHead) setDeparturesHead(data.Name); - console.log(data) + //console.log(data) processDepatures(data.Departures); } + React.useEffect(() => { + pullDepartures(); + const dvbInterval = setInterval(pullDepartures, DVB_REFRESH_INTERVAL); + + return () => clearInterval(dvbInterval); + }, []) + return (
- {departuresTable} diff --git a/src/components/News.tsx b/src/components/News.tsx index 14b6071..b65f579 100644 --- a/src/components/News.tsx +++ b/src/components/News.tsx @@ -8,13 +8,6 @@ const NEWS_REFRESH_INTERVAL = 15 * 60 * 1000; const News = () => { const [news, setNews] = React.useState([]) - React.useEffect(() => { - pullNews() - const newsInterval = setInterval(pullNews, NEWS_REFRESH_INTERVAL); - - return () => clearInterval(newsInterval); - }, []) - const processNews = (news: NewsType[], postillon: PostillonNews[]) => { const newsTable = [] @@ -49,7 +42,7 @@ const News = () => { const pullNews = async () => { const xml = new XMLParser(); const response = await fetch("https://www.tagesschau.de/xml/atom/"); - const feed: {title: string; updated: string;}[] = xml.parse(await response.text()).feed.entry; + const feed: { title: string; updated: string; }[] = xml.parse(await response.text()).feed.entry; // Feedburner does not allow cors but at least we get JSON const postResponse = await fetch("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2FrkEL"); @@ -58,6 +51,13 @@ const News = () => { processNews(feed, data.items); } + React.useEffect(() => { + pullNews() + const newsInterval = setInterval(pullNews, NEWS_REFRESH_INTERVAL); + + return () => clearInterval(newsInterval); + }, []) + return
diff --git a/src/components/Spotify.tsx b/src/components/Spotify.tsx index 1f7f7bf..4e06509 100644 --- a/src/components/Spotify.tsx +++ b/src/components/Spotify.tsx @@ -1,11 +1,11 @@ import * as React from "react" //import useWebSocket from "react-use-websocket"; -import {connect} from "mqtt" +import { connect } from "mqtt" import type { SecretsMQTT, SongInfo } from "../lib/interfaces" import * as styles from "../styles/containers/Spotify.module.css" const Spotify = ({ mqtt, Alternative }: { mqtt: SecretsMQTT, Alternative: any }) => { - const [lastSongInfo, setLastSongInfo] = React.useState(undefined) + const [lastSongInfo, setLastSongInfo] = React.useState(undefined) const handleMessage = (_topic: string, message: string) => { try { @@ -31,7 +31,7 @@ const Spotify = ({ mqtt, Alternative }: { mqtt: SecretsMQTT, Alternative: any }) client.subscribe("infoscreen/spotify") }) - return () => {client.end()} + return () => { client.end() } }, []) if (true || !lastSongInfo || lastSongInfo.playbackState !== "PLAYING") { diff --git a/src/components/WeatherAndTime.tsx b/src/components/WeatherAndTime.tsx index 2dc6330..f983c48 100644 --- a/src/components/WeatherAndTime.tsx +++ b/src/components/WeatherAndTime.tsx @@ -52,6 +52,12 @@ const WeatherAndTime = ({ secrets }: { secrets: SecretsWeather }) => { } }); + const pullWeather = () => { + fetch(`https://api.pirateweather.net/forecast/${secrets.apiKey}/${secrets.coords}?exclude=minutely,hourly&lang=de&units=ca`) + .then(resp => resp.json()) + .then(setWeather); + } + React.useEffect(() => { const dateInterval = setInterval(() => { const date = new Date() @@ -69,12 +75,6 @@ const WeatherAndTime = ({ secrets }: { secrets: SecretsWeather }) => { } }, []) - const pullWeather = () => { - fetch(`https://api.pirateweather.net/forecast/${secrets.apiKey}/${secrets.coords}?exclude=minutely,hourly&lang=de&units=ca`) - .then(resp => resp.json()) - .then(setWeather); - } - const time = `${date.getHours()}:${date.getMinutes().toString().padStart(2, "0")}`; const dateString = `${dowToString(date.getDay())}, der ${date.getDate()}. ${monthToString(date.getMonth())} ${date.getFullYear()}`; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9bcddf9..61be69a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,6 +16,12 @@ const images = importAll(require.context('../images/custom/bg/', false, /\.(png| const IndexPage = () => { const [currentBg, setCurrentBg] = React.useState(0); + + const updateBackground = () => { + let nextBg = Math.floor(Math.random() * images.length) + while (nextBg == currentBg) nextBg = Math.floor(Math.random() * images.length) + setCurrentBg(nextBg) + } React.useEffect(() => { // This effect is executed onload @@ -28,12 +34,6 @@ const IndexPage = () => { return () => clearInterval(interval); }, []) - const updateBackground = () => { - let nextBg = Math.floor(Math.random() * images.length) - while (nextBg == currentBg) nextBg = Math.floor(Math.random() * images.length) - setCurrentBg(nextBg) - } - return (