Search.jsx (3552B) - raw

      1 import React, { useState } from "react";
      2 import { useSelector, useDispatch } from "react-redux";
      3 import { set_filters, refresh_filtered_todos } from "../features/todo/reducer";
      4 
      5 export function Search() {
      6     const dispatch = useDispatch();
      7 
      8     const [search_name, set_search_name] = useState("");
      9     const [search_priority, set_search_priority] = useState("All");
     10     const [search_state, set_search_state] = useState("All");
     11 
     12     function handle_search() {
     13         dispatch(
     14             set_filters({
     15                 name: search_name,
     16                 priority: search_priority,
     17                 state: search_state,
     18             })
     19         );
     20         dispatch(refresh_filtered_todos());
     21     }
     22 
     23     return (
     24         <div className="container mt-3" style={{ border: "2px solid black" }}>
     25             <div className="row">
     26                 <div className="input-group mb-3 mt-3">
     27                     <span className="input-group-text" id="search-name">
     28                         Name
     29                     </span>
     30                     <input
     31                         className="form-control"
     32                         type="text"
     33                         onChange={(e) => set_search_name(e.target.value)}
     34                     ></input>
     35                 </div>
     36             </div>
     37 
     38             <div className="row">
     39                 <div className="col-sm-7">
     40                     <div className="input-group mb-3 mt-3">
     41                         <label className="input-group-text">Priority</label>
     42                         <select
     43                             className="form-select"
     44                             id="search-priority"
     45                             onChange={(e) =>
     46                                 set_search_priority(e.target.value)
     47                             }
     48                         >
     49                             <option value="All" defaultValue>
     50                                 All
     51                             </option>
     52                             <option value="High">High</option>
     53                             <option value="Medium">Medium</option>
     54                             <option value="Low">Low</option>
     55                         </select>
     56                     </div>
     57                 </div>
     58             </div>
     59 
     60             <div className="row align-items-center justify-content-between">
     61                 <div className="col-sm-7">
     62                     <div className="input-group mb-3 mt-3">
     63                         <label className="input-group-text">State</label>
     64                         <select
     65                             className="form-select"
     66                             id="search-priority"
     67                             onChange={(e) => set_search_state(e.target.value)}
     68                         >
     69                             <option value="All" defaultValue>
     70                                 All
     71                             </option>
     72                             <option value="1">Done</option>
     73                             <option value="0">Undone</option>
     74                         </select>
     75                     </div>
     76                 </div>
     77 
     78                 <div className="col-sm-2">
     79                     <div className="d-grid gap-2 d-md-flex justify-content-md-end">
     80                         <button
     81                             type="button"
     82                             className="btn btn-outline-dark"
     83                             onClick={handle_search}
     84                         >
     85                             Search
     86                         </button>
     87                     </div>
     88                 </div>
     89             </div>
     90         </div>
     91     );
     92 }