frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🏗️ Refactoring ComicDetail page and its children

Browse Source
This commit is contained in:
Rishi Ghan
2023-11-16 09:30:41 -06:00
parent 199ddc2859
commit 4d2d7da5b4
12 changed files with 139 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/client/components/ComicDetail/AcquisitionPanel.tsx
View File

@@ -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;
export default AcquisitionPanel;

6
src/client/components/ComicDetail/ActionMenu/Menu.tsx
View File

@@ -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");

47
src/client/components/ComicDetail/ComicDetail.tsx
View File

@@ -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) => {

17
src/client/components/ComicDetail/ComicDetailContainer.tsx
View File

@@ -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) ? (
<ComicDetail data={comicBookDetailData} />
) : null;
}, []);
return <ComicDetail data={comicBookDetailData} />;
};

4
src/client/components/ComicDetail/ComicVineSearchForm.tsx
View File

@@ -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;

31
src/client/components/ComicDetail/DownloadsPanel.tsx
View File

@@ -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) ? (

10
src/client/components/ComicDetail/EditMetadataPanel.tsx
View File

@@ -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 (
<AsyncSelectPaginate
@@ -28,10 +27,9 @@ export const EditMetadataPanel = (props): ReactElement => {
/>
);
};
const rawFileDetails = useSelector(
(state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
);
const dispatch = useDispatch();
// const rawFileDetails = useSelector(
// (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
// );
return (
<>

10
src/client/components/ComicDetail/MatchResult.tsx
View File

@@ -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 (
<>

7
src/client/components/ComicDetail/TabControls.tsx
View File

@@ -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);

44
src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
View File

@@ -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;
export default ArchiveOperations;

6
src/client/components/Library/Library.tsx
View File

@@ -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}`);

5
src/client/index.tsx
View File

@@ -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: <TabulatedContentContainer category="library" />,
},
{
path: "comic/details/:comicObjectId",
element: <ComicDetailContainer />,
},
{ path: "import", element: <Import path={"./comics"} /> },
],
},