diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx index 5570daf..27d3d0c 100644 --- a/src/client/components/ComicDetail/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -10,12 +10,10 @@ import { downloadAirDCPPItem, getBundlesForComic, } from "../../actions/airdcpp.actions"; -import { useDispatch, useSelector } from "react-redux"; import { RootState, SearchInstance } from "threetwo-ui-typings"; import ellipsize from "ellipsize"; import { Form, Field } from "react-final-form"; import { isEmpty, isNil, map } from "lodash"; -import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; interface IAcquisitionPanelProps { query: any; @@ -48,25 +46,27 @@ export const AcquisitionPanel = ( // const settings = useSelector((state: RootState) => state.settings.data); const airDCPPConfiguration = useContext(AirDCPPSocketContext); - const dispatch = useDispatch(); const [dcppQuery, setDcppQuery] = useState({}); + // Construct a AirDC++ query based on metadata inferred, upon component mount + // Pre-populate the search input with the search string, so that + // All the user has to do is hit "Search AirDC++" useEffect(() => { - if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) { - // AirDC++ search query - const dcppSearchQuery = { - query: { - pattern: `${sanitizedIssueName.replace(/#/g, "")}`, - extensions: ["cbz", "cbr", "cb7"], - }, - hub_urls: map( - airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs, - (item) => item.value, - ), - priority: 5, - }; - setDcppQuery(dcppSearchQuery); - } + // if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) { + // // AirDC++ search query + // const dcppSearchQuery = { + // query: { + // pattern: `${sanitizedIssueName.replace(/#/g, "")}`, + // extensions: ["cbz", "cbr", "cb7"], + // }, + // hub_urls: map( + // airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs, + // (item) => item.value, + // ), + // priority: 5, + // }; + // setDcppQuery(dcppSearchQuery); + // } }, [airDCPPConfiguration]); const getDCPPSearchResults = useCallback( @@ -82,45 +82,45 @@ export const AcquisitionPanel = ( ), priority: 5, }; - dispatch( - search(manualQuery, airDCPPConfiguration.airDCPPState.socket, { - username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, - password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, - }), - ); + // dispatch( + // search(manualQuery, airDCPPConfiguration.airDCPPState.socket, { + // username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, + // password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, + // }), + // ); }, - [dispatch, airDCPPConfiguration], + [airDCPPConfiguration], ); // download via AirDC++ const downloadDCPPResult = useCallback( (searchInstanceId, resultId, name, size, type) => { - dispatch( - downloadAirDCPPItem( - searchInstanceId, - resultId, - props.comicObjectId, - name, - size, - type, - airDCPPConfiguration.airDCPPState.socket, - { - username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, - password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, - }, - ), - ); + // dispatch( + // downloadAirDCPPItem( + // searchInstanceId, + // resultId, + // props.comicObjectId, + // name, + // size, + // type, + // airDCPPConfiguration.airDCPPState.socket, + // { + // username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, + // password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, + // }, + // ), + // ); // this is to update the download count badge on the downloads tab - dispatch( - getBundlesForComic( - props.comicObjectId, - airDCPPConfiguration.airDCPPState.socket, - { - username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, - password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, - }, - ), - ); + // dispatch( + // getBundlesForComic( + // props.comicObjectId, + // airDCPPConfiguration.airDCPPState.socket, + // { + // username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, + // password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, + // }, + // ), + // ); }, [airDCPPConfiguration], ); @@ -336,4 +336,4 @@ export const AcquisitionPanel = ( ); }; -export default AcquisitionPanel; \ No newline at end of file +export default AcquisitionPanel; diff --git a/src/client/components/ComicDetail/ActionMenu/Menu.tsx b/src/client/components/ComicDetail/ActionMenu/Menu.tsx index 829081e..39bda45 100644 --- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx +++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx @@ -1,6 +1,5 @@ import { filter, isEmpty, isNil, isUndefined } from "lodash"; import React, { ReactElement, useCallback } from "react"; -import { useSelector, useDispatch } from "react-redux"; import Select, { components } from "react-select"; import { fetchComicVineMatches } from "../../../actions/fileops.actions"; import { refineQuery } from "filename-parser"; @@ -8,7 +7,6 @@ import { refineQuery } from "filename-parser"; export const Menu = (props): ReactElement => { const { data } = props; const { setSlidingPanelContentId, setVisible } = props.handlers; - const dispatch = useDispatch(); const openDrawerWithCVMatches = useCallback(() => { let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery; let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery; @@ -18,10 +16,10 @@ export const Menu = (props): ReactElement => { } else if (!isEmpty(data.sourcedMetadata)) { issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name); } - dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery)); + // dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery)); setSlidingPanelContentId("CVMatches"); setVisible(true); - }, [dispatch, data]); + }, [data]); const openEditMetadataPanel = useCallback(() => { setSlidingPanelContentId("editComicBookMetadata"); diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx index 0777e55..5669be9 100644 --- a/src/client/components/ComicDetail/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -1,5 +1,4 @@ import React, { useState, ReactElement, useCallback } from "react"; -import { useDispatch, useSelector } from "react-redux"; import { useParams } from "react-router-dom"; import Card from "../shared/Carda"; import { ComicVineMatchPanel } from "./ComicVineMatchPanel"; @@ -55,34 +54,34 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { const [slidingPanelContentId, setSlidingPanelContentId] = useState(""); const [modalIsOpen, setIsOpen] = useState(false); - const comicVineSearchResults = useSelector( - (state: RootState) => state.comicInfo.searchResults, - ); - const comicVineSearchQueryObject = useSelector( - (state: RootState) => state.comicInfo.searchQuery, - ); - const comicVineAPICallProgress = useSelector( - (state: RootState) => state.comicInfo.inProgress, - ); - - const extractedComicBook = useSelector( - (state: RootState) => state.fileOps.extractedComicBookArchive.reading, - ); + // const comicVineSearchResults = useSelector( + // (state: RootState) => state.comicInfo.searchResults, + // ); + // const comicVineSearchQueryObject = useSelector( + // (state: RootState) => state.comicInfo.searchQuery, + // ); + // const comicVineAPICallProgress = useSelector( + // (state: RootState) => state.comicInfo.inProgress, + // ); + // + // const extractedComicBook = useSelector( + // (state: RootState) => state.fileOps.extractedComicBookArchive.reading, + // ); const { comicObjectId } = useParams<{ comicObjectId: string }>(); - const dispatch = useDispatch(); + // const dispatch = useDispatch(); const openModal = useCallback((filePath) => { setIsOpen(true); - dispatch( - extractComicArchive(filePath, { - type: "full", - purpose: "reading", - imageResizeOptions: { - baseWidth: 1024, - }, - }), - ); + // dispatch( + // extractComicArchive(filePath, { + // type: "full", + // purpose: "reading", + // imageResizeOptions: { + // baseWidth: 1024, + // }, + // }), + // ); }, []); const afterOpenModal = useCallback((things) => { diff --git a/src/client/components/ComicDetail/ComicDetailContainer.tsx b/src/client/components/ComicDetail/ComicDetailContainer.tsx index 9f4416e..3143fc1 100644 --- a/src/client/components/ComicDetail/ComicDetailContainer.tsx +++ b/src/client/components/ComicDetail/ComicDetailContainer.tsx @@ -1,22 +1,19 @@ import { isEmpty, isNil, isUndefined } from "lodash"; import React, { ReactElement, useContext, useEffect, useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; import { useParams } from "react-router-dom"; import { getComicBookDetailById } from "../../actions/comicinfo.actions"; import { ComicDetail } from "../ComicDetail/ComicDetail"; export const ComicDetailContainer = (): ReactElement | null => { - const comicBookDetailData = useSelector( - (state: RootState) => state.comicInfo.comicBookDetail, - ); - const dispatch = useDispatch(); + // const comicBookDetailData = useSelector( + // (state: RootState) => state.comicInfo.comicBookDetail, + // ); const { comicObjectId } = useParams<{ comicObjectId: string }>(); + console.log(comicObjectId); useEffect(() => { - dispatch(getComicBookDetailById(comicObjectId)); + // dispatch(getComicBookDetailById(comicObjectId)); // dispatch(getSettings()); - }, [dispatch]); - return !isEmpty(comicBookDetailData) ? ( - - ) : null; + }, []); + return ; }; diff --git a/src/client/components/ComicDetail/ComicVineSearchForm.tsx b/src/client/components/ComicDetail/ComicVineSearchForm.tsx index 71b4129..7c08a01 100644 --- a/src/client/components/ComicDetail/ComicVineSearchForm.tsx +++ b/src/client/components/ComicDetail/ComicVineSearchForm.tsx @@ -2,7 +2,6 @@ import React, { useCallback } from "react"; import { Form, Field } from "react-final-form"; import Collapsible from "react-collapsible"; import { fetchComicVineMatches } from "../../actions/fileops.actions"; -import { useDispatch } from "react-redux"; /** * Component for performing search against ComicVine @@ -14,7 +13,6 @@ import { useDispatch } from "react-redux"; * ) */ export const ComicVineSearchForm = (data) => { - const dispatch = useDispatch(); const onSubmit = useCallback((value) => { const userInititatedQuery = { inferredIssueDetails: { @@ -24,7 +22,7 @@ export const ComicVineSearchForm = (data) => { year: value.issueYear, }, }; - dispatch(fetchComicVineMatches(data, userInititatedQuery)); + // dispatch(fetchComicVineMatches(data, userInititatedQuery)); }, []); const validate = () => { return true; diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx index 21d53f6..1898cd7 100644 --- a/src/client/components/ComicDetail/DownloadsPanel.tsx +++ b/src/client/components/ComicDetail/DownloadsPanel.tsx @@ -1,12 +1,10 @@ import React, { useEffect, useContext, ReactElement } from "react"; import { getBundlesForComic } from "../../actions/airdcpp.actions"; -import { useDispatch, useSelector } from "react-redux"; import { RootState } from "threetwo-ui-typings"; import { isEmpty, isNil, map } from "lodash"; import prettyBytes from "pretty-bytes"; import dayjs from "dayjs"; import ellipsize from "ellipsize"; -import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; interface IDownloadsPanelProps { data: any; @@ -16,34 +14,33 @@ interface IDownloadsPanelProps { export const DownloadsPanel = ( props: IDownloadsPanelProps, ): ReactElement | null => { - const bundles = useSelector((state: RootState) => { - return state.airdcpp.bundles; - }); - - // AirDCPP Socket initialization - const userSettings = useSelector((state: RootState) => state.settings.data); - const airDCPPConfiguration = useContext(AirDCPPSocketContext); + // const bundles = useSelector((state: RootState) => { + // return state.airdcpp.bundles; + // }); + // + // // AirDCPP Socket initialization + // const userSettings = useSelector((state: RootState) => state.settings.data); + // const airDCPPConfiguration = useContext(AirDCPPSocketContext); const { airDCPPState: { socket, settings }, } = airDCPPConfiguration; - const dispatch = useDispatch(); // Fetch the downloaded files and currently-downloading file(s) from AirDC++ useEffect(() => { try { if (!isEmpty(userSettings)) { - dispatch( - getBundlesForComic(props.comicObjectId, socket, { - username: `${settings.directConnect.client.host.username}`, - password: `${settings.directConnect.client.host.password}`, - }), - ); + // dispatch( + // getBundlesForComic(props.comicObjectId, socket, { + // username: `${settings.directConnect.client.host.username}`, + // password: `${settings.directConnect.client.host.password}`, + // }), + // ); } } catch (error) { throw new Error(error); } - }, [dispatch, airDCPPConfiguration]); + }, [airDCPPConfiguration]); const Bundles = (props) => { return !isEmpty(props.data) ? ( diff --git a/src/client/components/ComicDetail/EditMetadataPanel.tsx b/src/client/components/ComicDetail/EditMetadataPanel.tsx index 77d881d..b911370 100644 --- a/src/client/components/ComicDetail/EditMetadataPanel.tsx +++ b/src/client/components/ComicDetail/EditMetadataPanel.tsx @@ -1,5 +1,4 @@ import React, { ReactElement, useCallback, useEffect, useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; import { Form, Field } from "react-final-form"; import arrayMutators from "final-form-arrays"; import { FieldArray } from "react-final-form-arrays"; @@ -9,7 +8,7 @@ import TextareaAutosize from "react-textarea-autosize"; export const EditMetadataPanel = (props): ReactElement => { const validate = async () => {}; const onSubmit = async () => {}; - + const AsyncSelectPaginateAdapter = ({ input, ...rest }) => { return ( { /> ); }; - const rawFileDetails = useSelector( - (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name, - ); - const dispatch = useDispatch(); + // const rawFileDetails = useSelector( + // (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name, + // ); return ( <> diff --git a/src/client/components/ComicDetail/MatchResult.tsx b/src/client/components/ComicDetail/MatchResult.tsx index d057b65..7b13ba0 100644 --- a/src/client/components/ComicDetail/MatchResult.tsx +++ b/src/client/components/ComicDetail/MatchResult.tsx @@ -1,5 +1,4 @@ import React, { useCallback } from "react"; -import { useDispatch, useSelector } from "react-redux"; import { isNil, map } from "lodash"; import { applyComicVineMatch } from "../../actions/comicinfo.actions"; import { convert } from "html-to-text"; @@ -15,12 +14,11 @@ const handleBrokenImage = (e) => { }; export const MatchResult = (props: MatchResultProps) => { - const dispatch = useDispatch(); const applyCVMatch = useCallback( - (match, comicObjectId) => { - dispatch(applyComicVineMatch(match, comicObjectId)); - }, - [dispatch], + // (match, comicObjectId) => { + // dispatch(applyComicVineMatch(match, comicObjectId)); + // }, + [], ); return ( <> diff --git a/src/client/components/ComicDetail/TabControls.tsx b/src/client/components/ComicDetail/TabControls.tsx index 11618cd..0d543ec 100644 --- a/src/client/components/ComicDetail/TabControls.tsx +++ b/src/client/components/ComicDetail/TabControls.tsx @@ -1,11 +1,10 @@ import React, { ReactElement, useEffect, useState } from "react"; import { isEmpty, isNil } from "lodash"; -import { useSelector } from "react-redux"; export const TabControls = (props): ReactElement => { - const comicBookDetailData = useSelector( - (state: RootState) => state.comicInfo.comicBookDetail, - ); + // const comicBookDetailData = useSelector( + // (state: RootState) => state.comicInfo.comicBookDetail, + // ); const { filteredTabs } = props; const [active, setActive] = useState(filteredTabs[0].id); diff --git a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx index b1af5f8..3eb94e2 100644 --- a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx +++ b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx @@ -1,5 +1,4 @@ import React, { ReactElement, useCallback, useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; import { DnD } from "../../shared/Draggable/DnD"; import { isEmpty } from "lodash"; import Sticky from "react-stickynode"; @@ -10,28 +9,27 @@ import { Canvas } from "../../shared/Canvas"; export const ArchiveOperations = (props): ReactElement => { const { data } = props; - const isComicBookExtractionInProgress = useSelector( - (state: RootState) => state.fileOps.comicBookExtractionInProgress, - ); - const extractedComicBookArchive = useSelector( - (state: RootState) => state.fileOps.extractedComicBookArchive.analysis, - ); + // const isComicBookExtractionInProgress = useSelector( + // (state: RootState) => state.fileOps.comicBookExtractionInProgress, + // ); + // const extractedComicBookArchive = useSelector( + // (state: RootState) => state.fileOps.extractedComicBookArchive.analysis, + // ); + // + // const imageAnalysisResult = useSelector((state: RootState) => { + // return state.fileOps.imageAnalysisResults; + // }); - const imageAnalysisResult = useSelector((state: RootState) => { - return state.fileOps.imageAnalysisResults; - }); - - const dispatch = useDispatch(); const unpackComicArchive = useCallback(() => { - dispatch( - extractComicArchive(data.rawFileDetails.filePath, { - type: "full", - purpose: "analysis", - imageResizeOptions: { - baseWidth: 275, - }, - }), - ); + // dispatch( + // extractComicArchive(data.rawFileDetails.filePath, { + // type: "full", + // purpose: "analysis", + // imageResizeOptions: { + // baseWidth: 275, + // }, + // }), + // ); }, []); // sliding panel config @@ -64,7 +62,7 @@ export const ArchiveOperations = (props): ReactElement => { // sliding panel handlers const openImageAnalysisPanel = useCallback((imageFilePath) => { setSlidingPanelContentId("imageAnalysis"); - dispatch(analyzeImage(imageFilePath)); + // dispatch(analyzeImage(imageFilePath)); setCurrentImage(imageFilePath); setVisible(true); }, []); @@ -126,4 +124,4 @@ export const ArchiveOperations = (props): ReactElement => { ); }; -export default ArchiveOperations; \ No newline at end of file +export default ArchiveOperations; diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index b81c1b1..227e75d 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -19,6 +19,7 @@ export const Library = (): ReactElement => { // Default page state // offset: 0 const [offset, setOffset] = useState(0); + // Method to fetch paginated issues const fetchIssues = async (searchQuery, offset, type) => { let pagination = { @@ -35,6 +36,7 @@ export const Library = (): ReactElement => { }, }); }; + const { data, isLoading, isError, isPlaceholderData } = useQuery({ queryKey: ["comics", offset], queryFn: () => fetchIssues({}, offset, "all"), @@ -42,8 +44,8 @@ export const Library = (): ReactElement => { }); const searchResults = data?.data; - console.log(searchResults); - // programatically navigate to comic detail + + // Programmatically navigate to comic detail const navigate = useNavigate(); const navigateToComicDetail = (row) => { navigate(`/comic/details/${row.original._id}`); diff --git a/src/client/index.tsx b/src/client/index.tsx index 58c9563..fdc4617 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -12,6 +12,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import Import from "./components/Import/Import"; import Dashboard from "./components/Dashboard/Dashboard"; import TabulatedContentContainer from "./components/Library/TabulatedContentContainer"; +import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer"; const queryClient = new QueryClient(); @@ -27,6 +28,10 @@ const router = createBrowserRouter([ path: "library", element: , }, + { + path: "comic/details/:comicObjectId", + element: , + }, { path: "import", element: }, ], },