107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import { Form, Field } from "react-final-form";
|
|
import { ValidationErrors } from "final-form";
|
|
import { fetchComicVineMatches } from "../../actions/fileops.actions";
|
|
|
|
interface ComicVineSearchFormProps {
|
|
rawFileDetails?: Record<string, unknown>;
|
|
}
|
|
|
|
interface SearchFormValues {
|
|
issueName?: string;
|
|
issueNumber?: string;
|
|
issueYear?: string;
|
|
}
|
|
|
|
/**
|
|
* Component for performing search against ComicVine
|
|
*
|
|
* @component
|
|
* @example
|
|
* return (
|
|
* <ComicVineSearchForm data={rawFileDetails} />
|
|
* )
|
|
*/
|
|
export const ComicVineSearchForm = (props: ComicVineSearchFormProps) => {
|
|
const onSubmit = useCallback((value: SearchFormValues) => {
|
|
const userInititatedQuery = {
|
|
inferredIssueDetails: {
|
|
name: value.issueName,
|
|
number: value.issueNumber,
|
|
subtitle: "",
|
|
year: value.issueYear,
|
|
},
|
|
};
|
|
// dispatch(fetchComicVineMatches(data, userInititatedQuery));
|
|
}, []);
|
|
const validate = (_values: SearchFormValues): ValidationErrors | undefined => {
|
|
return undefined;
|
|
};
|
|
|
|
const MyForm = () => (
|
|
<Form
|
|
onSubmit={onSubmit}
|
|
validate={validate}
|
|
render={({ handleSubmit }) => (
|
|
<form onSubmit={handleSubmit}>
|
|
<span className="flex items-center">
|
|
<span className="text-md text-slate-500 dark:text-slate-500 pr-5">
|
|
Override Search Query
|
|
</span>
|
|
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
|
</span>
|
|
<label className="block py-1">Issue Name</label>
|
|
<Field name="issueName">
|
|
{(props) => (
|
|
<input
|
|
{...props.input}
|
|
className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
|
placeholder="Type the issue name"
|
|
/>
|
|
)}
|
|
</Field>
|
|
<div className="flex flex-row gap-4">
|
|
<div>
|
|
<label className="block py-1">Number</label>
|
|
<Field name="issueNumber">
|
|
{(props) => (
|
|
<input
|
|
{...props.input}
|
|
className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
|
placeholder="#"
|
|
/>
|
|
)}
|
|
</Field>
|
|
</div>
|
|
<div>
|
|
<label className="block py-1">Year</label>
|
|
<Field name="issueYear">
|
|
{(props) => (
|
|
<input
|
|
{...props.input}
|
|
className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
|
placeholder="1984"
|
|
/>
|
|
)}
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="flex justify-end mt-5">
|
|
<button
|
|
type="submit"
|
|
className="flex h-10 sm:mt-3 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
|
|
>
|
|
Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)}
|
|
/>
|
|
);
|
|
|
|
return <MyForm />;
|
|
};
|
|
|
|
export default ComicVineSearchForm;
|