📦 Beautified carousel displaying extracted comic book images

src/client/actions/comicinfo.actions.tsx

@@ -1,6 +1,7 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
 import qs from "qs";
+import { IExtractionOptions } from "threetwo-ui-typings";
 import {
   CV_SEARCH_SUCCESS,
   CV_API_CALL_IN_PROGRESS,
@@ -8,6 +9,7 @@ import {
   IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
   IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED,
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
 } from "../constants/action-types";
 import { COMICBOOKINFO_SERVICE_URI } from "../constants/endpoints";
 
@@ -109,3 +111,22 @@ export const applyComicVineMatch =
       IMS_inProgress: false,
     });
   };
+
+export const extractComicArchive =
+  (path: string, options: IExtractionOptions) => async (dispatch) => {
+    const extractedComicBookArchive = await axios({
+      method: "POST",
+      url: "http://localhost:3000/api/import/unrarArchive",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      data: {
+        options,
+        filePath: path,
+      },
+    });
+    dispatch({
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
+      extractedComicBookArchive: extractedComicBookArchive.data,
+    });
+  };

src/client/assets/scss/App.scss

@@ -28,11 +28,11 @@ $border-color: red;
 
 // Dashboard
 .recent-comics-container {
-    display: -webkit-box; /* Not needed if autoprefixing */
-    display: -ms-flexbox; /* Not needed if autoprefixing */
-    display: flex;
-    margin-left: -30px; /* gutter size offset */
-    width: auto;
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: -30px; /* gutter size offset */
+  width: auto;
 
   .recent-comics-column {
     padding-left: 22px; /* gutter size */
@@ -88,10 +88,9 @@ $border-color: red;
       /* change div to reference your elements you put in <Masonry> */
       margin-bottom: 20px;
     }
-  }  
+  }
 }
 
-
 .min {
   overflow: visible;
   margin: auto;
@@ -281,6 +280,40 @@ $border-color: red;
 }
 
 // Comic Detail
+
+// extracted comic book archive carousel
+.carousel-root {
+  margin: 0 auto;
+  border-radius: 10px;
+  box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
+  max-width: 300px;
+  ul.slider {
+    li.slide {
+      img {
+        border-radius: 10px;
+      }
+    }
+  }
+  .control-next {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+  &:hover {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+}
+  .control-prev {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px; 
+  &:hover {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+  }
+}
+  
+}
+
+// airdcpp downloads tab
 .tabs {
   .download-icon-labels {
     .downloads-count {
@@ -368,7 +401,7 @@ $border-color: red;
   margin-bottom: 20px;
 }
 
-// 
+//
 // progress
 .progress-indicator-container {
   height: 100%;

src/client/components/ComicDetail.tsx

@@ -7,15 +7,21 @@ import ComicVineSearchForm from "./ComicVineSearchForm";
 import AcquisitionPanel from "./AcquisitionPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import SlidingPane from "react-sliding-pane";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
+
 import Select, { components } from "react-select";
 
 import "react-sliding-pane/dist/react-sliding-pane.css";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";
-import { isEmpty, isUndefined, isNil } from "lodash";
+import { isEmpty, isUndefined, isNil, map } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
-import { getComicBookDetailById } from "../actions/comicinfo.actions";
+import {
+  extractComicArchive,
+  getComicBookDetailById,
+} from "../actions/comicinfo.actions";
 import { detectTradePaperbacks } from "../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
 const prettyBytes = require("pretty-bytes");
@@ -54,6 +60,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicBookDetailData = useSelector(
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
+  const extractedComicBookArchive = useSelector(
+    (state: RootState) => state.fileOps.extractedComicBookArchive,
+  );
 
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   const dispatch = useDispatch();
@@ -126,7 +135,45 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
         );
       },
     },
-    editComicArchive: { content: () => <>bastard fucks</> },
+    editComicArchive: {
+      content: () => (
+        <>
+          <div className="content">
+            <span className="tags has-addons">
+              <span className="tag">Pages</span>
+              <span className="tag is-warning">
+                {extractedComicBookArchive.length}
+              </span>
+            </span>
+          </div>
+          <Carousel
+            width={300}
+            dynamicHeight
+            showStatus={false}
+            showIndicators={false}
+            showThumbs={false}
+            useKeyboardArrows
+          >
+            {map(extractedComicBookArchive, (page, idx) => {
+              return (
+                <div key={idx}>
+                  <img
+                    src={
+                      "http://localhost:3000/" +
+                      page.containedIn +
+                      "/" +
+                      page.name +
+                      page.extension
+                    }
+                    alt=""
+                  />
+                </div>
+              );
+            })}
+          </Carousel>
+        </>
+      ),
+    },
   };
 
   const openDrawerWithCVMatches = useCallback(() => {
@@ -136,9 +183,23 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   }, [dispatch, comicBookDetailData]);
 
   const openDrawerForEditingComicArchive = useCallback(() => {
+    dispatch(
+      extractComicArchive(
+        comicBookDetailData.rawFileDetails.containedIn +
+          "/" +
+          comicBookDetailData.rawFileDetails.name +
+          comicBookDetailData.rawFileDetails.extension,
+        {
+          extractTarget: "book",
+          targetExtractionFolder:
+            "./userdata/expanded/" + comicBookDetailData.rawFileDetails.name,
+          extractionMode: "all",
+        },
+      ),
+    );
     setSlidingPanelContentId("editComicArchive");
     setVisible(true);
-  }, [dispatch]);
+  }, [dispatch, comicBookDetailData, extractedComicBookArchive]);
 
   const [active, setActive] = useState(1);
   const createDescriptionMarkup = (html) => {

src/client/constants/action-types.ts

@@ -38,6 +38,14 @@ export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
 export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED =
   "IMS_COMIC_BOOK_GROUPS_CALL_FAILED";
 
+// extracted comic archive
+export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS =
+  "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS";
+export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS =
+  "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS";
+export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_FAILED =
+  "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_FAILED";
+
 // AirDC++
 export const AIRDCPP_SEARCH_IN_PROGRESS = "AIRDCPP_SEARCH_IN_PROGRESS";
 export const AIRDCPP_SEARCH_RESULTS_ADDED = "AIRDCPP_SEARCH_RESULTS_ADDED";

src/client/reducers/fileops.reducer.ts

@@ -13,6 +13,8 @@ import {
   IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
   IMS_COMIC_BOOK_GROUPS_FETCHED,
   IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
 } from "../constants/action-types";
 const initialState = {
   IMSCallInProgress: false,
@@ -22,6 +24,7 @@ const initialState = {
   isComicVineMetadataImportInProgress: false,
   comicVineMetadataImportError: {},
   rawImportError: {},
+  extractedComicBookArchive: [],
 };
 
 function fileOpsReducer(state = initialState, action) {
@@ -92,6 +95,19 @@ function fileOpsReducer(state = initialState, action) {
         error: action.error,
       };
     }
+    case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS: {
+      return {
+        ...state,
+        IMSCallInProgress: true,
+      };
+    }
+    case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS: {
+      return {
+        ...state,
+        extractedComicBookArchive: action.extractedComicBookArchive,
+        IMSCallInProgress: false,
+      };
+    }
     default:
       return state;
   }