2024-02-06 10:58:56 +00:00
4 changed files with 62 additions and 70 deletions
--- a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
+++ b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
@@ -3,7 +3,6 @@ import { DnD } from "../../shared/Draggable/DnD";
 import { isEmpty } from "lodash";
 import Sticky from "react-stickynode";
 import SlidingPane from "react-sliding-pane";
-import { extractComicArchive } from "../../../actions/fileops.actions";
 import { analyzeImage } from "../../../actions/fileops.actions";
 import { Canvas } from "../../shared/Canvas";
 import { useQuery } from "@tanstack/react-query";
@@ -23,64 +22,58 @@ export const ArchiveOperations = (props): ReactElement => {
  //     return state.fileOps.imageAnalysisResults;
  //   });

-  const unpackComicArchive = () => {
-    const { data } = useQuery({
-      queryFn: async () =>
-        await axios({
-          method: "POST",
-          url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
-          headers: {
-            "Content-Type": "application/json; charset=utf-8",
-          },
-          data: {
-            filePath: data.rawFileDetails.filePath,
-            options: {
-              type: "full",
-              purpose: "analysis",
-              imageResizeOptions: {
-                baseWidth: 275,
-              },
-            },
-          },
-        }),
-      queryKey: [""],
-    });
-    // dispatch(
-    //   extractComicArchive(data.rawFileDetails.filePath, {
-    //     type: "full",
-    //     purpose: "analysis",
-    //     imageResizeOptions: {
-    //       baseWidth: 275,
-    //     },
-    //   }),
-    // );
-  };
-
  // sliding panel config
  const [visible, setVisible] = useState(false);
  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
  // current image
  const [currentImage, setCurrentImage] = useState([]);

+  const {
+    data: uncompressedArchive,
+    refetch,
+    isLoading,
+  } = useQuery({
+    queryFn: async () =>
+      await axios({
+        method: "POST",
+        url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        data: {
+          filePath: data.rawFileDetails.filePath,
+          options: {
+            type: "full",
+            purpose: "analysis",
+            imageResizeOptions: {
+              baseWidth: 275,
+            },
+          },
+        },
+      }),
+    queryKey: [""],
+    enabled: false,
+  });
+  console.log(uncompressedArchive);
  // sliding panel init
  const contentForSlidingPanel = {
-    imageAnalysis: {
-      content: () => {
-        return (
-          <div>
-            <pre className="is-size-7">{currentImage}</pre>
-            {!isEmpty(imageAnalysisResult) ? (
-              <pre className="is-size-7 p-2 mt-3">
-                <Canvas data={imageAnalysisResult} />
-              </pre>
-            ) : null}
-            <pre className="is-size-7 mt-3">
-              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
-            </pre>
-          </div>
-        );
-      },
-    },
+    // imageAnalysis: {
+    //   content: () => {
+    //     return (
+    //       <div>
+    //         <pre className="is-size-7">{currentImage}</pre>
+    //         {!isEmpty(imageAnalysisResult) ? (
+    //           <pre className="is-size-7 p-2 mt-3">
+    //             <Canvas data={imageAnalysisResult} />
+    //           </pre>
+    //         ) : null}
+    //         <pre className="is-size-7 mt-3">
+    //           {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
+    //         </pre>
+    //       </div>
+    //     );
+    //   },
+    // },
  };

  // sliding panel handlers
@@ -95,11 +88,9 @@ export const ArchiveOperations = (props): ReactElement => {
    <div key={2}>
      <button
        className={
-          isComicBookExtractionInProgress
-            ? "button is-loading is-warning"
-            : "button is-warning"
+          isLoading ? "button is-loading is-warning" : "button is-warning"
        }
-        onClick={unpackComicArchive}
+        onClick={() => refetch()}
      >
        <span className="icon is-small">
          <i className="fa-solid fa-box-open"></i>
@@ -108,17 +99,17 @@ export const ArchiveOperations = (props): ReactElement => {
      </button>
      <div className="columns">
        <div className="mt-5">
-          {!isEmpty(extractedComicBookArchive) ? (
+          {!isEmpty(uncompressedArchive) ? (
            <DnD
-              data={extractedComicBookArchive}
+              data={uncompressedArchive}
              onClickHandler={openImageAnalysisPanel}
            />
          ) : null}
        </div>
-        {!isEmpty(extractedComicBookArchive) ? (
+        {!isEmpty(uncompressedArchive) ? (
          <div>
            <span className="has-text-size-4">
-              {extractedComicBookArchive.length} pages
+              {uncompressedArchive?.length} pages
            </span>
            <button className="button is-small is-light is-primary is-outlined">
              <span className="icon is-small">
@@ -129,7 +120,7 @@ export const ArchiveOperations = (props): ReactElement => {
          </div>
        ) : null}
      </div>
-      <SlidingPane
+      {/* <SlidingPane
        isOpen={visible}
        onRequestClose={() => setVisible(false)}
        title={"Image Analysis"}
@@ -137,7 +128,7 @@ export const ArchiveOperations = (props): ReactElement => {
      >
        {slidingPanelContentId !== "" &&
          contentForSlidingPanel[slidingPanelContentId].content()}
-      </SlidingPane>
+      </SlidingPane> */}
    </div>
  );
 };
--- a/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx
+++ b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx
@@ -4,7 +4,7 @@ import React, { ReactElement } from "react";
 export const ComicInfoXML = (data): ReactElement => {
  const { json } = data;
  return (
-    <div className="flex">
+    <div className="flex md:w-4/5 lg:w-78">
      <dl className="dark:bg-yellow-600 bg-yellow-200 p-3 rounded-lg">
        <dt>
          <p className="text-lg">{json.series[0]}</p>
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -85,7 +85,7 @@ export const Library = (): ReactElement => {
    return value.data ? (
      <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
        {/* Series Name */}
-        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+        <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
          <span className="pr-1 pt-1">
            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
          </span>
@@ -152,7 +152,7 @@ export const Library = (): ReactElement => {
            accessorKey: "_source.createdAt",
            cell: (info) => {
              return !isNil(info.getValue()) ? (
-                <div className="text-xs w-max ml-3 my-3 text-slate-600">
+                <div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900">
                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
                  {format(parseISO(info.getValue()), "h aaaa")}
                </div>
@@ -245,9 +245,6 @@ export const Library = (): ReactElement => {
        {!isUndefined(searchResults?.hits) ? (
          <div>
            <div>
-              <div className="my-5 flex self-start ml-32 w-fit">
-                <SearchBar searchHandler={(e) => searchIssues(e)} />
-              </div>
              <T2Table
                totalPages={searchResults.hits.total.value}
                columns={columns}
@@ -257,7 +254,9 @@ export const Library = (): ReactElement => {
                  nextPage,
                  previousPage,
                }}
-              />
+              >
+                <SearchBar searchHandler={(e) => searchIssues(e)} />
+              </T2Table>
            </div>
          </div>
        ) : (
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -70,8 +70,9 @@ export const T2Table = (tableOptions): ReactElement => {
  return (
    <div className="container max-w-fit mx-14">
      <div>
-        {/* Search bar */}
-        <div className="flex flex-row gap-2 justify-between mt-5">
+        <div className="flex flex-row gap-2 justify-between mt-7">
+          {/* Search bar */}
+          {tableOptions.children}
          {/* pagination controls */}
          <div>
            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
@@ -150,5 +151,6 @@ T2Table.propTypes = {
    previousPage: PropTypes.func,
  }),
  rowClickHandler: PropTypes.func,
+  children: PropTypes.any,
 };
 export default T2Table;