feat(budget-app): add version

budget-app/src/app/api/version/route.ts

@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import version from "@/version.json";
+import { z } from "zod";
+
+const queryParamsSchema = z.object({
+  format: z.union([z.literal("json"), z.literal("text")]).default("text"),
+});
+
+type QueryParams = z.infer<typeof queryParamsSchema>;
+
+/**
+ * TODO: Accept any zod schema and validate the query parameters
+ * @param url
+ * @returns
+ */
+
+function parseSearchParam(url: string): QueryParams {
+  const urlObj = new URL(url);
+  const searchParams = Object.fromEntries(urlObj.searchParams.entries());
+
+  // Validate the parameters according to the schema
+  const parsedParams = queryParamsSchema.parse(searchParams);
+  return parsedParams;
+}
+
+export async function GET(req: Request) {
+  const format = parseSearchParam(req.url)?.format;
+  if (format === "json") {
+    return NextResponse.json({
+      format,
+      version: version,
+    });
+  }
+  const formattedVersion =
+    version.tag !== "latest"
+      ? `v${version.major}.${version.minor}.${version.patch}-${version.tag}.${version.revision}`
+      : `v${version.major}.${version.minor}.${version.patch}`;
+  return NextResponse.json({
+    format,
+    version: formattedVersion,
+  });
+}

budget-app/src/app/tabs/SettingTab.tsx

@@ -11,6 +11,7 @@ import { LocalStorage } from "@/libs/local-storage";
 import { useState } from "react";
 import { useGlobalLoading } from "@/hooks/useGlobalLoading";
 import { useSignalR } from "@/hooks/useSignalR";
+import { useVersion } from "@/hooks/useVersion";
 
 export type TransactionGetResponse = InferRouteResponse<typeof Transaction.GET>;
 
@@ -44,8 +45,7 @@ export function SettingTab() {
   };
 
   useGlobalLoading(isResettingCache);
-
-  const signalRConnection = useSignalR();
+  const version = useVersion();
 
   const reloadPage = () => {
     if (typeof window !== "undefined") window.location.reload();
@@ -54,6 +54,7 @@ export function SettingTab() {
   return (
     <Box sx={{ padding: "15px" }}>
       <Toaster closeButton richColors duration={2000} position="top-center" />
+
       <div className="form-input">
         <Button
           variant="contained"
@@ -78,10 +79,8 @@ export function SettingTab() {
       <Box sx={{ paddingTop: "25px" }}>
         <AlertActiveQueue />
       </Box>
-      <Box sx={{ paddingTop: "25px" }}>
-        <Typography variant="body1">
-          SignalR State: {signalRConnection.state}
-        </Typography>
+      <Box sx={{ padding: "20px", textAlign: "center" }}>
+        <Typography variant="body1">{version.value}</Typography>
       </Box>
     </Box>
   );

budget-app/src/hooks/useVersion.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import type * as VersionGet from "@/app/api/version/route";
+import { InferRouteResponse } from "@/types";
+
+export type VersionGetResponse = InferRouteResponse<typeof VersionGet.GET>;
+
+export function useVersion() {
+  const version = useQuery<VersionGetResponse>({
+    queryKey: ["version"],
+    queryFn: async () => {
+      const response = await fetch("/api/version");
+      return response.json();
+    },
+  });
+
+  return {
+    value: version.data?.format === "text" ? version.data.version : "",
+    isLoading: version.isLoading,
+    isError: version.isError,
+  };
+}

budget-app/src/version.json

@@ -0,0 +1,7 @@
+{
+  "major": 1,
+  "minor": 5,
+  "patch": 0,
+  "tag": "canary",
+  "revision": 0
+}