🔧 Ability to import CV search result into mongo

This commit is contained in:
2021-08-18 22:16:15 -07:00
parent d7f0bdcdfe
commit 2184b20887
5 changed files with 92 additions and 52 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -26,7 +26,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
format: "json",
limit: "10",
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",
},
}),
@@ -97,6 +97,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
!isEmpty(comicVineSearchResults.results) ? (
<>
{comicVineSearchResults.results.map((result) => {
console.log(result)
return (
<div key={result.id}>
{result.id} {result.name}