58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import React, { ReactElement } from "react";
|
|
import MatchResult from "./MatchResult";
|
|
import { isEmpty } from "lodash";
|
|
import { useStore } from "../../store";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
|
|
interface ComicVineMatchPanelProps {
|
|
props: {
|
|
comicObjectId: string;
|
|
comicVineMatches: any[];
|
|
queryClient?: any;
|
|
onMatchApplied?: () => void;
|
|
};
|
|
}
|
|
|
|
/** Displays ComicVine search results or a status message while searching. */
|
|
export const ComicVineMatchPanel = ({ props: comicVineData }: ComicVineMatchPanelProps): ReactElement => {
|
|
const { comicObjectId, comicVineMatches, queryClient, onMatchApplied } = comicVineData;
|
|
const { comicvine } = useStore(
|
|
useShallow((state) => ({
|
|
comicvine: state.comicvine,
|
|
})),
|
|
);
|
|
return (
|
|
<>
|
|
<div>
|
|
{!isEmpty(comicVineMatches) ? (
|
|
<MatchResult
|
|
matchData={comicVineMatches}
|
|
comicObjectId={comicObjectId}
|
|
queryClient={queryClient}
|
|
onMatchApplied={onMatchApplied}
|
|
/>
|
|
) : (
|
|
<>
|
|
<article
|
|
role="alert"
|
|
className="mt-4 rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600 text-sm"
|
|
>
|
|
<div>
|
|
<p>ComicVine match results are an approximation.</p>
|
|
<p>
|
|
Auto-matching is not available yet. If you see no results or
|
|
poor quality ones, you can override the search query
|
|
parameters to get better ones.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<div className="text-md my-5">{comicvine.scrapingStatus}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ComicVineMatchPanel;
|