Adding CommaFeed and abstracting the shared logic into a Tile component. Need to clean up the useJsonHealthCheck hook

src/App.css

@@ -14,7 +14,7 @@
   background-color: #252525;
   color: white;
   height: 4em;
-  width: 15%;
+  width: 15em;
   margin: 2em;
   padding-left: 0.5em;
   padding-bottom: 0.5em;

src/App.js

@@ -2,10 +2,12 @@ import React from 'react';
 import './App.css';
 import Teamspeak from "./components/tiles/Teamspeak";
 import TerrAssumptions from './components/tiles/TerrAssumptions';
+import CommaFeed from './components/tiles/CommaFeed';
 
 export default () => (
   <div className="App">
     <Teamspeak/>
     <TerrAssumptions/>
+    <CommaFeed/>
   </div>
 );

src/components/shared/Tile.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { StatusMessage } from "./StatusMessage";
+
+export default ({ link, title, health, data }) => (
+  <a className="tile" href={link}>
+    <span className="tile__title">{title}</span>
+    <StatusMessage health={health} />
+    {data ? <span className="tile__data">{data}</span> : null}
+  </a>
+);

src/components/tiles/CommaFeed.jsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import useJsonHealthCheck from "../../hooks/useJsonHealthCheck";
+import { UNKNOWN, OK, BAD, FAILED } from "../shared/StatusMessage";
+import Tile from "../shared/Tile";
+
+const update = 1000 * 60 * 20
+const homepage = "https://kirkleon.ddns.net/commafeed/";
+const unreadLookup = "https://kirkleon.ddns.net/commafeed/rest/category/entries?id=all&limit=20&offset=0&order=desc&readType=unread";
+
+export default () => {
+  const [{ unread, health }, setState] = useState({ unread: null, health: UNKNOWN });
+  useJsonHealthCheck(
+    unreadLookup,
+    ({ entries }) => setState({ unread: entries.length, health: OK }),
+    () => setState({ unread: null, health: BAD }),
+    () => setState({ unread: null, health: FAILED }),
+    update,
+    "include",
+  );
+
+  return <Tile
+    link={homepage}
+    title="CommaFeed"
+    health={health}
+    data={unread === null ? null : `${unread} items unread`}
+  />
+}

src/components/tiles/Teamspeak.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import useJsonHealthCheck from "../../hooks/useJsonHealthCheck";
-import { StatusMessage, UNKNOWN, OK, BAD, FAILED } from "../shared/StatusMessage";
+import { UNKNOWN, OK, BAD, FAILED } from "../shared/StatusMessage";
+import Tile from "../shared/Tile";
 
 export default () => {
   const [{ users, health }, setState] = useState({ users: null, health: UNKNOWN });
@@ -10,12 +11,11 @@ export default () => {
     () => setState({ users: null, health: BAD }),
     () => setState({ users: null, health: FAILED }),
   );
-  
-  return (
-    <a className="tile" href="https://kirkleon.ddns.net/teamspeak/">
-      <span className="tile__title">Teamspeak Server</span>
-      <StatusMessage health={health} />
-      <span className="tile__data">{users === null ? "-" : `${users} users online`}</span>
-    </a>
-  );
+
+  return <Tile
+    link="https://kirkleon.ddns.net/teamspeak/"
+    title="Teamspeak Server"
+    health={health}
+    data={users === null ? null : `${users} users online`}
+  />
 }

src/components/tiles/TerrAssumptions.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import useJsonHealthCheck from "../../hooks/useJsonHealthCheck";
-import { StatusMessage, UNKNOWN, OK, BAD, FAILED } from "../shared/StatusMessage";
+import { UNKNOWN, OK, BAD, FAILED } from "../shared/StatusMessage";
+import Tile from "../shared/Tile";
 
 export default () => {
   const [health, setHealth] = useState(UNKNOWN);
@@ -10,11 +11,10 @@ export default () => {
     () => setHealth(BAD),
     () => setHealth(FAILED),
   );
-  
-  return (
-    <a className="tile" href="https://kirkleon.ddns.net/terrassumptions/">
-      <span className="tile__title">TerrAssumptions</span>
-      <StatusMessage health={health} />
-    </a>
-  );
+
+  return <Tile
+    link="https://kirkleon.ddns.net/terrassumptions/"
+    title="TerrAssumptions"
+    health={health}
+  />
 }

src/hooks/useJsonHealthCheck.js

@@ -1,13 +1,20 @@
 import { useEffect, useCallback } from "react";
 
-export default (url, handleOk, handleFailed, handleError, ms=20000) => {
+export default (
+  url, 
+  handleOk, 
+  handleFailed, 
+  handleError, 
+  ms = 20000,
+  credentials = null,
+) => {
   const callbackOk = useCallback(handleOk, []);
   const callbackFailed = useCallback(handleFailed, []);
   const callbackError = useCallback(handleError, []);
   useEffect(() => {
     const checkServer = async () => {
       try {
-        const res = await fetch(url);
+        const res = await fetch(url, credentials ? { credentials } : {});
         if (res.ok) {
           const js = await res.json();
           callbackOk(js);
@@ -25,5 +32,5 @@ export default (url, handleOk, handleFailed, handleError, ms=20000) => {
     const interval = setInterval(checkServer, ms);
 
     return () => clearInterval(interval);
-  }, [url, callbackOk, callbackFailed, callbackError, ms]);
+  }, [url, callbackOk, callbackFailed, callbackError, ms, credentials]);
 };