From 2a5c3ad67d6d2cb24e428f57e7db33befa16a918 Mon Sep 17 00:00:00 2001
From: Niels Maerten <niels@maerten.be>
Date: Sun, 11 Feb 2024 13:46:55 +0100
Subject: [PATCH] chore: finishing touches

---
 package.json                      |  6 +++-
 src/web-app/components/Splash.tsx | 48 ++++++++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 7d57d3d..33accd8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "glucose-ticker",
   "productName": "Glucose Ticker",
-  "version": "1.0.4",
+  "version": "1.0.5-alpha",
   "description": "Live blood sugar on the Windows Taskbar",
   "main": "tmp/dist/index.js",
   "scripts": {
@@ -18,6 +18,10 @@
     "name": "Niels Maerten",
     "url": "https://github.com/nielsmaerten"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nielsmaerten/glucose-ticker"
+  },
   "license": "MIT",
   "dependencies": {
     "axios": "^0.27.0",
diff --git a/src/web-app/components/Splash.tsx b/src/web-app/components/Splash.tsx
index 4e34071..52cac2e 100644
--- a/src/web-app/components/Splash.tsx
+++ b/src/web-app/components/Splash.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
 import * as storage from "idb-keyval";
-import { version } from "../../../package.json";
+import { version, repository } from "../../../package.json";
 import { STORAGE_KEY, AppSettings, DONATE_LINK } from "../../shared/constants";
 
 export default (props: any) => {
@@ -17,19 +17,51 @@ export default (props: any) => {
     require("electron").shell.openExternal(DONATE_LINK);
   };
 
-  const getTimeLeft = (): string => {
-    const { seconds } = props;
-    return `${seconds} ${seconds === 1 ? "second" : "seconds"}`;
+  const onVersionClick = (e: any) => {
+    e.preventDefault();
+    require("electron").shell.openExternal(repository.url + "/releases");
+  };
+
+  const getTimeLeft = (props: any): string => {
+    const { s } = props;
+    return `${s} ${s === 1 ? "second" : "seconds"}`;
   };
 
+  const getLatestVersion = async () => {
+    const response = await fetch(
+      "https://api.github.com/repos/nielsmaerten/glucose-ticker/releases/latest"
+    );
+    const data = await response.json();
+    return data.tag_name;
+  }
+
+  const showVersionTag = () => {
+    const aLatestVersion = <a href="#" onClick={onVersionClick}>{latestVersion}</a>;
+    return (
+      <p>
+        <small>
+          v{version}
+          {latestVersion !== version && <strong> (latest: {aLatestVersion})</strong>}
+        </small>
+      </p>
+    );
+  }
+
+  useEffect(() => {
+    getLatestVersion().then(setLatestVersion);
+  });
+
+  const [latestVersion, setLatestVersion] = React.useState(version);
+
+
   return (
     <div>
-      <h2>Nightscout will be here in {getTimeLeft()}</h2>
+      <h2>Nightscout will be here in {getTimeLeft(props)}</h2>
       <hr />
       <p>Need to change your settings? Click the button below:</p>
       <button onClick={resetSettings}>Open settings</button>
-      <p>
         <hr />
+      <p>
         If you find Glucose Ticker useful, consider supporting my work with a
         coffee 😊
       </p>
@@ -41,6 +73,8 @@ export default (props: any) => {
           alt="Buy Me a Coffee at ko-fi.com"
         />
       </a>
+      <hr />
+      {showVersionTag()}
     </div>
   );
 };