Address greptile comments

frontend/src/hooks/api/upgradePath/index.ts

@@ -1,7 +1,2 @@
-export type {
-  CalculateUpgradePathParams,
-  GetUpgradePathVersionsParams,
-  GitHubVersion,
-  UpgradePathResult
-} from "./queries";
+export type { CalculateUpgradePathParams, GitHubVersion, UpgradePathResult } from "./queries";
 export { useCalculateUpgradePath, useGetUpgradePathVersions } from "./queries";

frontend/src/hooks/api/upgradePath/queries.tsx

@@ -1,4 +1,4 @@
-import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { useMutation, useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
@@ -35,36 +35,26 @@ export interface UpgradePathResult {
   config: Record<string, unknown>;
 }
 
-export interface GetUpgradePathVersionsParams {
-  includePrerelease?: boolean;
-}
-
 export interface CalculateUpgradePathParams {
   fromVersion: string;
   toVersion: string;
-  includePrerelease?: boolean;
 }
 
 const upgradePathKeys = {
   all: ["upgrade-path"] as const,
-  versions: (params: GetUpgradePathVersionsParams) =>
-    [...upgradePathKeys.all, "versions", params] as const,
+  versions: () => [...upgradePathKeys.all, "versions"] as const,
   calculate: (params: CalculateUpgradePathParams) =>
     [...upgradePathKeys.all, "calculate", params] as const
 };
 
 export const useGetUpgradePathVersions = (
-  params: GetUpgradePathVersionsParams,
   options?: Omit<UseQueryOptions<{ versions: GitHubVersion[] }>, "queryKey" | "queryFn">
 ) => {
   return useQuery({
-    queryKey: upgradePathKeys.versions(params),
+    queryKey: upgradePathKeys.versions(),
     queryFn: async () => {
       const { data } = await apiRequest.get<{ versions: GitHubVersion[] }>(
-        "/api/v1/upgrade-path/versions",
-        {
-          params
-        }
+        "/api/v1/upgrade-path/versions"
       );
       return data;
     },
@@ -73,11 +63,13 @@ export const useGetUpgradePathVersions = (
 };
 
 export const useCalculateUpgradePath = () => {
-  return async (params: CalculateUpgradePathParams): Promise<UpgradePathResult> => {
-    const { data } = await apiRequest.post<UpgradePathResult>(
-      "/api/v1/upgrade-path/calculate",
-      params
-    );
-    return data;
-  };
+  return useMutation({
+    mutationFn: async (params: CalculateUpgradePathParams): Promise<UpgradePathResult> => {
+      const { data } = await apiRequest.post<UpgradePathResult>(
+        "/api/v1/upgrade-path/calculate",
+        params
+      );
+      return data;
+    }
+  });
 };

frontend/src/pages/public/UpgradePathPage/UpgradePathPage.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Helmet } from "react-helmet";
 import { SingleValue } from "react-select";
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useMutation } from "@tanstack/react-query";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, FilterableSelect, FormControl } from "@app/components/v2";
@@ -60,29 +59,31 @@ export const UpgradePathPage = () => {
     data: versions,
     isLoading: versionsLoading,
     isFetching: versionsFetching
-  } = useGetUpgradePathVersions(
-    {
-      includePrerelease: false
-    },
-    {
-      enabled: true,
-      staleTime: 24 * 60 * 60 * 1000,
-      refetchOnWindowFocus: false
-    }
-  );
+  } = useGetUpgradePathVersions({
+    enabled: true,
+    staleTime: 24 * 60 * 60 * 1000,
+    refetchOnWindowFocus: false
+  });
 
-  const calculateMutation = useMutation({
-    mutationFn: useCalculateUpgradePath(),
-    onSuccess: (data) => {
-      setUpgradeResult(data);
-    },
-    onError: (error: unknown) => {
+  const calculateMutation = useCalculateUpgradePath();
+
+  // Handle mutation results
+  React.useEffect(() => {
+    if (calculateMutation.isSuccess && calculateMutation.data) {
+      setUpgradeResult(calculateMutation.data);
+    }
+  }, [calculateMutation.isSuccess, calculateMutation.data]);
+
+  React.useEffect(() => {
+    if (calculateMutation.isError) {
       createNotification({
-        text: (error as any)?.response?.data?.message || "Failed to calculate upgrade path",
+        text:
+          (calculateMutation.error as any)?.response?.data?.message ||
+          "Failed to calculate upgrade path",
         type: "error"
       });
     }
-  });
+  }, [calculateMutation.isError, calculateMutation.error]);
 
   const versionOptions = useMemo(() => {
     if (!versions?.versions) return [];
@@ -125,8 +126,7 @@ export const UpgradePathPage = () => {
 
     calculateMutation.mutate({
       fromVersion,
-      toVersion,
-      includePrerelease: false
+      toVersion
     });
   };