use swr library for API requests

also move past stream to separate API

components/past_stream_counter.js

@@ -0,0 +1,44 @@
+import React from "react"
+import useSWR from "swr"
+import styles from "../styles/Home.module.css"
+import { TextCountdown } from "./text_countdown"
+
+const COUNTDOWN_FORMATS = {
+    immediate: "", forFuture: "", forPast: `%@ without Fauna`,
+    days: (days) => (days > 1 ? `${days} days` : `${days} day`),
+    hours: (hours) => (hours > 1 ? `${hours} hours` : `${hours} hour`),
+    minutes: (minutes) => (minutes > 1 ? `${minutes} minutes` : `${minutes} minute`),
+    seconds: (seconds) => (seconds > 1 ? `${seconds} seconds` : `${seconds} second`),
+    separator: ", "
+}
+
+async function fetchPastStream(url) {
+    const response = await fetch(url)
+    const apiJSON = await response.json()
+
+    return {
+        link: apiJSON.result.videoLink,
+        title: apiJSON.result.title, 
+        date: new Date(apiJSON.result.endActual) 
+    }
+}
+
+export function PastStreamCounter(props) {
+    const { data, isValidating } = useSWR("/api/past_stream", fetchPastStream, {
+        revalidateOnFocus: false,
+        revalidateOnMount: true,
+        revalidateOnReconnect: false,
+        revalidateIfStale: true,
+        refreshInterval: 90000,
+    })
+
+    if (isValidating) {
+        return null
+    }
+
+    return <div className={`${styles.streamInfo} ${styles.pastStreamInfo}`}>
+        <a href={data?.link}>
+            <TextCountdown to={data?.date} formatStrings={COUNTDOWN_FORMATS} />
+        </a>
+    </div>
+}

components/video_box.js

@@ -0,0 +1,29 @@
+import React from "react"
+import styles from "../styles/Home.module.css"
+import { TextCountdown } from "./text_countdown"
+
+const COUNTDOWN_FORMATS = {
+    immediate: "(Now!)",
+    forFuture: "(in %@)",
+    forPast: "(%@ ago)",
+}
+
+export function VideoBox(props) {
+    return <div className={`${styles.videoBox}`}>
+        <div className={styles.vstack}>
+            {props.caption?
+                <p className={`${styles.videoBoxCaption}`}>
+                    {props.caption} {" "}
+                    {(props.showCountdown && props.info.startTime)? 
+                        <span className={styles.countdown}><TextCountdown to={props.info.startTime} formatStrings={COUNTDOWN_FORMATS} /></span>
+                        : null
+                    }
+                </p>
+                : null
+            }
+            <p><a href={props.info.link}>{props.info.title}</a></p>
+            {props.info.isMembersOnly ? <p>(for Faunatics only!)</p> : null}
+        </div>
+        {props.info.thumbnail ? <img src={props.info.thumbnail} alt="thumbnail" width={120} /> : null}
+    </div>
+}

pages/api/past_stream.js

@@ -0,0 +1,7 @@
+import { STREAM_STATUS, STREAM_TYPE } from "../../common/enums"
+import { getPastStream } from "../../server/data_sources"
+
+export default async function handler(req, res) {
+    const pastStream = await getPastStream()
+    return res.status(200).json({ result: pastStream })
+}

pages/api/stream_info.js

@@ -1,5 +1,5 @@
 import { STREAM_STATUS, STREAM_TYPE } from "../../common/enums"
-import { getDatabase, getKnownStreamData, getLiveStreamData, getPastStream, findExtraStreams } from "../../server/data_sources"
+import { getDatabase, getKnownStreamData, getLiveStreamData, findExtraStreams } from "../../server/data_sources"
 
 function chooseBest(streams) {
     if (!streams) {
@@ -38,7 +38,6 @@ export default async function handler(req, res) {
     }
 
     let useStreamInfo = await getKnownStreamData(coordinator)
-    const pastStreamPromise = getPastStream()
     if (!useStreamInfo) {
         const { result, error } = await getLiveStreamData(req.query.mock)
         if (error) {
@@ -60,24 +59,15 @@ export default async function handler(req, res) {
         }
     }
 
-    const pastResult = await pastStreamPromise
-    if (!pastResult && !useStreamInfo) {
-        // No useful information
-        res.status(200).json({ error: true, result: null })
+    if (!useStreamInfo) {
+        res.status(503).json({ error: true, result: null })
         await coordinator.teardown()
         return
     }
 
-    let responseValue = {
+    res.status(200).json({
         error: false, 
         result: {
-            ytStreamData: null,
-            pastStreamData: null,
-        }
-    }
-
-    if (useStreamInfo) {
-        responseValue.result.ytStreamData = {
             status: useStreamInfo.live,
             streamInfo: {
                 link: useStreamInfo.videoLink,
@@ -88,13 +78,6 @@ export default async function handler(req, res) {
                 streamType: useStreamInfo.streamType,
             }
         }
-    }
-
-    if (pastResult) {
-        responseValue.result.pastStreamData = pastResult
-    }
-
-    res.status(200).json(responseValue)
+    })
     await coordinator.teardown()
-    return
 }