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 sortBy from "array-sort-by";
import { success } from "react-notification-system-redux";
import { isNil } from "lodash";
export async function walkFolder(path: string): Promise<Array<IFolderData>> {
return axios
@@ -187,9 +188,20 @@ export const fetchComicVineMatches =
},
})
.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({
type: CV_SEARCH_SUCCESS,
searchResults: response.data.results,
searchResults: matches,
searchQueryObject: {
issue: issueSearchQuery,
series: seriesSearchQuery,

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

@@ -344,30 +344,35 @@ $size-8: 0.9rem;
margin: 15px 0 0 0;
overflow: hidden;
table {
width: 100%;
tbody tr:nth-child(odd) {
background: #f6f6f6;
border-radius: 5px;
}
}
.search-result {
display: flex;
flex-direction: row;
padding: 10px;
margin: 0 0 10px 0;
.cover-image {
border-radius: 5px;
}
.search-result-details {
width: 100%;
.score {
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) => {
console.log(props);
const dispatch = useDispatch();
const applyCVMatch = useCallback(
(match, comicObjectId) => {
@@ -22,64 +23,90 @@ export const MatchResult = (props: MatchResultProps) => {
);
return (
<>
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
{map(props.matchData, (match, idx) => {
return (
<tr className="search-result" key={idx}>
<td>
<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>
{map(props.matchData, (match, idx) => {
return (
<div className="search-result">
<div className="columns">
<div className="column is-one-fifth">
<img
className="cover-image"
src={match.image.thumb_url}
onError={handleBrokenImage}
/>
</div>
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-primary">
{match.issue_number}
</span>
</div>
<div className="search-result-details column">
<div className="is-size-5">{match.name}</div>
<div className="field is-grouped is-grouped-multiline mt-1">
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-primary">
{match.issue_number}
</span>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag">Type</span>
<span className="tag is-warning">
{match.resource_type}
</span>
</div>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag">Cover Date</span>
<span className="tag is-warning">{match.cover_date}</span>
</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>
<button
className="button 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>
</td>
</tr>
);
})}
</tbody>
</table>
<div className="control">
<div className="tags has-addons">
<span className="tag">Publisher</span>
<span className="tag is-warning">
{match.volumeInformation.results.publisher.name}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
})}
</>
);
};