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

🔧 Ability to import CV search result into mongo

Browse Source
This commit is contained in:
Rishi Ghan
2021-08-18 22:16:15 -07:00
parent d7f0bdcdfe
commit 2184b20887
5 changed files with 92 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/client/actions/fileops.actions.tsx
View File

@@ -112,18 +112,16 @@ export const getComicBooks = (options) => async (dispatch) => {
export const importToDB = (payload) => (dispatch) => { export const importToDB = (payload) => (dispatch) => {
try { try {
const comicBookMetadata = extend( const comicBookMetadata = {
{ importStatus: {
importStatus: { isImported: true,
isImported: true, tagged: false,
tagged: false, matchedResult: {
matchedResult: { score: "0",
score: "0",
},
}, },
}, },
{ sourcedMetadata: { comicvine: payload } }, sourcedMetadata: { comicvine: payload },
); };
dispatch({ dispatch({
type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS, type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
}); });

2
src/client/components/Card.tsx
View File

@@ -38,7 +38,7 @@ class Card extends React.Component<IProps, IState> {
<img src={filePath} alt="Placeholder image" /> <img src={filePath} alt="Placeholder image" />
</figure> </figure>
</div> </div>
{this.props.title && ( {this.props.hasTitle && (
<div className="card-content"> <div className="card-content">
<ul> <ul>
<Link to={"/comic/details/" + this.props.mongoObjId}> <Link to={"/comic/details/" + this.props.mongoObjId}>

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

@@ -36,43 +36,79 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
}; };
// raw file details // raw file details
const RawFileDetails = ({ value }) => { const RawFileDetails = ({ value }) => {
const encodedFilePath = encodeURI( if (!isNil(value.path)) {
"http://localhost:3000" + removeLeadingPeriod(value.path), const encodedFilePath = encodeURI(
); "http://localhost:3000" + removeLeadingPeriod(value.path),
const filePath = escapePoundSymbol(encodedFilePath); );
return ( const filePath = escapePoundSymbol(encodedFilePath);
<div className="card-container"> return (
<div className="card"> <div className="card-container">
<div className="is-horizontal"> <div className="card">
<div className="card-image"> <div className="is-horizontal">
<figure> <div className="card-image">
<img className="image" src={filePath} /> <figure>
</figure> <img className="image" src={filePath} />
</div> </figure>
<ul className="card-content"> </div>
<li className="name has-text-weight-medium"> <ul className="card-content">
{ellipsize(value.name, 18)} <li className="name has-text-weight-medium">
</li> {ellipsize(value.name, 18)}
<li> </li>
<div className="control"> <li>
<div className="tags has-addons"> <div className="control">
<span className="tag is-primary is-light"> <div className="tags has-addons">
{value.extension} <span className="tag is-primary is-light">
</span> {value.extension}
<span className="tag is-info is-light"> </span>
{prettyBytes(value.fileSize)} <span className="tag is-info is-light">
</span> {prettyBytes(value.fileSize)}
</span>
</div>
</div> </div>
</div> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> </div>
</div> );
); } else if (!isNil(value.comicvine)) {
return (
<div className="card-container">
<div className="card">
<div className="is-horizontal">
<div className="card-image">
<figure>
<img
className="image"
src={value.comicvine.image.thumb_url}
/>
</figure>
</div>
<ul className="card-content">
<li className="name has-text-weight-medium">
{ellipsize(value.name, 18)}
</li>
<li>
<div className="control">
<div className="tags has-addons">
<span className="tag is-primary is-light">
ComicVine ID
</span>
<span className="tag is-info is-light">
{value.comicvine.id}
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
);
}
}; };
const ImportStatus = ({ value }) => { const ImportStatus = ({ value }) => {
return `${value.toString()}` ? ( return value ? (
<span className="tag is-info is-light">Imported</span> <span className="tag is-info is-light">Imported</span>
) : ( ) : (
"Not Imported" "Not Imported"
@@ -86,7 +122,11 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
columns: [ columns: [
{ {
Header: "File Details", Header: "File Details",
accessor: "rawFileDetails", id: "fileDetails",
accessor: (row) =>
!isNil(row.rawFileDetails)
? row.rawFileDetails
: row.sourcedMetadata,
Cell: RawFileDetails, Cell: RawFileDetails,
}, },
{ {
@@ -301,7 +341,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
<p className="control"> <p className="control">
<button <button
className="button" className="button"
onClick={() => gotoPage(0)} onClick={() => gotoPage(1)}
disabled={!canPreviousPage} disabled={!canPreviousPage}
> >
<i className="fas fa-angle-double-left"></i> <i className="fas fa-angle-double-left"></i>
@@ -310,7 +350,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
<p className="control"> <p className="control">
<button <button
className="button" className="button"
onClick={() => gotoPage(pageCount - 1)} onClick={() => gotoPage(Math.ceil(pageTotal / pageSize))}
disabled={!canNextPage} disabled={!canNextPage}
> >
<i className="fas fa-angle-double-right"></i> <i className="fas fa-angle-double-right"></i>

11
src/client/components/RecentlyImported.tsx
View File

@@ -10,13 +10,14 @@ export const RecentlyImported = ({
comicBookCovers, comicBookCovers,
}: RecentlyImportedProps) => ( }: RecentlyImportedProps) => (
<section className="card-container"> <section className="card-container">
{map(comicBookCovers.docs, (doc, idx) => { {map(comicBookCovers.docs, ({ _id, rawFileDetails }) => {
return ( return (
<Card <Card
key={idx} key={_id}
comicBookCoversMetadata={doc.rawFileDetails} comicBookCoversMetadata={rawFileDetails}
mongoObjId={doc._id} mongoObjId={_id}
title hasTitle
isHorizontal={false}
/> />
); );
})} })}

3
src/client/components/Search.tsx
View File

@@ -26,7 +26,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
format: "json", format: "json",
limit: "10", limit: "10",
offset: "0", offset: "0",
field_list: "id,name,deck,api_detail_url,image,description", field_list: "id,name,deck,api_detail_url,image,description,volume",
resources: "issue", resources: "issue",
}, },
}), }),
@@ -97,6 +97,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
!isEmpty(comicVineSearchResults.results) ? ( !isEmpty(comicVineSearchResults.results) ? (
<> <>
{comicVineSearchResults.results.map((result) => { {comicVineSearchResults.results.map((result) => {
console.log(result)
return ( return (
<div key={result.id}> <div key={result.id}>
{result.id} {result.name} {result.id} {result.name}