🔧 Fixed a bad state and got metadata tab groups working

src/client/actions/fileops.actions.tsx

@@ -163,7 +163,7 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
     console.log(error);
   }
 
-  // dispatch({
+  dispatch({
-  //   type: CV_CLEANUP,
+    type: CV_CLEANUP,
-  // });
+  });
 };

src/client/components/ComicDetail.tsx

@@ -60,66 +60,82 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     setVisible(false);
   };
 
-  const tabs = ["Volume Information", "Other Metadata", "Acquistion Details"];
+  const [active, setActive] = useState(0);
 
-  const [active, setActive] = useState({ currentTab: tabs[0], markup: <></> });
+  const tabGroup = [
-  const renderTabContent = (tab, data) => {
+    {
-    switch (tab) {
+      id: 0,
-      case "Volume Information":
+      name: "Volume Information",
-        setActive({
+      content: !isNil(comicBookDetailData.sourcedMetadata) && (
-          currentTab: tab,
-          markup: (
         <div className="columns">
           <div className="column is-narrow">
             <figure className="card-image">
               <img
                 src={
-                      data.data.sourcedMetadata.comicvine.volumeInformation
+                  comicBookDetailData.sourcedMetadata.comicvine
-                        .image.thumb_url
+                    .volumeInformation.image.thumb_url
                 }
               />
             </figure>
           </div>
-              <div className="column is-2">
+          <div className="column is-4">
             <dl>
               <dt>
-                    {data.data.sourcedMetadata.comicvine.volumeInformation.name}
+                Is a part of{" "}
+                <span className="has-text-info">
+                  {
+                    comicBookDetailData.sourcedMetadata.comicvine
+                      .volumeInformation.name
+                  }
+                </span>
               </dt>
               <dd>
                 Published by
                 <span className="has-text-weight-semibold">
                   {" "}
                   {
-                        data.data.sourcedMetadata.comicvine.volumeInformation
+                    comicBookDetailData.sourcedMetadata.comicvine
-                          .publisher.name
+                      .volumeInformation.publisher.name
                   }
                 </span>
               </dd>
+              <dd>
+                Total issues in this volume:{" "}
+                {
+                  comicBookDetailData.sourcedMetadata.comicvine
+                    .volumeInformation.count_of_issues
+                }
+              </dd>
             </dl>
           </div>
         </div>
       ),
-        });
+    },
-        break;
+    {
-    }
+      id: 1,
-  };
+      name: "Other Metadata",
-  const MetadataTabGroup = (data) => {
+      content: <>bastard</>,
+    },
+  ];
+  const MetadataTabGroup = () => {
     return (
       <>
         <div className="tabs">
           <ul>
-            {tabs.map((tab, idx) => (
+            {tabGroup.map((tab, idx) => (
               <li
                 key={idx}
-                className={tab === active.currentTab ? "is-active" : ""}
+                className={tab.id === active ? "is-active" : ""}
-                onClick={() => renderTabContent(tab, data)}
+                onClick={() => setActive(idx)}
               >
-                <a>{tab}</a>
+                <a>{tab.name}</a>
               </li>
             ))}
           </ul>
         </div>
-        {active.markup}
+        {tabGroup.map(({ id, content }) => {
+          return active === id ? content : null;
+        })}
       </>
     );
   };
@@ -216,7 +232,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               </div>
             </div>
 
-            <MetadataTabGroup data={comicBookDetailData} />
+            <MetadataTabGroup />
 
             <Drawer
               title="ComicVine Search Results"

src/client/reducers/comicinfo.reducer.js

@@ -42,9 +42,9 @@ function comicinfoReducer(state = initialState, action) {
       };
     case CV_CLEANUP:
       return {
+        ...state,
         searchResults: [],
         searchQuery: {},
-        comicBookDetail: {},
       };
     default:
       return state;