Client: Added version text

Resolves #32

client/package-lock.json

@@ -14,6 +14,7 @@
         "@refinedev/kbar": "^1.1.2",
         "@refinedev/react-router-v6": "^4.3.2",
         "@refinedev/simple-rest": "^4.5.0",
+        "@tanstack/react-query": "^4.29.19",
         "antd": "^5.6.4",
         "i18next": "^23.2.8",
         "i18next-browser-languagedetector": "^7.1.0",

client/package.json

@@ -13,6 +13,7 @@
     "@refinedev/kbar": "^1.1.2",
     "@refinedev/react-router-v6": "^4.3.2",
     "@refinedev/simple-rest": "^4.5.0",
+    "@tanstack/react-query": "^4.29.19",
     "antd": "^5.6.4",
     "i18next": "^23.2.8",
     "i18next-browser-languagedetector": "^7.1.0",

client/src/App.tsx

@@ -39,6 +39,8 @@ import {
   UserOutlined,
 } from "@ant-design/icons";
 import { ConfigProvider } from "antd";
+import { Footer } from "antd/es/layout/layout";
+import { Version } from "./components/version";
 
 function App() {
   const { t, i18n } = useTranslation();
@@ -137,6 +139,11 @@ function App() {
                           )}
                         />
                       )}
+                      Footer={() => (
+                        <Footer style={{ textAlign: "center" }}>
+                          Spoolman - Version <Version />
+                        </Footer>
+                      )}
                     >
                       <Outlet />
                     </ThemedLayoutV2>

client/src/components/version.tsx

@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+import { Spin } from "antd";
+
+interface IInfo {
+  version: string;
+  debug_mode: boolean;
+  automatic_backups: boolean;
+  data_dir: string;
+  backups_dir: string;
+  db_type: string;
+}
+
+export const Version: React.FC = () => {
+  const apiEndpoint = import.meta.env.VITE_APIURL;
+
+  const infoResult = useQuery<IInfo>({
+    queryKey: ["info"],
+    queryFn: async () => {
+      const response = await fetch(apiEndpoint + "/info");
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.json();
+    },
+  });
+
+  if (infoResult.isLoading) {
+    return <Spin />;
+  }
+
+  if (infoResult.isError) {
+    return <span>Unknown</span>;
+  }
+
+  const info = infoResult.data;
+  return <span>{info.version}</span>;
+};