feat: add message if a newer release is available

Author: timhaywood

ae/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolt-cep",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {
     "dev": "vite",
     "debug": "cross-env DEBUG_REACT=true vite build --watch true",

ae/src/ui/main/main.tsx

@@ -1,22 +1,27 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import * as pkg from "../../../package.json";
 import { evalTS, openLinkInBrowser } from "../lib/utils/bolt";
 import { useMonaco } from "../monaco/useMonaco";
 import "./main.scss";
+import { useUpdater } from "./updater";
+
+const baseUrl = "https://github.com/motiondeveloper/editor";
 
 const Main = () => {
   const editorRef = useRef<HTMLDivElement>(null);
 
   const { setValue, getValue, insertValue, disableErrors } =
     useMonaco(editorRef);
 
-  const issueUrl = new URL(
-    "https://github.com/motiondeveloper/editor/issues/new",
-  );
-
+  const issueUrl = new URL(baseUrl + "/issues/new");
   issueUrl.searchParams.set("title", `[${pkg.version}] Issue Name`);
   issueUrl.searchParams.set("labels", "ae");
 
+  const releasesUrl = new URL(baseUrl + "/releases");
+  const updateAvailable = useUpdater();
+  // TODO: allow users to dismiss update message
+  const [showUpdateBanner, setShowUpdateBanner] = useState(updateAvailable);
+
   return (
     <div className="app">
       <div ref={editorRef} id="monaco" />
@@ -47,6 +52,15 @@ const Main = () => {
             File Issue
           </button>
         </div>
+        {showUpdateBanner && (
+          // TODO: show better update banner
+          <div>
+            An update is available!{" "}
+            <button onClick={() => openLinkInBrowser(releasesUrl.toString())}>
+              Download
+            </button>
+          </div>
+        )}
         <div>
           <label>
             Disable TS Errors

ae/src/ui/main/updater.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { version } from "../../../package.json";
+
+export function useUpdater() {
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+
+  useEffect(() => {
+    async function checkVersion() {
+      const latestVersion = await getLatestRelease();
+
+      if (latestVersion && versionIsGreater(latestVersion, version)) {
+        setUpdateAvailable(true);
+      }
+    }
+    checkVersion();
+  }, []);
+
+  return updateAvailable;
+}
+
+async function getLatestRelease() {
+  const url = `https://api.github.com/repos/motiondeveloper/editor/releases/latest`;
+  const response = await fetch(url, {
+    headers: {
+      Accept: "application/vnd.github+json",
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+  });
+
+  if (!response.ok) {
+    // TODO: handle api failures
+    return;
+  }
+
+  const data = await response.json();
+
+  return data.tag_name;
+}
+
+function getVersionParts(versionString: string): number[] {
+  return versionString.split(".").map((s) => Number(s));
+}
+
+function versionIsGreater(versionA: string, versionB: string): boolean {
+  const partsA = getVersionParts(versionA);
+  const majorA = partsA[0];
+  const minorA = partsA[1];
+  const patchA = partsA[2];
+
+  const partsB = getVersionParts(versionB);
+  const majorB = partsB[0];
+  const minorB = partsB[1];
+  const patchB = partsB[2];
+
+  if (majorA < majorB) return false;
+  if (majorA > majorB) return true;
+
+  if (minorA < minorB) return false;
+  if (minorA > minorB) return true;
+
+  if (patchA < patchB || patchA === patchB) return false;
+
+  return true;
+}