1. import { useFormik } from 'formik';
2. import React from 'react';
3. import store from './Store'
4. const TodoFilterManager = () => {
5.     const handleSubmit = () => {
6.         store.dispatch({ type: 'SET_FILTER_BY_DESC', payload: { filterDesc: formik.values.filterDesc.toLowerCase() } })
7.         store.dispatch({ type: 'SET_FILTER_BY_STATUS', payload: { filterStatus: formik.values.filterStatus } })
8.     }
9.     const formik = useFormik({
10.         initialValues: {
11.             filterDesc: '',
12.             filterStatus: ''
13.         },
14.         onSubmit: handleSubmit
15.     })
16.  
17.     return (
18.         <form onSubmit={formik.handleSubmit} className='todoFilter'>
19.             <label htmlFor="search">search:</label>
20.             <input type="text"
21.                 name='filterDesc'
22.                 value={formik.values.filterDesc}
23.                 id='search'
24.                 onChange={formik.handleChange} />
25.             <select name="filterStatus" id="filterStatus"
26.                 value={formik.values.filterStatus}
27.                 onChange={formik.handleChange}>
28.                 <option value="">all</option>
29.                 <option value="Done">Done</option>
30.                 <option value="Expired">Expired</option>
31.                 <option value="Todo">Pending</option>
32.             </select>
33.             <button className='btn submitSearch' type='submit'> search</button>
34.         </form>
35.     );
36. }
37.  
38. export default TodoFilterManager;