✅ Added status checks

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -80,19 +80,30 @@ const VolumeDetails = (props): ReactElement => {
     enabled: false,
   });
   // get story arcs
-  const getStoryArcs = useMutation({
+  const useGetStoryArcs = () => {
-    mutationFn: async (comicObject) =>
+    return useMutation({
-      axios({
+      mutationFn: async (comicObject) =>
-        url: `${COMICVINE_SERVICE_URI}/getStoryArcs`,
+        axios({
-        method: "POST",
+          url: `${COMICVINE_SERVICE_URI}/getStoryArcs`,
-        data: {
+          method: "POST",
-          comicObject,
+          data: {
-        },
+            comicObject,
-      }),
+          },
-    onSuccess: (data) => {
+        }),
-      setStoryArcsData(data?.data.results);
+      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
+          <button className="" onClick={() => getStoryArcs(comicObject?.data)}>
-            className=""
-            onClick={() => getStoryArcs.mutate(comicObject?.data)}
-          >
             Get story arcs
           </button>
-
+          {status === "pending" && <>{status}</>}
-          {!isEmpty(storyArcsData) && (
+          {!isEmpty(storyArcsData) && status === "success" && (
             <>
               <ul>
                 {storyArcsData.map((storyArc) => {
-                  return <li>{storyArc?.name}</li>;
+                  return (
+                    <li>
+                      <span className="text-lg">{storyArc?.name}</span>
+                    </li>
+                  );
                 })}
               </ul>
             </>