src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -80,7 +80,8 @@ const VolumeDetails = (props): ReactElement => {
     enabled: false,
   });
   // get story arcs
-  const getStoryArcs = useMutation({
+  const useGetStoryArcs = () => {
+    return useMutation({
       mutationFn: async (comicObject) =>
         axios({
           url: `${COMICVINE_SERVICE_URI}/getStoryArcs`,
@@ -93,6 +94,16 @@ const VolumeDetails = (props): ReactElement => {
         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>
             </>