65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React, { ReactElement, useCallback } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Form, Field } from "react-final-form";
|
|
import { Link } from "react-router-dom";
|
|
import { useDispatch } from "react-redux";
|
|
import { searchIssue } from "../../actions/fileops.actions";
|
|
|
|
export const SearchBar = (): ReactElement => {
|
|
const dispatch = useDispatch();
|
|
const handleSubmit = useCallback((e) => {
|
|
dispatch(
|
|
searchIssue(
|
|
{
|
|
query: {
|
|
volumeName: e.search,
|
|
},
|
|
},
|
|
{
|
|
pagination: {
|
|
size: 25,
|
|
from: 0,
|
|
},
|
|
type: "volumeName",
|
|
trigger: "libraryPage",
|
|
},
|
|
),
|
|
);
|
|
}, []);
|
|
return (
|
|
<div className="box">
|
|
<Form
|
|
onSubmit={handleSubmit}
|
|
initialValues={{}}
|
|
render={({ handleSubmit, form, submitting, pristine, values }) => (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="field is-grouped">
|
|
<div className="control search is-expanded">
|
|
<Field name="search">
|
|
{({ input, meta }) => {
|
|
return (
|
|
<input
|
|
{...input}
|
|
className="input main-search-bar is-medium"
|
|
placeholder="Type an issue/volume name"
|
|
/>
|
|
);
|
|
}}
|
|
</Field>
|
|
</div>
|
|
<div className="control">
|
|
<button className="button is-medium" type="submit">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)}
|
|
/>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchBar;
|