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

🔧 Formatting the new volume matches we get in CV-scraped results

Browse Source
This commit is contained in:
Rishi Ghan
2022-01-01 17:00:26 -08:00
parent a964ffbf07
commit cc317196ba
3 changed files with 112 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,7 @@ import {
import { refineQuery } from "../shared/utils/filenameparser.utils"; import { refineQuery } from "../shared/utils/filenameparser.utils";
import sortBy from "array-sort-by"; import sortBy from "array-sort-by";
import { success } from "react-notification-system-redux"; import { success } from "react-notification-system-redux";
import { isNil } from "lodash";
export async function walkFolder(path: string): Promise<Array<IFolderData>> { export async function walkFolder(path: string): Promise<Array<IFolderData>> {
return axios return axios
@@ -187,9 +188,20 @@ export const fetchComicVineMatches =
}, },
}) })
.then((response) => { .then((response) => {
console.log(response);
let matches: any = [];
if (
!isNil(response.data.results) &&
response.data.results.length === 1
) {
matches = response.data.results;
} else {
matches = response.data.map((match) => match);
}
console.log(matches);
dispatch({ dispatch({
type: CV_SEARCH_SUCCESS, type: CV_SEARCH_SUCCESS,
searchResults: response.data.results, searchResults: matches,
searchQueryObject: { searchQueryObject: {
issue: issueSearchQuery, issue: issueSearchQuery,
series: seriesSearchQuery, series: seriesSearchQuery,

33
src/client/assets/scss/App.scss
View File

@@ -344,30 +344,35 @@ $size-8: 0.9rem;
margin: 15px 0 0 0; margin: 15px 0 0 0;
overflow: hidden; overflow: hidden;
table {
width: 100%;
tbody tr:nth-child(odd) {
background: #f6f6f6;
border-radius: 5px;
}
}
.search-result { .search-result {
display: flex;
flex-direction: row;
padding: 10px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
.cover-image { .cover-image {
border-radius: 5px; border-radius: 5px;
} }
.search-result-details { .search-result-details {
width: 100%;
.score { .score {
float: right; float: right;
} }
margin-left: 10px;
} }
.volume-information {
margin-top: -2em;
width: 80%;
background: $white-ter;
border-radius: 10px;
}
.vertical-line {
position: relative;
top: -10px;
border: 1px solid #CCC;
width:20px;
height:25px;
border-color: transparent transparent #999 #999;
border-bottom-left-radius: 10px;
}
} }
} }

133
src/client/components/MatchResult.tsx
View File

@@ -13,6 +13,7 @@ const handleBrokenImage = (e) => {
}; };
export const MatchResult = (props: MatchResultProps) => { export const MatchResult = (props: MatchResultProps) => {
console.log(props);
const dispatch = useDispatch(); const dispatch = useDispatch();
const applyCVMatch = useCallback( const applyCVMatch = useCallback(
(match, comicObjectId) => { (match, comicObjectId) => {
@@ -22,64 +23,90 @@ export const MatchResult = (props: MatchResultProps) => {
); );
return ( return (
<> <>
<table> {map(props.matchData, (match, idx) => {
<thead> return (
<tr> <div className="search-result">
<th></th> <div className="columns">
</tr> <div className="column is-one-fifth">
</thead> <img
<tbody> className="cover-image"
{map(props.matchData, (match, idx) => { src={match.image.thumb_url}
return ( onError={handleBrokenImage}
<tr className="search-result" key={idx}> />
<td> </div>
<img
className="cover-image"
src={match.image.thumb_url}
onError={handleBrokenImage}
/>
</td>
<td className="search-result-details">
<div className="tag score is-primary is-medium is-pulled-right">
{parseFloat(match.score).toFixed(2)}
</div>
<div className="is-size-5">{match.name}</div>
<div className="is-size-6">{match.volume.name}</div>
<div className="field is-grouped is-grouped-multiline"> <div className="search-result-details column">
<div className="control">
<div className="tags has-addons"> <div className="is-size-5">{match.name}</div>
<span className="tag">Number</span>
<span className="tag is-primary"> <div className="field is-grouped is-grouped-multiline mt-1">
{match.issue_number} <div className="control">
</span> <div className="tags has-addons">
</div> <span className="tag">Number</span>
<span className="tag is-primary">
{match.issue_number}
</span>
</div> </div>
<div className="control"> </div>
<div className="tags has-addons"> <div className="control">
<span className="tag">Type</span> <div className="tags has-addons">
<span className="tag is-warning"> <span className="tag">Cover Date</span>
{match.resource_type} <span className="tag is-warning">{match.cover_date}</span>
</span> </div>
</div> </div>
</div>
<button
className="button mt-6 is-small is-outlined is-primary is-light is-pulled-right"
onClick={() => applyCVMatch(match, props.comicObjectId)}
>
<span className="icon is-size-5">
<i className="fas fa-clipboard-check"></i>
</span>
<span>Apply Match</span>
</button>
</div>
</div>
<div className="vertical-line"></div>
<div className="columns ml-5 volume-information">
<div className="column is-one-fifth">
<img
src={match.volumeInformation.results.image.icon_url}
className="cover-image"
onError={handleBrokenImage}
/>
</div>
<div className="column">
<div className="is-size-6">{match.volume.name}</div>
<div className="field is-grouped is-grouped-multiline mt-2">
<div className="control">
<div className="tags has-addons">
<span className="tag">Total Issues</span>
<span className="tag is-warning">
{match.volumeInformation.results.count_of_issues}
</span>
</div> </div>
</div> </div>
<button <div className="control">
className="button is-small is-outlined is-primary is-light is-pulled-right" <div className="tags has-addons">
onClick={() => applyCVMatch(match, props.comicObjectId)} <span className="tag">Publisher</span>
> <span className="tag is-warning">
<span className="icon is-size-5"> {match.volumeInformation.results.publisher.name}
<i className="fas fa-clipboard-check"></i> </span>
</span> </div>
<span>Apply Match</span> </div>
</button> </div>
</td>
</tr>
); </div>
})} </div>
</tbody> </div>
</table> );
})}
</> </>
); );
}; };