🔧 Refactored the volumeGroup to use volume info from mongo

src/client/actions/fileops.actions.tsx

@@ -148,7 +148,7 @@ export const fetchVolumeGroups = () => (dispatch) => {
       .then((data) => {
         dispatch({
           type: IMS_COMIC_BOOK_GROUPS_FETCHED,
-          data,
+          data: data.data,
         });
       });
   } catch (error) {

src/client/components/Import.tsx

@@ -1,9 +1,7 @@
 import React, { ReactElement, useCallback, useContext } from "react";
-import { isEmpty, isNil, isUndefined } from "lodash";
+import { isEmpty } from "lodash";
 import { useSelector, useDispatch } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
-import { IFolderData } from "threetwo-ui-typings";
-import { LazyLog, ScrollFollow } from "react-lazylog";
 import DynamicList, { createCache } from "react-window-dynamic-list";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";

src/client/components/VolumeGroups.tsx

@@ -20,6 +20,7 @@ export const VolumeGroups = (): ReactElement => {
   const volumeGroups = useSelector(
     (state: RootState) => state.fileOps.comicVolumeGroups,
   );
+  console.log(volumeGroups);
   return (
     <section className="volumes-container mt-4">
       <div className="content">
@@ -33,22 +34,22 @@ export const VolumeGroups = (): ReactElement => {
       >
         {!isNil(volumeGroups) &&
           volumeGroups &&
-          map(volumeGroups.data, (group) => {
-            if (!isNil(group)) {
+          map(volumeGroups, (group) => {
+            if (!isNil(group._id)) {
               return (
-                <div className="stack" key={group.results.id}>
-                  <img src={group.results.image.small_url} />
+                <div className="stack" key={group._id.id}>
+                  <img src={group.data[0].image.small_url} />
                   <div className="content">
                     <div className="stack-title is-size-8">
-                      <Link to={`/volume/details/${group.comicObjectId}`}>
-                        {ellipsize(group.results.name, 18)}
+                      <Link to={`/volume/details/${group.comicBookObjectId}`}>
+                        {ellipsize(group.data[0].name, 18)}
                       </Link>
                     </div>
                     <div className="control">
                       <span className="tags has-addons">
                         <span className="tag is-primary is-light">Issues</span>
                         <span className="tag">
-                          {group.results.count_of_issues}
+                          {group.data[0].count_of_issues}
                         </span>
                       </span>
                     </div>

src/client/reducers/fileops.reducer.ts

@@ -89,6 +89,7 @@ function fileOpsReducer(state = initialState, action) {
       };
     }
     case IMS_COMIC_BOOK_GROUPS_FETCHED: {
+      console.log(action)
       return {
         ...state,
         comicVolumeGroups: action.data,