Version detection (#36)

* feat: update version detection

* better version detection

* fmt

CHANGELOG.md

@@ -11,6 +11,12 @@ Add new features here, everything will be added at the end to the changelog when
 
 -->
 
+# v1.5.12
+
+## Added
+
+- Automatic version detection
+
 # v1.5.11
 
 ## Fixed

package.json

@@ -1,11 +1,11 @@
 {
   "name": "dtekv-emulator-web",
   "private": true,
-  "version": "1.5.11",
+  "version": "1.5.12",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b && vite build && echo -n \"$(cat package.json | jq -r '.version')\" > dist/version.txt",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "fmt": "prettier . --write",

public/version.txt

@@ -0,0 +1 @@
+

src/App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import useWindowDimension from "./hooks/useWindowDimensions";
 import { MIN_WINDOW_HEIGHT, MIN_WINDOW_WIDTH } from "./consts";
 
@@ -8,17 +8,42 @@ import { store } from "./atoms";
 import TooSmall from "./pages/TooSmall";
 import Dialog from "./partials/Dialog";
 import * as jotai from "jotai";
+import ShouldUpdate from "./pages/ShouldUpdate";
+
+function fetchVersion(): Promise<string> {
+  return fetch("/version.txt").then((res) => res.text());
+}
 
 function App() {
+  const [shouldUpdate, setShouldUpdate] = useState(false);
   const dimensions = useWindowDimension();
   const isTooSmall =
     dimensions.width < MIN_WINDOW_WIDTH ||
     dimensions.height < MIN_WINDOW_HEIGHT;
 
+  useEffect(() => {
+    updateVersion();
+
+    function updateVersion() {
+      fetchVersion().then((version) => {
+        if (version !== __APP_VERSION__) {
+          setShouldUpdate(true);
+        }
+      });
+    }
+
+    addEventListener("focus", updateVersion);
+    return () => removeEventListener("focus", updateVersion);
+  }, []);
+
   return (
     <jotai.Provider store={store}>
       <Dialog />
       {(() => {
+        if (process.env.NODE_ENV !== "development" && shouldUpdate) {
+          return <ShouldUpdate />;
+        }
+
         if (isTooSmall) {
           return <TooSmall />;
         } else {

src/pages/ShouldUpdate/ShouldUpdate.module.css

@@ -0,0 +1,29 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  padding: 16px;
+}
+
+.root h1 {
+  margin: 0;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.root p {
+  margin: 0;
+  text-align: center;
+}
+
+.splitter {
+  height: 16px;
+}
+
+.root a {
+  color: var(--color-text);
+  text-decoration: underline;
+}

src/pages/ShouldUpdate/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import styles from "./ShouldUpdate.module.css";
+
+function ShouldUpdate() {
+  return (
+    <div className={styles.root}>
+      <h1>New version is available</h1>
+      <p>Refresh page to access the new version</p>
+      <div className={styles.splitter} />
+      <p>
+        <a onClick={() => window.location.reload()}>Refresh</a>
+      </p>
+    </div>
+  );
+}
+
+export default React.memo(ShouldUpdate);