Home Explore Help
Sign In
kirkleon
/
hiram-status
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Clean up, adding a better polling hook

Kirk Trombley 5 years ago
parent
81d0805526
commit
69841223ab
9 changed files with 52 additions and 73 deletions
Split View Show Diff Stats
  1. 3 1
      .gitignore
  2. BIN
      public/favicon.ico
  3. 1 25
      public/index.html
  4. BIN
      public/logo192.png
  5. BIN
      public/logo512.png
  6. 3 19
      public/manifest.json
  7. 5 4
      src/components/shared/StatusMessage.jsx
  8. 6 24
      src/components/tiles/Gogs.jsx
  9. 34 0
      src/hooks/useSimplePollHealth.js

+ 3 - 1
.gitignore
View File 

@@ -23,4 +23,6 @@ yarn-debug.log*
 
 yarn-error.log*
 
 
 
-.vscode/
 
+.vscode/
 
+
 
+deploy.tgz

BIN
public/favicon.ico
View File


+ 1 - 25
public/index.html
View File 

@@ -9,35 +9,11 @@
 
       name="description"
 
       content="Web site created using create-react-app"
 
     />
 
-    <link rel="apple-touch-icon" href="logo192.png" />
 
-    <!--
 
-      manifest.json provides metadata used when your web app is installed on a
 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
-    -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <!--
 
-      Notice the use of %PUBLIC_URL% in the tags above.
 
-      It will be replaced with the URL of the `public` folder during the build.
 
-      Only files inside the `public` folder can be referenced from the HTML.
 
-
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
-      work correctly both with client-side routing and a non-root public URL.
 
-      Learn how to configure a non-root public URL by running `npm run build`.
 
-    -->
 
-    <title>React App</title>
 
+    <title>Hiram Status</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
-    <!--
 
-      This HTML file is a template.
 
-      If you open it directly in the browser, you will see an empty page.
 
-
 
-      You can add webfonts, meta tags, or analytics to this file.
 
-      The build step will place the bundled scripts into the <body> tag.
 
-
 
-      To begin the development, run `npm start` or `yarn start`.
 
-      To create a production bundle, use `npm run build` or `yarn build`.
 
-    -->
 
   </body>
 
 </html>

BIN
public/logo192.png
View File


BIN
public/logo512.png
View File


+ 3 - 19
public/manifest.json
View File 

@@ -1,23 +1,7 @@
 
 {
 
-  "short_name": "React App",
 
-  "name": "Create React App Sample",
 
-  "icons": [
 
-    {
 
-      "src": "favicon.ico",
 
-      "sizes": "64x64 32x32 24x24 16x16",
 
-      "type": "image/x-icon"
 
-    },
 
-    {
 
-      "src": "logo192.png",
 
-      "type": "image/png",
 
-      "sizes": "192x192"
 
-    },
 
-    {
 
-      "src": "logo512.png",
 
-      "type": "image/png",
 
-      "sizes": "512x512"
 
-    }	    
-  ],
 
+  "short_name": "Hiram Status",
 
+  "name": "Hiram Status",
 
+  "icons": [],
 
   "start_url": ".",
 
   "display": "standalone",
 
   "theme_color": "#000000",

+ 5 - 4
src/components/shared/StatusMessage.jsx
View File 

@@ -1,9 +1,10 @@
 
 import React from "react";
 
 
-export const UNKNOWN = 0;
 
-export const OK      = 1;
 
-export const BAD     = 2;
 
-export const FAILED  = 3;
 
+// enum for status
 
+export const UNKNOWN = 0; // check in progress
 
+export const OK      = 1; // check succeeded
 
+export const BAD     = 2; // check succeeded but service reports error
 
+export const FAILED  = 3; // check failed
 
 
 export const StatusMessage = ({ health }) => {
 
   switch (health) {

+ 6 - 24
src/components/tiles/Gogs.jsx
View File 

@@ -1,32 +1,14 @@
 
-import React, { useState, useEffect } from "react";
 
-import { UNKNOWN, OK, BAD, FAILED } from "../shared/StatusMessage";
 
+import React from "react";
 
 import Tile from "../shared/Tile";
 
+import useSimplePollHealth from "../../hooks/useSimplePollHealth";
 
 
 const update = 1000 * 60 * 20;
 
 
 export default () => {
 
-  const [health, setHealth] = useState(UNKNOWN);
 
-
 
-  useEffect(() => {
 
-    const check = async () => {
 
-      try {
 
-        const res = await fetch("https://kirkleon.ddns.net/gogs/");
 
-        if (res.ok) {
 
-          setHealth(OK);
 
-        } else {
 
-          setHealth(BAD);
 
-        }
 
-      } catch (err) {
 
-        setHealth(FAILED);
 
-      }
 
-    }
 
-
 
-    check();
 
-
 
-    const interval = setInterval(check, update);
 
-
 
-    return () => clearInterval(interval);
 
-  }, [])
 
+  const health = useSimplePollHealth({
 
+    url: "https://kirkleon.ddns.net/gogs/",
 
+    ms: update,
 
+  })
 
 
   return <Tile
 
     link="https://kirkleon.ddns.net/gogs/"

+ 34 - 0
src/hooks/useSimplePollHealth.js
View File 

@@ -0,0 +1,34 @@
 
+import { useState, useEffect, useCallback } from "react";
 
+import { UNKNOWN, OK, BAD, FAILED } from "../components/shared/StatusMessage";
 
+
 
+export default ({
 
+  url,
 
+  ms = 20000,
 
+  fetchOptions = {},
 
+}) => {
 
+  const [status, setStatus] = useState(UNKNOWN);
 
+  const checkServer = useCallback(async () => {
 
+    console.log(`Polling ${url}`);
 
+    try {
 
+      const res = await fetch(url, fetchOptions);
 
+      if (res.ok) {
 
+        setStatus(OK);
 
+      } else {
 
+        setStatus(BAD);
 
+      }
 
+    } catch (err) {
 
+      console.log(err);
 
+      setStatus(FAILED);
 
+    }
 
+  }, [url, fetchOptions]);
 
+
 
+  useEffect(() => {
 
+    checkServer();
 
+    
+    const interval = setInterval(checkServer, ms);
 
+
 
+    return () => clearInterval(interval);
 
+  }, [ms, checkServer]);
 
+
 
+  return status;
 
+}