diff options
| author | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-17 21:36:24 -0600 |
|---|---|---|
| committer | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-17 21:36:24 -0600 |
| commit | 1aa3b2b90ec98203becb5c4600e1e46b2d8fefa8 (patch) | |
| tree | e55979aa2a2769f4bf2b3650f01c16beb7c115b2 | |
| parent | 2ff01e1a304d5309c85493e7ccec9ebd6c100d7b (diff) | |
| download | ToDo-App-FE-1aa3b2b90ec98203becb5c4600e1e46b2d8fefa8.tar.gz ToDo-App-FE-1aa3b2b90ec98203becb5c4600e1e46b2d8fefa8.zip | |
Broken big function into smaller functions.
| -rw-r--r-- | src/App.jsx | 5 | ||||
| -rw-r--r-- | 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> + ); +} |