Simplify version info on frontend by using api endpoint

src/backend/server/api.ts

@@ -440,6 +440,10 @@ export const setupApi = (app: ExpressWithAsync, logger: Logger, appLoggerStream:
         return res.status((clientsReady && sourcesReady) ? 200 : 500).json({messages: sourceMessages.concat(clientMessages)});
     });
 
+    app.getAsync('/api/version', async (req, res) => {
+       return res.json({version: root.get('version')});
+    });
+
     app.useAsync('/api/*', async (req, res) => {
         const remote = req.connection.remoteAddress;
         const proxyRemote = req.headers["x-forwarded-for"];

src/client/App.tsx

@@ -13,6 +13,7 @@ import ScrobbledPage from "./scrobbled/ScrobbledPage";
 import DeadPage from "./deadLetter/DeadPage";
 import {clientUpdate, sourceUpdate} from "./status/ducks";
 import {useEventSource, useEventSourceListener} from "@react-nano/use-event-source";
+import Version from "./Version";
 
 function NoMatch() {
     let location = useLocation();
@@ -86,8 +87,6 @@ const Global = (props: PropsFromRedux) => {
 
 const ConnectedGlobal = connector(Global);
 
-const version = __APP_VERSION__;
-
 function App() {
   return (
       <Provider store={store}>
@@ -97,9 +96,7 @@ function App() {
             <div className="flex items-center justify-between">
               <a href="/" className="flex items-center flex-grow no-underline pr-4">
                 <img src="icon.svg" style={{maxWidth: '30px'}}/>
-                <span className="px-4 break-normal">
-                        Multi Scrobbler <span className="ml-2 text-xs version">v{version}</span>
-                    </span>
+                <Version/>
               </a>
             </div>
           </div>

src/client/Version.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/dist/query/react/index";
+
+export const versionApi = createApi({
+    reducerPath: 'versionApi',
+    baseQuery: fetchBaseQuery({ baseUrl: './api/' }),
+    endpoints: (builder) => ({
+        getVersion: builder.query<{version: string}, undefined>({
+            query: () => `version`,
+        }),
+    }),
+});
+
+const { useGetVersionQuery } = versionApi;
+
+const Version = () => {
+    const {
+        data = undefined,
+    } = useGetVersionQuery(undefined);
+
+    return <span className="px-4 break-normal">
+                        Multi Scrobbler <span className="ml-2 text-xs version">{data === undefined ? null : `${data.version}`}</span>
+            </span>;
+}
+
+export default Version;

src/client/store.ts

@@ -1,14 +1,15 @@
-import {configureStore} from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit'
 // Or from '@reduxjs/toolkit/query/react'
-import {setupListeners} from '@reduxjs/toolkit/query'
-import {statusApi} from './status/statusApi';
-import {clientSlice, sourceSlice} from "./status/ducks";
-import {logsReducer} from "./logs/logDucks";
-import {logsApi} from "./logs/logsApi";
-import {recentApi} from "./recent/recentDucks";
-import {scrobbledApi} from "./scrobbled/scrobbledDucks";
-import {deadApi, deadSlice} from "./deadLetter/deadLetterDucks";
-import {scrobblerApi} from './components/statusCard/clientDucks';
+import { setupListeners } from '@reduxjs/toolkit/query'
+import { scrobblerApi } from './components/statusCard/clientDucks';
+import { deadApi, deadSlice } from "./deadLetter/deadLetterDucks";
+import { logsReducer } from "./logs/logDucks";
+import { logsApi } from "./logs/logsApi";
+import { recentApi } from "./recent/recentDucks";
+import { scrobbledApi } from "./scrobbled/scrobbledDucks";
+import { clientSlice, sourceSlice } from "./status/ducks";
+import { statusApi } from './status/statusApi';
+import { versionApi } from "./Version";
 
 export const store = configureStore({
     reducer: {
@@ -19,6 +20,7 @@ export const store = configureStore({
         [deadApi.reducerPath]: deadApi.reducer,
         [scrobbledApi.reducerPath]: scrobbledApi.reducer,
         [scrobblerApi.reducerPath]: scrobblerApi.reducer,
+        [versionApi.reducerPath]: versionApi.reducer,
         //parts: statusReducer
         clients: clientSlice.reducer,
         sources: sourceSlice.reducer,
@@ -28,7 +30,7 @@ export const store = configureStore({
     // Adding the api middleware enables caching, invalidation, polling,
     // and other useful features of `rtk-query`.
     middleware: (getDefaultMiddleware) =>
-        getDefaultMiddleware().concat([statusApi.middleware, logsApi.middleware, recentApi.middleware, scrobbledApi.middleware, deadApi.middleware, scrobblerApi.middleware]),
+        getDefaultMiddleware().concat([statusApi.middleware, logsApi.middleware, recentApi.middleware, scrobbledApi.middleware, deadApi.middleware, scrobblerApi.middleware, versionApi.middleware]),
 })
 
 // optional, but required for refetchOnFocus/refetchOnReconnect behaviors

src/client/vite-env.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="vite/client" />
-declare const __APP_VERSION__: string
 declare const __USE_HASH_ROUTER__: bool

vite.config.ts

@@ -31,7 +31,6 @@ export default defineConfig(() => {
             sourcemap: true
         },
         define: {
-            "__APP_VERSION__": JSON.stringify((process.env.APP_VERSION ?? 'Unknown').toString()),
             "__USE_HASH_ROUTER__": JSON.stringify((process.env.USE_HASH_ROUTER ?? false))
         }
     };