A few fixes

.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

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 <div className={`container ${styles.container}`}>
         <table><tbody>
             {events}

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 (<div className={`container ${styles.container}`}>
         <table>
-            
             <tbody>
                 {departuresTable}
             </tbody>

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 <div className={`container ${styles.container}`}>
         <div className={styles.inner}>
             <table>

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<SongInfo|undefined>(undefined)
+    const [lastSongInfo, setLastSongInfo] = React.useState<SongInfo | undefined>(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") {

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()}`;
 

src/pages/index.tsx

@@ -17,6 +17,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
     updateBackground()
@@ -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 (<main style={{ backgroundImage: `url(${images[currentBg].default})` }}>
     <WeatherAndTimeContainer secrets={secrets.weather} />
     <Calendar secrets={secrets.calendar} />