📚 Added volume card stacks to the dashboard

src/client/actions/fileops.actions.tsx

@@ -5,6 +5,9 @@ import { API_BASE_URI, SOCKET_BASE_URI } from "../constants/endpoints";
 import {
   IMS_COMICBOOK_METADATA_FETCHED,
   IMS_SOCKET_CONNECTION_CONNECTED,
+  IMS_COMIC_BOOK_GROUPS_FETCHED,
+  IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
   IMS_RECENT_COMICS_FETCHED,
   CV_API_CALL_IN_PROGRESS,
   CV_SEARCH_SUCCESS,
@@ -144,6 +147,30 @@ export const importToDB = (payload?: any) => (dispatch) => {
     });
   }
 };
+export const fetchVolumeGroups = () => (dispatch) => {
+  try {
+    dispatch({
+      type: IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
+    });
+    axios
+      .request({
+        url: "http://localhost:3000/api/import/getComicBookGroups",
+        method: "GET",
+      })
+      .then((data) => {
+        console.log(data);
+        dispatch({
+          type: IMS_COMIC_BOOK_GROUPS_FETCHED,
+          data,
+        });
+      });
+  } catch (error) {
+    dispatch({
+      type: IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
+      error,
+    });
+  }
+};
 export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
   try {
     const issueString = searchPayload.rawFileDetails.name;

src/client/assets/scss/App.scss

@@ -26,27 +26,38 @@ $border-color: red;
   }
 }
 
-// Dashboard 
-.paper {
-  background: #fff;
-  width: 200px;
-  border-radius: 0.3rem;
-  box-shadow:
-    /* The top layer shadow */
-    0 -1px 1px rgba(0,0,0,0.15),
-    /* The second layer */
-    0 -10px 0 -5px #eee,
-    /* The second layer shadow */
-    0 -10px 1px -4px rgba(0,0,0,0.15),
-     /* The third layer */
-    0 -20px 0 -10px #eee,
-    /* The third layer shadow */
-    0 -20px 1px -9px rgba(0,0,0,0.15);
-    /* Padding for demo purposes */
-    padding: 30px;
+// Dashboard
+.stack-card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  column-gap: 0.5em;
+  row-gap: 1.2em;
+  .stack {
+    width: 200px;
+    border-radius: 0.3rem;
+    box-shadow:
+    /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.15),
+      /* The second layer */ 0 -10px 0 -5px #eee,
+      /* The second layer shadow */ 0 -10px 1px -4px rgba(0, 0, 0, 0.15),
+      /* The third layer */ 0 -20px 0 -10px #eee,
+      /* The third layer shadow */ 0 -20px 1px -9px rgba(0, 0, 0, 0.15);
+    img {
+      height: auto;
+      border-top-left-radius: 0.3rem;
+      border-top-right-radius: 0.3rem;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .content {
+      margin: -5px 0 0 0;
+      padding: 0.5rem 1rem;
+      border-bottom-left-radius: 0.25rem;
+      box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
+      border-bottom-right-radius: 0.25rem;
+    }
+  }
 }
 
-
 .min {
   overflow: visible;
   margin: auto;
@@ -299,7 +310,7 @@ $border-color: red;
   }
 }
 
-// Library grid 
+// Library grid
 .my-masonry-grid {
   display: -webkit-box; /* Not needed if autoprefixing */
   display: -ms-flexbox; /* Not needed if autoprefixing */
@@ -312,7 +323,8 @@ $border-color: red;
   background-clip: padding-box;
 }
 
-.my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
+.my-masonry-grid_column > div {
+  /* change div to reference your elements you put in <Masonry> */
   margin-bottom: 20px;
 }
 

src/client/components/Dashboard.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
+import { VolumeGroups } from "./VolumeGroups";
 import { getComicBooks } from "../actions/fileops.actions";
 import { isEmpty } from "lodash";
 
@@ -28,11 +29,8 @@ export const Dashboard = (): ReactElement => {
 
         {!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
           <>
-            <h2 className="subtitle">Recently Imported</h2>
             <RecentlyImported comicBookCovers={recentComics} />
-            <section>
-              <div className="paper">asdas</div>
-            </section>
+            <VolumeGroups />
           </>
         ) : (
           <ZeroState

src/client/components/RecentlyImported.tsx

@@ -16,53 +16,56 @@ type RecentlyImportedProps = {
 export const RecentlyImported = ({
   comicBookCovers,
 }: RecentlyImportedProps): ReactElement => (
-  <section className="card-container">
-    {map(comicBookCovers.docs, ({ _id, rawFileDetails, sourcedMetadata }) => {
-      let imagePath = "";
-      let comicName = "";
-      if (!isNil(rawFileDetails)) {
-        const encodedFilePath = encodeURI(
-          "http://localhost:3000" + removeLeadingPeriod(rawFileDetails.path),
+  <>
+    <h2 className="subtitle">Recently Imported</h2>
+    <section className="card-container">
+      {map(comicBookCovers.docs, ({ _id, rawFileDetails, sourcedMetadata }) => {
+        let imagePath = "";
+        let comicName = "";
+        if (!isNil(rawFileDetails)) {
+          const encodedFilePath = encodeURI(
+            "http://localhost:3000" + removeLeadingPeriod(rawFileDetails.path),
+          );
+          imagePath = escapePoundSymbol(encodedFilePath);
+          comicName = rawFileDetails.name;
+        } else if (!isNil(sourcedMetadata)) {
+          imagePath = sourcedMetadata.comicvine.image.small_url;
+          comicName = sourcedMetadata.comicvine.name;
+        }
+        const titleElement = (
+          <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 18)}</Link>
         );
-        imagePath = escapePoundSymbol(encodedFilePath);
-        comicName = rawFileDetails.name;
-      } else if (!isNil(sourcedMetadata)) {
-        imagePath = sourcedMetadata.comicvine.image.small_url;
-        comicName = sourcedMetadata.comicvine.name;
-      }
-      const titleElement = (
-        <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 18)}</Link>
-      );
-      return (
-        <Card
-          key={_id}
-          orientation={"vertical"}
-          imageUrl={imagePath}
-          hasDetails
-          title={comicName ? titleElement : null}
-        >
-          <div className="content is-flex is-flex-direction-row">
-            {!isNil(sourcedMetadata.comicvine) && (
-              <span className="icon cv-icon is-small">
-                <img src="/dist/img/cvlogo.svg" />
-              </span>
-            )}
-            {isNil(rawFileDetails) && (
-              <span className="icon has-text-info">
-                <i className="fas fa-adjust" />
-              </span>
-            )}
-            {!isNil(sourcedMetadata.comicvine) &&
-            !isEmpty(
-              detectTradePaperbacks(
-                sourcedMetadata.comicvine.volumeInformation.description,
-              ),
-            ) ? (
-              <span className="tag is-warning">TPB</span>
-            ) : null}
-          </div>
-        </Card>
-      );
-    })}
-  </section>
+        return (
+          <Card
+            key={_id}
+            orientation={"vertical"}
+            imageUrl={imagePath}
+            hasDetails
+            title={comicName ? titleElement : null}
+          >
+            <div className="content is-flex is-flex-direction-row">
+              {!isNil(sourcedMetadata.comicvine) && (
+                <span className="icon cv-icon is-small">
+                  <img src="/dist/img/cvlogo.svg" />
+                </span>
+              )}
+              {isNil(rawFileDetails) && (
+                <span className="icon has-text-info">
+                  <i className="fas fa-adjust" />
+                </span>
+              )}
+              {!isNil(sourcedMetadata.comicvine) &&
+              !isEmpty(
+                detectTradePaperbacks(
+                  sourcedMetadata.comicvine.volumeInformation.description,
+                ),
+              ) ? (
+                <span className="tag is-warning">TPB</span>
+              ) : null}
+            </div>
+          </Card>
+        );
+      })}
+    </section>
+  </>
 );

src/client/components/VolumeGroups.tsx

@@ -1,7 +1,46 @@
-import React, { ReactElement } from "react";
+import { isNil, map } from "lodash";
+import React, { ReactElement, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import ellipsize from "ellipsize";
+import { fetchVolumeGroups } from "../actions/fileops.actions";
 
 export const VolumeGroups = (): ReactElement => {
-  return <div className="paper"></div>;
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(fetchVolumeGroups());
+  }, [dispatch]);
+  const volumeGroups = useSelector(
+    (state: RootState) => state.fileOps.comicVolumeGroups,
+  );
+  return (
+    <>
+      <h2 className="subtitle">Volumes</h2>
+      <div className="stack-card-container">
+        {!isNil(volumeGroups) &&
+          volumeGroups &&
+          map(volumeGroups.data, (group) => {
+            if (!isNil(group)) {
+              return (
+                <div className="stack">
+                  <img src={group.results.image.small_url} />
+                  <div className="content">
+                    {ellipsize(group.results.name, 18)}
+                    <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}
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              );
+            }
+          })}
+      </div>
+    </>
+  );
 };
 
 export default VolumeGroups;

src/client/constants/action-types.ts

@@ -31,6 +31,13 @@ export const IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS =
 export const IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED =
   "IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED";
 
+// volume groups
+export const IMS_COMIC_BOOK_GROUPS_FETCHED = "IMS_COMIC_BOOK_GROUPS_FETCHED";
+export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
+  "IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS";
+export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED =
+  "IMS_COMIC_BOOK_GROUPS_CALL_FAILED";
+
 export const AIRDCPP_SEARCH_IN_PROGRESS = "AIRDCPP_SEARCH_IN_PROGRESS";
 export const AIRDCPP_SEARCH_RESULTS_RECEIVED =
   "AIRDCPP_SEARCH_RESULTS_RECEIVED";

src/client/reducers/fileops.reducer.ts

@@ -10,10 +10,14 @@ import {
   IMS_CV_METADATA_IMPORT_SUCCESSFUL,
   IMS_CV_METADATA_IMPORT_FAILED,
   IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_GROUPS_FETCHED,
+  IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
 } from "../constants/action-types";
 const initialState = {
   IMSCallInProgress: false,
   comicBookMetadata: [],
+  comicVolumeGroups: [],
   isSocketConnected: false,
   isComicVineMetadataImportInProgress: false,
   comicVineMetadataImportError: {},
@@ -68,6 +72,26 @@ function fileOpsReducer(state = initialState, action) {
         isComicVineMetadataImportInProgress: false,
         comicVineMetadataImportError: action.importError,
       };
+    case IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS: {
+      return {
+        ...state,
+        IMSCallInProgress: true,
+      };
+    }
+    case IMS_COMIC_BOOK_GROUPS_FETCHED: {
+      return {
+        ...state,
+        comicVolumeGroups: action.data,
+        IMSCallInProgress: false,
+      };
+    }
+    case IMS_COMIC_BOOK_GROUPS_CALL_FAILED: {
+      return {
+        ...state,
+        IMSCallInProgress: false,
+        error: action.error,
+      };
+    }
     default:
       return state;
   }