From b1d63b02c42a58a6270649e1dca4e1b3728b962c Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Wed, 15 Nov 2023 21:03:49 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Refactoring=20the=20Lib?= =?UTF-8?q?rary=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/components/Library/Library.tsx | 103 +++++++++--------- src/client/components/Library/SearchBar.tsx | 37 +++---- src/client/components/PullList/PullList.tsx | 22 ++-- src/client/components/Volumes/Volumes.tsx | 34 +++--- .../components/WantedComics/WantedComics.tsx | 73 +++++++------ src/client/components/shared/Navbar.tsx | 52 ++++++--- src/client/index.tsx | 5 + 7 files changed, 173 insertions(+), 153 deletions(-) diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index 19f3084..7b05acd 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -4,9 +4,10 @@ import { useNavigate } from "react-router-dom"; import { isEmpty, isNil, isUndefined } from "lodash"; import MetadataPanel from "../shared/MetadataPanel"; import T2Table from "../shared/T2Table"; -import { useDispatch, useSelector } from "react-redux"; import { searchIssue } from "../../actions/fileops.actions"; import ellipsize from "ellipsize"; +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; /** * Component that tabulates the contents of the user's ThreeTwo Library. @@ -16,29 +17,31 @@ import ellipsize from "ellipsize"; * */ export const Library = (): ReactElement => { - const searchResults = useSelector( - (state: RootState) => state.fileOps.libraryComics, - ); - const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError); - const dispatch = useDispatch(); - useEffect(() => { - dispatch( - searchIssue( - { + // const searchResults = useSelector( + // (state: RootState) => state.fileOps.libraryComics, + // ); + // const searchError = useSelector( + // (state: RootState) => state.fileOps.librarySearchError, + // ); + // const dispatch = useDispatch(); + const { data, isLoading, isError } = useQuery({ + queryKey: ["comics"], + queryFn: async () => + axios({ + method: "POST", + url: "http://localhost:3000/api/search/searchIssue", + data: { query: {}, - }, - { pagination: { size: 15, from: 0, }, type: "all", - trigger: "libraryPage", }, - ), - ); - }, []); - + }), + }); + const searchResults = data?.data; + console.log(searchResults); // programatically navigate to comic detail const navigate = useNavigate(); const navigateToComicDetail = (row) => { @@ -157,21 +160,21 @@ export const Library = (): ReactElement => { * **/ const nextPage = useCallback((pageIndex: number, pageSize: number) => { - dispatch( - searchIssue( - { - query: {}, - }, - { - pagination: { - size: pageSize, - from: pageSize * pageIndex + 1, - }, - type: "all", - trigger: "libraryPage", - }, - ), - ); + // dispatch( + // searchIssue( + // { + // query: {}, + // }, + // { + // pagination: { + // size: pageSize, + // from: pageSize * pageIndex + 1, + // }, + // type: "all", + // trigger: "libraryPage", + // }, + // ), + // ); }, []); /** @@ -188,21 +191,21 @@ export const Library = (): ReactElement => { } else { from = (pageIndex - 1) * pageSize + 2 - 16; } - dispatch( - searchIssue( - { - query: {}, - }, - { - pagination: { - size: pageSize, - from, - }, - type: "all", - trigger: "libraryPage", - }, - ), - ); + // dispatch( + // searchIssue( + // { + // query: {}, + // }, + // { + // pagination: { + // size: pageSize, + // from, + // }, + // type: "all", + // trigger: "libraryPage", + // }, + // ), + // ); }, []); // ImportStatus.propTypes = { @@ -214,7 +217,7 @@ export const Library = (): ReactElement => {

Library

- {!isEmpty(searchResults) ? ( + {!isUndefined(searchResults?.data?.data) ? (
{ 
-                {!isUndefined(searchError.data) &&
+                {!isUndefined(searchResults?.code === 404 && !isLoading) &&
                   JSON.stringify(
-                    searchError.data.meta.body.error.root_cause,
+                    searchResults.data.meta.body.error.root_cause,
                     null,
                     4,
                   )}
diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx
index 089704c..2e3d774 100644
--- a/src/client/components/Library/SearchBar.tsx
+++ b/src/client/components/Library/SearchBar.tsx
@@ -2,29 +2,27 @@ import React, { ReactElement, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
 import { Link } from "react-router-dom";
-import { useDispatch } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 
 export const SearchBar = (): ReactElement => {
-  const dispatch = useDispatch();
   const handleSubmit = useCallback((e) => {
-    dispatch(
-      searchIssue(
-        {
-          query: {
-            volumeName: e.search,
-          },
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "volumeName",
-          trigger: "libraryPage",
-        },
-      ),
-    );
+    // dispatch(
+    //   searchIssue(
+    //     {
+    //       query: {
+    //         volumeName: e.search,
+    //       },
+    //     },
+    //     {
+    //       pagination: {
+    //         size: 25,
+    //         from: 0,
+    //       },
+    //       type: "volumeName",
+    //       trigger: "libraryPage",
+    //     },
+    //   ),
+    // );
   }, []);
   return (
     

@@ -56,7 +54,6 @@ export const SearchBar = (): ReactElement => {
           
         )}
       />
-      
     

   );
 };
diff --git a/src/client/components/PullList/PullList.tsx b/src/client/components/PullList/PullList.tsx
index b264248..8b2cc83 100644
--- a/src/client/components/PullList/PullList.tsx
+++ b/src/client/components/PullList/PullList.tsx
@@ -1,25 +1,23 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
 import T2Table from "../shared/T2Table";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
-import { useDispatch, useSelector } from "react-redux";
 import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
 import { isNil } from "lodash";
 
 export const PullList = (): ReactElement => {
-  const pullListComics = useSelector(
-    (state: RootState) => state.comicInfo.pullList,
-  );
+  // const pullListComics = useSelector(
+  //   (state: RootState) => state.comicInfo.pullList,
+  // );
 
-  const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(
-      getWeeklyPullList({
-        startDate: "2023-7-28",
-        pageSize: "15",
-        currentPage: "1",
-      }),
-    );
+    // dispatch(
+    //   getWeeklyPullList({
+    //     startDate: "2023-7-28",
+    //     pageSize: "15",
+    //     currentPage: "1",
+    //   }),
+    // );
   }, []);
   const nextPageHandler = () => {};
   const previousPageHandler = () => {};
diff --git a/src/client/components/Volumes/Volumes.tsx b/src/client/components/Volumes/Volumes.tsx
index f4d9f1e..897209b 100644
--- a/src/client/components/Volumes/Volumes.tsx
+++ b/src/client/components/Volumes/Volumes.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement, useEffect, useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
@@ -8,24 +7,23 @@ import { convert } from "html-to-text";
 import { isUndefined } from "lodash";
 
 export const Volumes = (props): ReactElement => {
-  const volumes = useSelector((state: RootState) => state.fileOps.volumes);
-  const dispatch = useDispatch();
+  // const volumes = useSelector((state: RootState) => state.fileOps.volumes);
   useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "volumes",
-          trigger: "volumesPage",
-        },
-      ),
-    );
+    // dispatch(
+    //   searchIssue(
+    //     {
+    //       query: {},
+    //     },
+    //     {
+    //       pagination: {
+    //         size: 25,
+    //         from: 0,
+    //       },
+    //       type: "volumes",
+    //       trigger: "volumesPage",
+    //     },
+    //   ),
+    // );
   }, []);
   const columnData = useMemo(
     () => [
diff --git a/src/client/components/WantedComics/WantedComics.tsx b/src/client/components/WantedComics/WantedComics.tsx
index e4de3c4..9125368 100644
--- a/src/client/components/WantedComics/WantedComics.tsx
+++ b/src/client/components/WantedComics/WantedComics.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement, useCallback, useEffect, useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import SearchBar from "../Library/SearchBar";
 import T2Table from "../shared/T2Table";
@@ -7,26 +6,25 @@ import { isEmpty, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 
 export const WantedComics = (props): ReactElement => {
-  const wantedComics = useSelector(
-    (state: RootState) => state.fileOps.wantedComics,
-  );
-  const dispatch = useDispatch();
+  // const wantedComics = useSelector(
+  //   (state: RootState) => state.fileOps.wantedComics,
+  // );
   useEffect(() => {
-    dispatch(
-      searchIssue(
-        {
-          query: {},
-        },
-        {
-          pagination: {
-            size: 25,
-            from: 0,
-          },
-          type: "wanted",
-          trigger: "wantedComicsPage"
-        },
-      ),
-    );
+    // dispatch(
+    //   searchIssue(
+    //     {
+    //       query: {},
+    //     },
+    //     {
+    //       pagination: {
+    //         size: 25,
+    //         from: 0,
+    //       },
+    //       type: "wanted",
+    //       trigger: "wantedComicsPage"
+    //     },
+    //   ),
+    // );
   }, []);
 
   const columnData = [
@@ -37,7 +35,7 @@ export const WantedComics = (props): ReactElement => {
           header: "Details",
           id: "comicDetails",
           minWidth: 350,
-          accessorFn: data => data,
+          accessorFn: (data) => data,
           cell: (value) => ,
         },
       ],
@@ -49,8 +47,10 @@ export const WantedComics = (props): ReactElement => {
           header: "Files",
           accessorKey: "acquisition",
           align: "right",
-          cell: props => {
-            const { directconnect: { downloads } } = props.getValue();
+          cell: (props) => {
+            const {
+              directconnect: { downloads },
+            } = props.getValue();
             return (
               
 {
                 }}
               >
                 {downloads.length > 0 ? (
-                  
-                    {downloads.length}
-                  
+                  {downloads.length}
                 ) : null}
               

             );
@@ -72,11 +70,17 @@ export const WantedComics = (props): ReactElement => {
           header: "Download Details",
           id: "downloadDetails",
           accessorKey: "acquisition",
-          cell: data => 
    
-            {data.getValue().directconnect.downloads.map((download, idx) => {
-              return 
  1. {download.name}
    2. ;
-            })}
-          

+          cell: (data) => (
+            
    
+              {data.getValue().directconnect.downloads.map((download, idx) => {
+                return (
+                  
  1. 
+                    {download.name}
+                  
    2. 
+                );
+              })}
+            

+          ),
         },
         {
           header: "Type",
@@ -92,7 +96,7 @@ export const WantedComics = (props): ReactElement => {
    * @param {number} pageIndex
    * @param {number} pageSize
    * @returns void
-   *  
+   *
    **/
   const nextPage = useCallback((pageIndex: number, pageSize: number) => {
     dispatch(
@@ -112,7 +116,6 @@ export const WantedComics = (props): ReactElement => {
     );
   }, []);
 
-
   /**
    * Pagination control that fetches the previous x (pageSize) items
    * based on the y (pageIndex) offset from the Elasticsearch index
@@ -138,7 +141,7 @@ export const WantedComics = (props): ReactElement => {
             from,
           },
           type: "wanted",
-          trigger: "wantedComicsPage"
+          trigger: "wantedComicsPage",
         },
       ),
     );
@@ -161,7 +164,7 @@ export const WantedComics = (props): ReactElement => {
                   nextPage: nextPage,
                   previousPage: previousPage,
                 }}
-              // rowClickHandler={navigateToComicDetail}
+                // rowClickHandler={navigateToComicDetail}
               />
               {/* pagination controls */}
diff --git a/src/client/components/shared/Navbar.tsx b/src/client/components/shared/Navbar.tsx index ba07168..0763f1f 100644 --- a/src/client/components/shared/Navbar.tsx +++ b/src/client/components/shared/Navbar.tsx @@ -13,12 +13,14 @@ const Navbar: React.FunctionComponent = (props) => { airDCPPDisconnectionInfo, airDCPPSessionInformation, airDCPPDownloadTick, + importJobQueue, } = useStore( useShallow((state) => ({ airDCPPSocketConnected: state.airDCPPSocketConnected, airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo, airDCPPSessionInformation: state.airDCPPSessionInformation, airDCPPDownloadTick: state.airDCPPDownloadTick, + importJobQueue: state.importJobQueue, })), ); // const downloadProgressTick = useSelector( @@ -35,24 +37,6 @@ const Navbar: React.FunctionComponent = (props) => { // (state: RootState) => state.airdcpp.socketDisconnectionReason, // ); - // Import-related selector hooks - // const successfulImportJobCount = useSelector( - // (state: RootState) => state.fileOps.successfulJobCount, - // ); - // const failedImportJobCount = useSelector( - // (state: RootState) => state.fileOps.failedJobCount, - // ); - // - // const lastQueueJob = useSelector( - // (state: RootState) => state.fileOps.lastQueueJob, - // ); - // const libraryQueueImportStatus = useSelector( - // (state: RootState) => state.fileOps.LSQueueImportStatus, - // ); - // - // const allImportJobResults = useSelector( - // (state: RootState) => state.fileOps.importJobStatistics, - // ); return (