From 1aa3b2b90ec98203becb5c4600e1e46b2d8fefa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= <adrian.oliva@cimat.mx>
Date: Wed, 17 May 2023 21:36:24 -0600
Subject: Broken big function into smaller functions.

---
 src/App.jsx          |   5 ++-
 src/ToDo-UI/ToDo.jsx | 116 +++++++++++++++++++++++++++------------------------
 2 files changed, 64 insertions(+), 57 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 682a1b1..33d44ce 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,14 @@
 import React from "react";
 // import { Counter } from "./features/counter/Counter";
 import { Search } from "./ToDo-UI/Search";
-import { Reducer } from "./ToDo-UI/ToDo";
+import { NewToDo, ListToDos } from "./ToDo-UI/ToDo";
 
 function App() {
     return (
         <div>
             <Search />
-            <Reducer />
+            <NewToDo />
+            <ListToDos />
         </div>
     );
 }
diff --git a/src/ToDo-UI/ToDo.jsx b/src/ToDo-UI/ToDo.jsx
index 51e0c97..ceaed49 100644
--- a/src/ToDo-UI/ToDo.jsx
+++ b/src/ToDo-UI/ToDo.jsx
@@ -2,8 +2,9 @@ import React, { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { add_todo, select_todos } from "../features/todo/reducer";
 
-export function Reducer() {
+export function NewToDo() {
     const my_todos = useSelector(select_todos);
+
     const dispatch = useDispatch();
     const [new_text, set_new_text] = useState("");
     const [new_done, set_new_done] = useState(false);
@@ -16,8 +17,6 @@ export function Reducer() {
         set_new_text("");
         set_new_done(false);
         set_new_priority("Low");
-
-        console.log("CLEANED.");
     }
 
     return (
@@ -176,58 +175,65 @@ export function Reducer() {
                     </div>
                 </div>
             </div>
-            <div className="container">
-                <table className="table align-middle">
-                    <thead>
-                        <tr>
-                            <th scope="col">#</th>
-                            <th scope="col">Name</th>
-                            <th scope="col">Priority</th>
-                            <th scope="col">Due Date</th>
-                            <th scope="col">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody className="table-group-divider">
-                        {my_todos.map((item) => (
-                            <tr key={item.id}>
-                                <th scope="row">
-                                    <div className="form-check">
-                                        <input
-                                            className="form-check-input"
-                                            type="checkbox"
-                                            checked={item.done}
-                                            id="flexCheckChecked"
-                                        ></input>
-                                    </div>
-                                </th>
-                                <td>{item.text}</td>
-                                <td>{item.priority}</td>
-                                <td>{item.due_date}</td>
-                                <td>
-                                    <div
-                                        className="btn-group btn-group-sm"
-                                        role="group"
-                                        aria-label="Basic example"
-                                    >
-                                        <button
-                                            type="button"
-                                            className="btn btn-outline-dark"
-                                        >
-                                            Edit
-                                        </button>
-                                        <button
-                                            type="button"
-                                            className="btn btn-outline-dark"
-                                        >
-                                            Delete
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
         </>
     );
 }
+
+export function ListToDos() {
+    const my_todos = useSelector(select_todos);
+
+    return (
+        <div className="container">
+            <table className="table align-middle">
+                <thead>
+                    <tr>
+                        <th scope="col">#</th>
+                        <th scope="col">Name</th>
+                        <th scope="col">Priority</th>
+                        <th scope="col">Due Date</th>
+                        <th scope="col">Actions</th>
+                    </tr>
+                </thead>
+                <tbody className="table-group-divider">
+                    {my_todos.map((item) => (
+                        <tr key={item.id}>
+                            <th scope="row">
+                                <div className="form-check">
+                                    <input
+                                        className="form-check-input"
+                                        type="checkbox"
+                                        checked={item.done}
+                                        id="flexCheckChecked"
+                                    ></input>
+                                </div>
+                            </th>
+                            <td>{item.text}</td>
+                            <td>{item.priority}</td>
+                            <td>{item.due_date}</td>
+                            <td>
+                                <div
+                                    className="btn-group btn-group-sm"
+                                    role="group"
+                                    aria-label="Basic example"
+                                >
+                                    <button
+                                        type="button"
+                                        className="btn btn-outline-dark"
+                                    >
+                                        Edit
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="btn btn-outline-dark"
+                                    >
+                                        Delete
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}
-- 
cgit v1.2.3