Notify user when there is a new version available

.eslintrc.yml

@@ -15,4 +15,4 @@ parserOptions:
 plugins:
   - react
   - "@typescript-eslint"
-rules: { "react/prop-types": 1 }
+rules: { "react/prop-types": 0 }

.vscode/settings.json

@@ -1,5 +1,10 @@
 {
     "cSpell.words": [
-        "Dropzone"
+        "Dropzone",
+        "bloombooks",
+        "bloompub",
+        "octokit",
+        "repos",
+        "toastify"
     ]
 }

package.json

@@ -74,15 +74,18 @@
     }
   },
   "dependencies": {
+    "@octokit/rest": "^18.0.0",
     "@types/archiver": "^3.0.0",
     "archiver": "^3.1.1",
     "bloom-player": "^1.1.49",
+    "compare-versions": "^3.6.0",
     "electron-log": "^4.2.2",
     "electron-updater": "^4.3.1",
     "fs": "^0.0.1-security",
     "path": "^0.12.7",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-toastify": "^6.0.6",
     "temp": "^0.9.1",
     "unzipper": "^0.10.8"
   },

src/main/index.ts

@@ -45,7 +45,9 @@ function createWindow() {
     mainWindow.webContents.openDevTools();
   }
 
-  setupAutoUpdate();
+  /* This is still in progress, held up while we decide if we can put the necessary certificate in github
+    secrets. Without that, we can't sign, and without signing, we can' auto update anyways.
+    setupAutoUpdate();*/
 
   mainWindow.on("closed", () => {
     mainWindow = null;

src/renderer/App.tsx

@@ -1,15 +1,18 @@
 import React, { useEffect, useState } from "react";
 import "./App.css";
+// I couldn't get   import 'react-toastify/dist/ReactToastify.css'; to work, so I copied it in.
+import "./ReactToastify.min.css";
 import { hot } from "react-hot-loader/root";
-
+import { ToastContainer } from "react-toastify";
 import * as fs from "fs";
 import * as unzipper from "unzipper";
 import * as temp from "temp";
+import { useCheckForNewVersion } from "./useCheckForNewVersion";
 
 const bloomPlayerHtml = "bloomplayer.htm";
 const App: React.FunctionComponent<{ zipFilePath: string }> = (props) => {
   const [htmPath, setHtmPath] = useState("");
-
+  useCheckForNewVersion();
   useEffect(() => {
     console.log("bloom htmlpath=" + bloomPlayerHtml);
     const slashIndex = props.zipFilePath
@@ -50,6 +53,7 @@ const App: React.FunctionComponent<{ zipFilePath: string }> = (props) => {
           src={`${bloomPlayerHtml}?allowToggleAppBar=true&url=file:///${htmPath}`}
         />
       )}
+      <ToastContainer />
     </div>
   );
 }; ////https://s3.amazonaws.com/bloomharvest/benjamin%40aconnectedplanet.org%2f130b6829-5367-4e5c-80d7-ec588aae5281/bloomdigital%2findex.htm"

src/renderer/useCheckForNewVersion.ts

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import { Octokit } from "@octokit/rest";
+import compareVersions from "compare-versions";
+import { toast } from "react-toastify";
+import { shell } from "electron";
+export function useCheckForNewVersion() {
+  useEffect(() => {
+    const octokit = new Octokit();
+    octokit.repos
+      .getLatestRelease({ owner: "bloombooks", repo: "bloompub-viewer" })
+      .then((data) => {
+        //strip out the leading "v" in "v1.2.3";
+        const version = data.data.tag_name.replace(/v/gi, "");
+
+        if (
+          compareVersions(version, require("../../package.json").version) > 0
+        ) {
+          toast.success(
+            `Click to get new version of BloomPub Viewer (${data.data.name})`,
+            {
+              position: "bottom-right",
+              autoClose: 15000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+              onClick: () => {
+                shell.openExternal(data.data.html_url);
+              },
+            }
+          );
+        }
+      });
+  }, []);
+}