From e54f997972b153f7a44a08fe4005d20e5b0767ec Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 4 Apr 2024 06:39:07 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Added=20status=20checks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/VolumeDetail/VolumeDetail.tsx  | 52 ++++++++++++-------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/client/components/VolumeDetail/VolumeDetail.tsx b/src/client/components/VolumeDetail/VolumeDetail.tsx
index 076eb2f..c3f3235 100644
--- a/src/client/components/VolumeDetail/VolumeDetail.tsx
+++ b/src/client/components/VolumeDetail/VolumeDetail.tsx
@@ -80,19 +80,30 @@ const VolumeDetails = (props): ReactElement => {
     enabled: false,
   });
   // get story arcs
-  const getStoryArcs = useMutation({
-    mutationFn: async (comicObject) =>
-      axios({
-        url: `${COMICVINE_SERVICE_URI}/getStoryArcs`,
-        method: "POST",
-        data: {
-          comicObject,
-        },
-      }),
-    onSuccess: (data) => {
-      setStoryArcsData(data?.data.results);
-    },
-  });
+  const useGetStoryArcs = () => {
+    return useMutation({
+      mutationFn: async (comicObject) =>
+        axios({
+          url: `${COMICVINE_SERVICE_URI}/getStoryArcs`,
+          method: "POST",
+          data: {
+            comicObject,
+          },
+        }),
+      onSuccess: (data) => {
+        setStoryArcsData(data?.data.results);
+      },
+    });
+  };
+
+  const {
+    mutate: getStoryArcs,
+    isIdle,
+    isError,
+    data,
+    error,
+    status,
+  } = useGetStoryArcs();
 
   console.log("jihya", issuesForSeries);
   const IssuesInVolume = () => (
@@ -154,18 +165,19 @@ const VolumeDetails = (props): ReactElement => {
       name: "Story Arcs",
       content: (
         <div key={3}>
-          <button
-            className=""
-            onClick={() => getStoryArcs.mutate(comicObject?.data)}
-          >
+          <button className="" onClick={() => getStoryArcs(comicObject?.data)}>
             Get story arcs
           </button>
-
-          {!isEmpty(storyArcsData) && (
+          {status === "pending" && <>{status}</>}
+          {!isEmpty(storyArcsData) && status === "success" && (
             <>
               <ul>
                 {storyArcsData.map((storyArc) => {
-                  return <li>{storyArc?.name}</li>;
+                  return (
+                    <li>
+                      <span className="text-lg">{storyArc?.name}</span>
+                    </li>
+                  );
                 })}
               </ul>
             </>