From 0660e75af371c9c9d9db7e15cb09d81de93317db Mon Sep 17 00:00:00 2001
From: Daniel Roth <daniel_roth@hotmail.co.uk>
Date: Thu, 5 Mar 2026 16:11:51 +0000
Subject: [PATCH] implement useMutation when sending request

---
 .../reporting/RecommendationsOptions.tsx      | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/reporting/RecommendationsOptions.tsx b/src/app/portfolio/[slug]/(portfolio)/reporting/RecommendationsOptions.tsx
index 9e80ed9..0aa01a0 100644
--- a/src/app/portfolio/[slug]/(portfolio)/reporting/RecommendationsOptions.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/reporting/RecommendationsOptions.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -111,6 +112,15 @@ function SortableScenarioItem({
   );
 }
 
+function sendCategorisationRequest(selectedScenarios: ScenarioWithPriority[], portfolioId: number) {
+  const payload = mapScenariosToPayload(selectedScenarios, portfolioId);
+  return fetch("/api/plan/categorisation", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+}
+
 export function RecommendationsOptions({
   disabled = false,
   scenarios,
@@ -163,29 +173,26 @@ export function RecommendationsOptions({
     });
   };
 
-  const handleSubmit = async () => {
-    if (selectedScenarios.length === 1) {
-      setWarning("Cannot generate recommendations for a single scenario");
-      return;
-    }
+  const { mutate, isPending } = useMutation({
+  
+  mutationFn: () => sendCategorisationRequest(selectedScenarios, portfolioId),
+  // onSuccess: () => {
+  // },
+  // onError: () => {
+  // }
+});
 
-    setWarning(null);
-    setIsApplying(true);
+const handleSubmit = () => {
+  if (selectedScenarios.length === 1) {
+    setWarning("Cannot generate recommendations for a single scenario");
+    return;
+  }
+  setWarning(null);
+  mutate();
+  onSuccess();
+  setOpen(false);
+};
 
-    const payload = mapScenariosToPayload(selectedScenarios, portfolioId);
-
-    // don't worry about waiting for this response
-    fetch("/api/plan/categorisation", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload)
-    });
-
-    onSuccess();
-
-    setIsApplying(false);
-    setOpen(false);
-  };
   const handleCancel = () => {
     setWarning("")
     setSelectedScenarios([]);