🔧 DnD for comic book page reorganization first draft

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,
-      gridRowStart: index === 0 ? "span 2" : null,
-      gridColumnStart: index === 0 ? "span 2" : null,
+      minHeight: index === 0 ? 300 : 300,
+      maxWidth: 200,
+      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 = () => {
-  const [items, setItems] = useState(photos);
+export const DnD = (data) => {
+  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) => (
-            <SortableCover key={url} url={url} index={index} />
-          ))}
+          {map(items, (url, 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,
       }}