🔧 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,
+        <div className="columns">
-          markup: (
+          <div className="column is-narrow">
-            <div className="columns">
+            <figure className="card-image">
-              <div className="column is-narrow">
+              <img
-                <figure className="card-image">
+                src={
-                  <img
+                  comicBookDetailData.sourcedMetadata.comicvine
-                    src={
+                    .volumeInformation.image.thumb_url
-                      data.data.sourcedMetadata.comicvine.volumeInformation
+                }
-                        .image.thumb_url
+              />
-                    }
+            </figure>
-                  />
+          </div>
-                </figure>
+          <div className="column is-4">
-              </div>
+            <dl>
-              <div className="column is-2">
+              <dt>
-                <dl>
+                Is a part of{" "}
-                  <dt>
+                <span className="has-text-info">
-                    {data.data.sourcedMetadata.comicvine.volumeInformation.name}
+                  {
-                  </dt>
+                    comicBookDetailData.sourcedMetadata.comicvine
-                  <dd>
+                      .volumeInformation.name
-                    Published by
+                  }
-                    <span className="has-text-weight-semibold">
+                </span>
-                      {" "}
+              </dt>
-                      {
+              <dd>
-                        data.data.sourcedMetadata.comicvine.volumeInformation
+                Published by
-                          .publisher.name
+                <span className="has-text-weight-semibold">
-                      }
+                  {" "}
-                    </span>
+                  {
-                  </dd>
+                    comicBookDetailData.sourcedMetadata.comicvine
-                </dl>
+                      .volumeInformation.publisher.name
-              </div>
+                  }
-            </div>
+                </span>
-          ),
+              </dd>
-        });
+              <dd>
-        break;
+                Total issues in this volume:{" "}
-    }
+                {
-  };
+                  comicBookDetailData.sourcedMetadata.comicvine
-  const MetadataTabGroup = (data) => {
+                    .volumeInformation.count_of_issues
+                }
+              </dd>
+            </dl>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 1,
+      name: "Other Metadata",
+      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;