From c5b628f17da1bfa17251ecf82fcb146751954b72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= <adrian.oliva@cimat.mx>
Date: Sun, 21 May 2023 19:09:15 -0600
Subject: First attempt at filtering to do's.

We have a separate list from the original `todos_list`. It saves all currently
filtered to do's for the listing to be as easy as possible.
---
 src/ToDo-UI/ListToDo.jsx | 15 ++++++++----
 src/ToDo-UI/NewToDo.jsx  |  2 ++
 src/ToDo-UI/Search.jsx   | 62 ++++++++++++++++++++++++++++++++++++++----------
 3 files changed, 62 insertions(+), 17 deletions(-)

(limited to 'src/ToDo-UI')

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>
-- 
cgit v1.2.3