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

🔧 Breaking apart ComicDetail page

Browse Source
This commit is contained in:
Rishi Ghan
2021-12-03 09:13:18 -08:00
parent f371858a0c
commit 2656646412
3 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,8 +8,7 @@ import React, {
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import Card from "./Carda"; import Card from "./Carda";
import MatchResult from "./MatchResult"; import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel";
import ComicVineSearchForm from "./ComicVineSearchForm";
import AcquisitionPanel from "./AcquisitionPanel"; import AcquisitionPanel from "./AcquisitionPanel";
import DownloadsPanel from "./DownloadsPanel"; import DownloadsPanel from "./DownloadsPanel";
import SlidingPane from "react-sliding-pane"; import SlidingPane from "react-sliding-pane";
@@ -118,64 +117,33 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
const contentForSlidingPanel = { const contentForSlidingPanel = {
CVMatches: { CVMatches: {
content: () => { content: () => {
return ( if (!comicVineAPICallProgress) {
<> return (
{!isEmpty(comicVineSearchQueryObject) && <ComicVineMatchPanel
!isUndefined(comicVineSearchQueryObject) ? ( props={{
<div className="card search-criteria-card"> comicVineSearchQueryObject,
<div className="card-content"> comicVineAPICallProgress,
<ComicVineSearchForm /> comicVineSearchResults,
<p className="is-size-6">Searching against:</p> comicObjectId,
<div className="field is-grouped is-grouped-multiline"> }}
<div className="control"> />
<div className="tags has-addons"> );
<span className="tag">Title</span> } else {
<span className="tag is-info"> return (
{ <div className="progress-indicator-container">
comicVineSearchQueryObject.issue.searchParams <div className="indicator">
.searchTerms.name <Loader
} type="MutatingDots"
</span> color="#CCC"
</div> secondaryColor="#999"
</div> height={100}
<div className="control"> width={100}
<div className="tags has-addons"> visible={comicVineAPICallProgress}
<span className="tag">Number</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams
.searchTerms.number
}
</span>
</div>
</div>
</div>
</div>
</div>
) : (
<div className="progress-indicator-container">
<div className="indicator">
<Loader
type="MutatingDots"
color="#CCC"
secondaryColor="#999"
height={100}
width={100}
visible={comicVineAPICallProgress}
/>
</div>
</div>
)}
<div className="search-results-container">
{!isEmpty(comicVineSearchResults) && (
<MatchResult
matchData={comicVineSearchResults}
comicObjectId={comicObjectId}
/> />
)} </div>
</div> </div>
</> );
); }
}, },
}, },
editComicArchive: { editComicArchive: {

62
src/client/components/ComicDetail/ComicVineMatchPanel.tsx Normal file
View File

@@ -0,0 +1,62 @@
import React, { ReactElement } from "react";
import { ComicVineSearchForm } from "../ComicVineSearchForm";
import MatchResult from "../MatchResult";
import Loader from "react-loader-spinner";
import { isEmpty } from "lodash";
export const ComicVineMatchPanel = (comicVineData): ReactElement => {
const {
comicObjectId,
comicVineSearchQueryObject,
comicVineAPICallProgress,
comicVineSearchResults,
} = comicVineData.props;
console.log(comicVineData);
return (
<>
<div className="card search-criteria-card">
<div className="card-content">
<ComicVineSearchForm />
<p className="is-size-6">Searching against:</p>
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<div className="tags has-addons">
<span className="tag">Title</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams.searchTerms
.name
}
</span>
</div>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams.searchTerms
.number
}
</span>
</div>
</div>
</div>
</div>
</div>
<div className="search-results-container">
{!isEmpty(comicVineSearchResults) && (
<MatchResult
matchData={comicVineSearchResults}
comicObjectId={comicObjectId}
/>
)}
</div>
</>
);
};
export default ComicVineMatchPanel;

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

@@ -5,9 +5,9 @@ import { useTable, usePagination } from "react-table";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { getComicBooks } from "../actions/fileops.actions"; import { getComicBooks } from "../actions/fileops.actions";
import { isEmpty, isNil } from "lodash"; import { isEmpty, isNil } from "lodash";
import { RawFileDetails } from "./Library/RawFileDetails"; import RawFileDetails from "./Library/RawFileDetails";
import { ComicVineDetails } from "./Library/ComicVineDetails"; import ComicVineDetails from "./Library/ComicVineDetails";
import { SearchBar } from "./Library/SearchBar"; import SearchBar from "./Library/SearchBar";
interface IComicBookLibraryProps { interface IComicBookLibraryProps {
matches?: unknown; matches?: unknown;
@@ -61,6 +61,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
if (!isNil(value.comicvine)) { if (!isNil(value.comicvine)) {
return <ComicVineDetails data={value} />; return <ComicVineDetails data={value} />;
} }
return <div>null</div>;
}, },
}, },
{ {