🏗️ Fixed invalidation of archiveOps

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -25,6 +25,7 @@ export const ComicDetailContainer = (): ReactElement | null => {
       }),
   });
 
+  console.log(comicBookDetailData);
   {
     isError && <>Error</>;
   }

src/client/components/ComicDetail/TabControls.tsx

@@ -7,9 +7,9 @@ export const TabControls = (props): ReactElement => {
   // );
   const { filteredTabs, downloadCount } = props;
   const [active, setActive] = useState(filteredTabs[0].id);
-  useEffect(() => {
-    setActive(filteredTabs[0].id);
-  }, [filteredTabs]);
+  // useEffect(() => {
+  //   setActive(filteredTabs[0].id);
+  // }, [filteredTabs]);
 
   return (
     <>

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { DnD } from "../../shared/Draggable/DnD";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty } from "lodash";
 import SlidingPane from "react-sliding-pane";
 import { Canvas } from "../../shared/Canvas";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -16,12 +16,13 @@ import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
 
 export const ArchiveOperations = (props): ReactElement => {
   const { data } = props;
-  const queryClient = useQueryClient();
+
   const { socketIOInstance } = useStore(
     useShallow((state) => ({
       socketIOInstance: state.socketIOInstance,
     })),
   );
+  const queryClient = useQueryClient();
   // sliding panel config
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
@@ -70,7 +71,6 @@ export const ArchiveOperations = (props): ReactElement => {
           // Handle error if necessary
         }
       };
-
       fetchUncompressedArchive();
     }
 
@@ -97,6 +97,7 @@ export const ArchiveOperations = (props): ReactElement => {
     data: uncompressionResult,
     refetch,
     isLoading,
+    isSuccess,
   } = useQuery({
     queryFn: async () =>
       await axios({
@@ -121,6 +122,10 @@ export const ArchiveOperations = (props): ReactElement => {
     enabled: false,
   });
 
+  if (isSuccess) {
+    queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
+  }
+
   // sliding panel init
   const contentForSlidingPanel = {
     imageAnalysis: {
@@ -150,7 +155,6 @@ export const ArchiveOperations = (props): ReactElement => {
     setVisible(true);
   }, []);
 
-  console.log(uncompressedArchive);
   return (
     <div key={2}>
       <article
@@ -212,7 +216,7 @@ export const ArchiveOperations = (props): ReactElement => {
       </div>
 
       <div>
-        <div className="mt-5">
+        <div className="mt-10">
           {!isEmpty(uncompressedArchive) ? (
             <DnD
               data={uncompressedArchive}

src/client/components/Dashboard/Dashboard.tsx

@@ -44,7 +44,16 @@ export const Dashboard = (): ReactElement => {
     queryKey: ["recentComics"],
   });
 
-  console.log("hari om", recentComics);
+  const { data: volumeGroups } = useQuery({
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
+        method: "GET",
+      }),
+    queryKey: ["volumeGroups"],
+  });
+
+  console.log("hari om", volumeGroups);
   //   useEffect(() => {
   //     dispatch(fetchVolumeGroups());
   //     dispatch(
@@ -190,6 +199,10 @@ export const Dashboard = (): ReactElement => {
           )}
         </div>
       </section>
+
+      {/* Volume groups */}
+
+      <VolumeGroups volumeGroups={volumeGroups?.data.docs} />
     </div>
   );
 };

src/client/components/Dashboard/VolumeGroups.tsx

@@ -18,6 +18,7 @@ export const VolumeGroups = (props): ReactElement => {
     navigate(`/volumes/all`);
   };
 
+  console.log(props);
   return (
     <section className="volumes-container mt-4">
       <div className="content">

src/client/components/Settings/Settings.tsx

@@ -69,7 +69,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
           </div>
         </header>
         <div className="flex flex-row">
-          <div className="inset-y-0 w-80 bg-gray-800 text-white  h-screen overflow-y-auto">
+          <div className="inset-y-0 w-80 bg-gray-800 text-white h-full overflow-y-auto">
             <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
               {map(settingsObject, (settingObject, idx) => {
                 return (

src/client/components/shared/Draggable/DnD.tsx

@@ -21,7 +21,6 @@ import { Cover } from "./Cover";
 import { map } from "lodash";
 
 export const DnD = (data) => {
-  console.log(data.data);
   const [items, setItems] = useState(data.data);
   const [activeId, setActiveId] = useState(null);
   const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
@@ -65,7 +64,7 @@ export const DnD = (data) => {
                   className="mt-2 mb-2"
                   onClick={(e) => data.onClickHandler(url)}
                 >
-                  <div className="box p-2 pl-3 control-palette">
+                  <div className="box p-2 control-palette">
                     <span className="tag is-warning mr-2">{index}</span>
                     <span className="icon is-small mr-2">
                       <i className="fa-solid fa-vial"></i>

src/client/components/shared/Draggable/Grid.tsx

@@ -8,7 +8,6 @@ export function Grid({ children, columns }) {
         gridTemplateColumns: `repeat(${columns}, 200px)`,
         columnGap: 1,
         gridGap: 10,
-        padding: 10,
       }}
     >
       {children}