diff options
Diffstat (limited to 'src/ToDo-UI')
| -rw-r--r-- | src/ToDo-UI/ListToDo.jsx | 15 | ||||
| -rw-r--r-- | src/ToDo-UI/NewToDo.jsx | 2 | ||||
| -rw-r--r-- | src/ToDo-UI/Search.jsx | 62 |
3 files changed, 62 insertions, 17 deletions
diff --git a/src/ToDo-UI/ListToDo.jsx b/src/ToDo-UI/ListToDo.jsx index eed6e02..f2f9a3e 100644 --- a/src/ToDo-UI/ListToDo.jsx +++ b/src/ToDo-UI/ListToDo.jsx @@ -6,6 +6,7 @@ import { edit_todo, set_sort_todo, sort_todo, + refresh_filtered_todos, select_todos, select_current_sorting, } from "../features/todo/reducer"; @@ -50,6 +51,7 @@ function list_of_todos(edit_button, delete_button) { }) ); dispatch(sort_todo()); + dispatch(refresh_filtered_todos()); } // Table contents @@ -85,14 +87,15 @@ function list_of_todos(edit_button, delete_button) { type="checkbox" checked={item.done} id={"list-todo-done-" + item.id} - onChange={(e) => + onChange={(e) => { dispatch( change_done({ id: item.id, done: e.target.checked, }) - ) - } + ), + dispatch(refresh_filtered_todos()); + }} ></input> </div> </th> @@ -170,6 +173,7 @@ export function ListToDos() { }) ); dispatch(sort_todo()); + dispatch(refresh_filtered_todos()); handle_exit_modal(); } @@ -200,7 +204,10 @@ export function ListToDos() { <button type="button" className="btn btn-outline-dark" - onClick={(e) => dispatch(remove_todo(item.id))} + onClick={(e) => { + dispatch(remove_todo(item.id)), + dispatch(refresh_filtered_todos()); + }} > Delete </button> diff --git a/src/ToDo-UI/NewToDo.jsx b/src/ToDo-UI/NewToDo.jsx index 28d80dc..2fd70b8 100644 --- a/src/ToDo-UI/NewToDo.jsx +++ b/src/ToDo-UI/NewToDo.jsx @@ -3,6 +3,7 @@ import { useSelector, useDispatch } from "react-redux"; import { add_todo, sort_todo, + refresh_filtered_todos, select_last_index, } from "../features/todo/reducer"; @@ -64,6 +65,7 @@ export function NewToDo() { }) ); dispatch(sort_todo()); + dispatch(refresh_filtered_todos()); handle_exit_modal(); } diff --git a/src/ToDo-UI/Search.jsx b/src/ToDo-UI/Search.jsx index bb36dba..dec1f29 100644 --- a/src/ToDo-UI/Search.jsx +++ b/src/ToDo-UI/Search.jsx @@ -1,6 +1,25 @@ -import React from "react"; +import React, { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { set_filters, refresh_filtered_todos } from "../features/todo/reducer"; export function Search() { + const dispatch = useDispatch(); + + const [search_name, set_search_name] = useState(""); + const [search_priority, set_search_priority] = useState("All"); + const [search_state, set_search_state] = useState("All"); + + function handle_search() { + dispatch( + set_filters({ + name: search_name, + priority: search_priority, + state: search_state, + }) + ); + dispatch(refresh_filtered_todos()); + } + return ( <div className="container mt-3" style={{ border: "2px solid black" }}> <div className="row"> @@ -9,10 +28,9 @@ export function Search() { Name </span> <input - type="text" className="form-control" - aria-label="Name" - aria-describedby="search-name" + type="text" + onChange={(e) => set_search_name(e.target.value)} ></input> </div> </div> @@ -21,11 +39,19 @@ export function Search() { <div className="col-sm-7"> <div className="input-group mb-3 mt-3"> <label className="input-group-text">Priority</label> - <select className="form-select" id="search-priority"> - <option defaultValue>All</option> - <option value="1">High</option> - <option value="2">Medium</option> - <option value="3">Low</option> + <select + className="form-select" + id="search-priority" + onChange={(e) => + set_search_priority(e.target.value) + } + > + <option value="All" defaultValue> + All + </option> + <option value="High">High</option> + <option value="Medium">Medium</option> + <option value="Low">Low</option> </select> </div> </div> @@ -35,17 +61,27 @@ export function Search() { <div className="col-sm-7"> <div className="input-group mb-3 mt-3"> <label className="input-group-text">State</label> - <select className="form-select" id="search-priority"> - <option defaultValue>All</option> + <select + className="form-select" + id="search-priority" + onChange={(e) => set_search_state(e.target.value)} + > + <option value="All" defaultValue> + All + </option> <option value="1">Done</option> - <option value="2">Undone</option> + <option value="0">Undone</option> </select> </div> </div> <div className="col-sm-2"> <div className="d-grid gap-2 d-md-flex justify-content-md-end"> - <button type="button" className="btn btn-outline-dark"> + <button + type="button" + className="btn btn-outline-dark" + onClick={handle_search} + > Search </button> </div> |