Rishi Ghan
c03f706e9d
* 🗂️ Added tab icons and styles * 🪑 Styled download panel table * 🪑 Cleaned up the DC++ search results table * 🪑 Many changes to DC++ downloads table * 🏗️ Wired up search with RQ * 🏗️ Changes to ComicDetail section * 🔧 Fixing table styes * 🏗 Fixed the archive ops panel * 🔧 Tweaked Archive ops further * 🃏 Styling the action menu * 🧩 CV Match panel refactor WIP * 🏗️ Refactored the action menu * 🤼 Cleaning up CV match panel * 🏗️ Refactored the scored matches * 🤼 Revamped CV match panel UX * 🖌️ Styling tweaks to the side panel * 🖌️ Cleaned up the form * 🏗️ Refactored the search form * 🤐 Added a uncompress indicator * 🏗️ Fix for encoding # in URIs * 🔧 Fixed # symbol handling in URLs * 🔧 Started work on Edit Metadata panel * 🔎 Added a check for existing uncompressed archives * 🏗️ Settings styling tweaks * 🏗️ Fixed invalidation of archiveOps * 🏗️ Fixed an invalidation query on DC++ download panel * 🏗️ Fixed CV-sourced Volume info panel * 🏗️ Fixed volume group card stacks on Dashboard * 🔍 Fixing CV search page * 🏗️ Refactoring Volume groups and wanted panel * 🏗️ Cleaning up useless files * 🛝 Added keen-slider for pull list * 🏗️ Abstracted heading/subheading into Header * 🏗️ Continued refactoring of PullList, Volumes etc. * 📆 Wired up the datepicker to LoCG pull list
97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import { Form, Field } from "react-final-form";
|
|
import Collapsible from "react-collapsible";
|
|
import { fetchComicVineMatches } from "../../actions/fileops.actions";
|
|
|
|
/**
|
|
* Component for performing search against ComicVine
|
|
*
|
|
* @component
|
|
* @example
|
|
* return (
|
|
* <ComicVineSearchForm data={rawFileDetails} />
|
|
* )
|
|
*/
|
|
export const ComicVineSearchForm = (data) => {
|
|
const onSubmit = useCallback((value) => {
|
|
const userInititatedQuery = {
|
|
inferredIssueDetails: {
|
|
name: value.issueName,
|
|
number: value.issueNumber,
|
|
subtitle: "",
|
|
year: value.issueYear,
|
|
},
|
|
};
|
|
// dispatch(fetchComicVineMatches(data, userInititatedQuery));
|
|
}, []);
|
|
const validate = () => {
|
|
return true;
|
|
};
|
|
|
|
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;
|