🔧 Fixing table styes

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: {
+    // imageAnalysis: {
-      content: () => {
+    //   content: () => {
-        return (
+    //     return (
-          <div>
+    //       <div>
-            <pre className="is-size-7">{currentImage}</pre>
+    //         <pre className="is-size-7">{currentImage}</pre>
-            {!isEmpty(imageAnalysisResult) ? (
+    //         {!isEmpty(imageAnalysisResult) ? (
-              <pre className="is-size-7 p-2 mt-3">
+    //           <pre className="is-size-7 p-2 mt-3">
-                <Canvas data={imageAnalysisResult} />
+    //             <Canvas data={imageAnalysisResult} />
-              </pre>
+    //           </pre>
-            ) : null}
+    //         ) : null}
-            <pre className="is-size-7 mt-3">
+    //         <pre className="is-size-7 mt-3">
-              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
+    //           {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
-            </pre>
+    //         </pre>
-          </div>
+    //       </div>
-        );
+    //     );
-      },
+    //   },
-    },
+    // },
   };
 
   // sliding panel handlers
@@ -95,11 +88,9 @@ export const ArchiveOperations = (props): ReactElement => {
     <div key={2}>
       <button
         className={
-          isComicBookExtractionInProgress
+          isLoading ? "button is-loading is-warning" : "button is-warning"
-            ? "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>
   );
 };

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>

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>
         ) : (

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-7">
-        <div className="flex flex-row gap-2 justify-between mt-5">
+          {/* 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;