🔧 DnD for comic book page reorganization first draft

src/client/actions/comicinfo.actions.tsx

@@ -1,5 +1,6 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
+import { map } from "lodash";
 import qs from "qs";
 import { IExtractionOptions } from "threetwo-ui-typings";
 import {
@@ -9,6 +10,7 @@ import {
   IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
 } from "../constants/action-types";
 import { COMICBOOKINFO_SERVICE_URI } from "../constants/endpoints";
 
@@ -113,6 +115,10 @@ export const applyComicVineMatch =
 
 export const extractComicArchive =
   (path: string, options: IExtractionOptions) => async (dispatch) => {
+    const comicBookPages: string[] = [];
+    dispatch({
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+    });
     const extractedComicBookArchive = await axios({
       method: "POST",
       url: "http://localhost:3000/api/import/unrarArchive",
@@ -124,8 +130,21 @@ export const extractComicArchive =
         filePath: path,
       },
     });
+    map(extractedComicBookArchive.data, (page) => {
+      const foo = page.path.split("/");
+      const folderName = foo[foo.length - 1];
+      const imagePath = encodeURI(
+        "http://localhost:3000/userdata/expanded/" +
+          folderName +
+          "/" +
+          page.name +
+          page.extension,
+      );
+      comicBookPages.push(imagePath);
+    });
+    console.log(comicBookPages);
     dispatch({
       type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
-      extractedComicBookArchive: extractedComicBookArchive.data,
+      extractedComicBookArchive: comicBookPages,
     });
   };

src/client/components/ComicDetail.tsx

@@ -15,7 +15,10 @@ import Loader from "react-loader-spinner";
 import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
-import { getComicBookDetailById } from "../actions/comicinfo.actions";
+import {
+  getComicBookDetailById,
+  extractComicArchive,
+} from "../actions/comicinfo.actions";
 import { detectTradePaperbacks } from "../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
 const prettyBytes = require("pretty-bytes");
@@ -40,6 +43,8 @@ type ComicDetailProps = {};
 export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
+  const [comicBookPagesGridVisible, setComicBookPagesGridVisible] =
+    useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
 
   const comicVineSearchResults = useSelector(
@@ -54,6 +59,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicBookDetailData = useSelector(
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
+  const comicBookExtractionInProgress = useSelector(
+    (state: RootState) => state.fileOps.comicBookExtractionInProgress,
+  );
   const extractedComicBookArchive = useSelector(
     (state: RootState) => state.fileOps.extractedComicBookArchive,
   );
@@ -65,6 +73,24 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     dispatch(getComicBookDetailById(comicObjectId));
   }, [page, dispatch]);
 
+  const unpackComicArchive = useCallback(() => {
+    console.log("Asdas");
+    dispatch(
+      extractComicArchive(
+        comicBookDetailData.rawFileDetails.containedIn +
+          "/" +
+          comicBookDetailData.rawFileDetails.name +
+          comicBookDetailData.rawFileDetails.extension,
+        {
+          extractTarget: "book",
+          targetExtractionFolder:
+            "./userdata/expanded/" + comicBookDetailData.rawFileDetails.name,
+          extractionMode: "all",
+        },
+      ),
+    );
+  }, [dispatch, comicBookDetailData]);
+
   // sliding panel init
   const contentForSlidingPanel = {
     CVMatches: {
@@ -217,7 +243,14 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       name: "Archive Operations",
       content: (
         <div key={2}>
-          <DnD />
+          <button className="button is-warning" onClick={unpackComicArchive}>
+            Unpack comic archive
+          </button>
+          {!isEmpty(extractedComicBookArchive) ? (
+            <DnD data={extractedComicBookArchive} />
+          ) : (
+            "..."
+          )}
         </div>
       ),
     },

src/client/components/Cover.tsx

@@ -5,13 +5,15 @@ export const Cover = forwardRef(
     const inlineStyles = {
       opacity: faded ? "0.2" : "1",
       transformOrigin: "0 0",
-      height: index === 0 ? 410 : 200,
+      minHeight: index === 0 ? 300 : 300,
-      gridRowStart: index === 0 ? "span 2" : null,
+      maxWidth: 200,
-      gridColumnStart: index === 0 ? "span 2" : null,
+      gridRowStart: index === 0 ? "span" : null,
+      gridColumnStart: index === 0 ? "span" : null,
       backgroundImage: `url("${url}")`,
       backgroundSize: "cover",
       backgroundPosition: "center",
       backgroundColor: "grey",
+      border: "1px solid #CCC",
       borderRadius: "10px",
       ...style,
     };

src/client/components/DnD.tsx

@@ -18,10 +18,10 @@ import {
 import { Grid } from "./Grid";
 import { SortableCover } from "./SortableCover";
 import { Cover } from "./Cover";
-import photos from "./photos.json";
+import {  map } from "lodash";
 
-export const DnD = () => {
+export const DnD = (data) => {
-  const [items, setItems] = useState(photos);
+  const [items, setItems] = useState(data.data);
   const [activeId, setActiveId] = useState(null);
   const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
 
@@ -40,7 +40,6 @@ export const DnD = () => {
         return arrayMove(items, oldIndex, newIndex);
       });
     }
-    console.log(items);
     setActiveId(null);
   }
 
@@ -57,9 +56,9 @@ export const DnD = () => {
     >
       <SortableContext items={items} strategy={rectSortingStrategy}>
         <Grid columns={4}>
-          {items.map((url, index) => (
+          {map(items, (url, index) => {
-            <SortableCover key={url} url={url} index={index} />
+            return <SortableCover key={url} url={url} index={index} />;
-          ))}
+          })}
         </Grid>
       </SortableContext>
 

src/client/components/Grid.tsx

@@ -5,7 +5,8 @@ export function Grid({ children, columns }) {
     <div
       style={{
         display: "grid",
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateColumns: `repeat(${columns}, 200px)`,
+        columnGap: 1,
         gridGap: 10,
         padding: 10,
       }}

src/client/reducers/fileops.reducer.ts

@@ -1,3 +1,4 @@
+import { LOCATION_CHANGE } from "connected-react-router";
 import {
   RMQ_SOCKET_CONNECTED,
   RMQ_SOCKET_DISCONNECTED,
@@ -18,6 +19,7 @@ import {
 } from "../constants/action-types";
 const initialState = {
   IMSCallInProgress: false,
+  comicBookExtractionInProgress: false,
   comicBookMetadata: [],
   comicVolumeGroups: [],
   isSocketConnected: false,
@@ -98,16 +100,22 @@ function fileOpsReducer(state = initialState, action) {
     case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS: {
       return {
         ...state,
-        IMSCallInProgress: true,
+        comicBookExtractionInProgress: true,
       };
     }
     case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS: {
       return {
         ...state,
         extractedComicBookArchive: action.extractedComicBookArchive,
-        IMSCallInProgress: false,
+        comicBookExtractionInProgress: false,
       };
     }
+    case LOCATION_CHANGE: {
+      return {
+        ...state,
+        extractedComicBookArchive: [],
+      }
+    }
     default:
       return state;
   }