feat(ui): Automatically refresh the page when the backend version cha…

…nged

backend/lib/webserver/middlewares/VersionMiddleware.js

@@ -3,17 +3,14 @@ const Tools = require("../../Tools");
 const version = Tools.GET_VALETUDO_VERSION();
 const commitId = Tools.GET_COMMIT_ID();
 /**
- * The main purpose of these headers is to make it easier
- * to find internet-facing valetudo instances using shodan.io
- * so that I can be mad about them
+ * These headers are used by the frontend to determine if the backend was updated
+ * so that it can force a refresh.
+ * Using headers for that prevents us from periodically polling the backend for its version.
  *
+ * It also makes it much easier to find publicly accessible Valetudo instances on shodan.io
  * Don't do that.
  * Use a VPN or at least a reverse-proxy with proper auth.
  *
- * By ignoring this warning, you opt-in to valetudo
- * telemetry data collection via the cloud
- *
- *
  * @param {object} req
  * @param {object} res
  * @param {Function} next

frontend/src/api/client.ts

@@ -54,6 +54,40 @@ export const valetudoAPI = axios.create({
     baseURL: "../api/v2",
 });
 
+let currentCommitId = "unknown";
+
+valetudoAPI.interceptors.response.use(response => {
+    /*
+       As using an outdated frontend with an updated backend might lead to undesirable
+       or even catastrophic results, we try to automatically detect this state and
+       act accordingly.
+       By just looking at the response headers of any api request, we avoid additional
+       periodic API requests for polling the current version.
+
+       If something such as a reverse proxy strips these headers, the check will not work.
+       Users of advanced setups like these should remember to press ctrl + f5 to force refresh
+       after each Valetudo update
+    */
+    if (response.headers["x-valetudo-commit-id"]) {
+        if (currentCommitId !== response.headers["x-valetudo-commit-id"]) {
+            if (currentCommitId === "unknown") {
+                currentCommitId = response.headers["x-valetudo-commit-id"];
+            } else {
+                /*
+                    While we could display a textbox informing the user that the backend changed,
+                    there wouldn't be any benefit to that as the refresh is mandatory anyways
+
+                    By just calling location.reload() here, we avoid having to somehow inject the currentCommitId
+                    value from this mostly stateless api layer into the React application state
+                 */
+                location.reload();
+            }
+        }
+    }
+
+    return response;
+});
+
 const SSETracker = new Map<string, () => () => void>();
 
 const subscribeToSSE = <T>(