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

🔎 CV search results prettification

Browse Source
This commit is contained in:
Rishi Ghan
2022-06-01 23:17:53 -07:00
parent f6d86199dd
commit aeb6e5225d
4 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/Dashboard/PullList.tsx
View File

@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
useEffect(() => {
dispatch(
getWeeklyPullList({
startDate: "2022-2-11",
startDate: "2022-6-1",
pageSize: "15",
currentPage: "1",
}),

9
src/client/components/Dashboard/RecentlyImported.tsx
View File

@@ -95,6 +95,15 @@ export const RecentlyImported = ({
/>
</span>
)}
{/* ComicVine metadata presence */}
{isComicBookMetadataAvailable && (
<span className="icon custom-icon">
<img
src="/img/cvlogo.svg"
alt={"ComicInfo.xml file detected."}
/>
</span>
)}
{/* Issue type */}
{isComicBookMetadataAvailable &&
!isNil(

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

@@ -34,7 +34,7 @@ export const MatchResult = (props: MatchResultProps) => {
});
}
return (
<div className="search-result mb-4">
<div className="search-result mb-4" key={idx}>
<div className="columns">
<div className="column is-one-fifth">
<img

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

@@ -7,6 +7,9 @@ import { comicinfoAPICall } from "../actions/comicinfo.actions";
import { search } from "../services/api/SearchApi";
import { Form, Field } from "react-final-form";
import Card from "./Carda";
import ellipsize from "ellipsize";
import { convert } from "html-to-text";
import dayjs from "dayjs";
interface ISearchProps {}
@@ -27,7 +30,8 @@ export const Search = ({}: ISearchProps): ReactElement => {
format: "json",
limit: "10",
offset: "0",
field_list: "id,name,deck,api_detail_url,image,description,volume",
field_list:
"id,name,deck,api_detail_url,image,description,volume,cover_date",
resources: "issue",
},
}),
@@ -85,34 +89,70 @@ export const Search = ({}: ISearchProps): ReactElement => {
/>
{!isNil(comicVineSearchResults.results) &&
!isEmpty(comicVineSearchResults.results) ? (
<div>
<div className="columns is-multiline">
{comicVineSearchResults.results.map((result) => {
return (
<div key={result.id} className="columns is-full">
<div className="column is-one-quarter">
<Card
key={result.id}
orientation={"vertical"}
imageUrl={result.image.small_url}
title={result.name}
hasDetails={false}
></Card>
</div>
<div className="column is-half">
<div className="is-size-4">{result.name}</div>
<span className="tag is-warning">{result.id}</span>
<p>{result.api_detail_url}</p>
<p
dangerouslySetInnerHTML={createDescriptionMarkup(
result.description,
)}
></p>
<button
className="button is-success is-light is-outlined"
onClick={() => addToLibrary("comicvine", result)}
>
Add to Library
</button>
<div
key={result.id}
className="comicvine-metadata column is-10 mb-3"
>
<div className="columns">
<div className="column is-one-quarter">
<Card
key={result.id}
orientation={"vertical"}
imageUrl={result.image.small_url}
title={result.name}
hasDetails={false}
></Card>
</div>
<div className="column">
<div className="is-size-3">
{!isEmpty(result.name) ? (
result.name
) : (
<span className="is-size-3">No Name</span>
)}
</div>
<div className="field is-grouped mt-1">
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">Cover date</span>
<span className="tag is-info is-light">
{dayjs(result.cover_date).format("MMM D, YYYY")}
</span>
</div>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag is-warning">
{result.id}
</span>
</div>
</div>
</div>
<a href={result.api_detail_url}>
{result.api_detail_url}
</a>
<p>
{ellipsize(
convert(result.description, {
baseElements: {
selectors: ["p"],
},
}),
320,
)}
</p>
<button
className="button is-success is-light is-outlined mt-2"
onClick={() => addToLibrary("comicvine", result)}
>
<i className="fa-solid fa-plus mr-2"></i> Add to Library
</button>
</div>
</div>
</div>
);