avance hasta complete y delete todos

package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^4.12.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App/App.css

@@ -0,0 +1,5 @@
+.MainContainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/App/App.js

@@ -0,0 +1,63 @@
+import React from "react";
+import "./App.css"
+import { CreateToDoButton } from "../Componentes/CreateToDoButton/CreateToDoButton";
+import { ToDoCounter } from "../Componentes/ToDoCounter/ToDoCounter";
+import { ToDoList } from "../Componentes/ToDoList/ToDoList";
+import { ToDoSearch } from "../Componentes/ToDoSearch/ToDoSearch";
+import { ToDoItem } from "../Componentes/TodoItem/ToDoItem";
+
+
+  const arrayToDos = [
+  {text: "sacar a noah", completed: true},
+  {text: "cortar cebolla", completed: false},
+  {text: "terminar curso de manip arrays", completed: false},
+  {text: "mimir", completed: true},
+  {text: "leer", completed: true},
+  {text: "COCINAR", completed: false},
+  {text: "Entrenar", completed: true},
+]
+
+function App() {
+
+  const [todos, setTodos] = React.useState(arrayToDos); 
+
+  const [searchValue, setSearchValue ] = React.useState(""); 
+  console.log("Los usuarios buscan todos de " + searchValue);
+
+  const completedTodos = todos.filter((todo) => todo.completed).length
+  const totalTodos = todos.length
+
+  const searchedTodos = todos.filter((todo) => todo.text.toLowerCase().includes(searchValue.toLowerCase()))
+
+  const completeTodo = (text) => {
+
+    const newTodosList = [...todos];
+    const todoIndex = newTodosList.findIndex((todo)=>todo.text === text); 
+    newTodosList[todoIndex].completed = true; // aca lo que estoy diciendo es que en el indice del array donde la propiedad todo.text sea igual al texto que yo le estoy enviando por parametro, ya que ese texto es el identificador unico de ese elemento. entonces, que a ese indice en su propiedad completed la cambie a true cuando ocurra todo lo que pasa en todoIndex. 
+    setTodos(newTodosList); 
+  }
+
+  const deleteTodo = (text) => {
+    const newTodosList = [...todos];
+    const todoIndex = newTodosList.findIndex((todo)=>todo.text === text); 
+    newTodosList.splice(todoIndex, 1);
+    setTodos(newTodosList); 
+  }
+
+  return (
+    <div className="MainContainer">
+
+      <ToDoCounter completed={completedTodos} total={totalTodos}/>
+      <ToDoSearch  searchValue={searchValue} setSearchValue={setSearchValue}/> 
+
+      <ToDoList>
+       {searchedTodos.map((todo) => <ToDoItem key={todo.text} completed={todo.completed} text={todo.text} onComplete={()=>{completeTodo (todo.text)}} onDelete={()=>{deleteTodo(todo.text)}}/> )}
+      </ToDoList>    
+
+      <CreateToDoButton/>
+
+    </div>
+  );
+}
+
+export default App;

src/Componentes/CreateToDoButton/CreateToDoButton.css

@@ -0,0 +1,12 @@
+button{
+    width: 80px;
+    height: 80px;
+    border-radius: 100%;  
+    font-size: 40px;  
+    border: 2px solid rgb(0, 145, 255);
+    position: absolute;
+    top: 715px;
+    right: 205px;
+    background-color: rgb(0, 170, 255);
+    color: #FAFAFA;
+}

src/Componentes/CreateToDoButton/CreateToDoButton.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import "./CreateToDoButton.css"
+
+function CreateToDoButton () {
+
+    return (
+        <button>+</button>
+    )
+}
+
+export {CreateToDoButton}; 

src/Componentes/Icons/completeIcon.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { TodoIcons } from "./todoIcons";
+
+
+function CompleteIcon () {
+    return (
+
+        <TodoIcons type="check"/> 
+    )
+}
+
+export {CompleteIcon}; 

src/Componentes/Icons/deleteIcon.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { TodoIcons } from "./todoIcons";
+
+
+function DeleteIcon () {
+    return (
+        <TodoIcons type="delete"/>
+    )
+}
+
+export {DeleteIcon}; 

src/Componentes/Icons/todoIcons.jsx

@@ -0,0 +1,18 @@
+import {AiFillCheckCircle } from "react-icons/ai"; 
+import { AiFillDelete } from "react-icons/ai";
+
+const iconTypes = { //Creo un objeto con los tipos de iconos que voy a querer renderizar
+    "check":<AiFillCheckCircle/>,
+    "delete": <AiFillDelete/>
+}
+
+function TodoIcons ({type}){
+    return(
+        <span className={`Icon Icon-${type}`}>
+
+        {iconTypes[type]} 
+        </span>
+    )
+}
+
+export {TodoIcons}; 

src/Componentes/ToDoCounter/ToDoCounter.css

@@ -0,0 +1,11 @@
+.title{
+    font-size: 24px;
+    text-align: center;
+    margin: 0;
+    padding: 48px;
+    font-weight: 300;
+}
+
+.title span{
+    font-weight: 700;
+}

src/Componentes/ToDoCounter/ToDoCounter.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import "./ToDoCounter.css"
+
+function ToDoCounter ({completed, total}) {
+    return (
+        <p className="title">Haz Completado <span>{completed}</span> de <span>{total}</span> ToDo's</p>
+    )
+}
+
+export {ToDoCounter}; 

src/Componentes/ToDoList/ToDoList.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+
+
+function ToDoList ({children}) {
+    return (
+        <ul>
+            {children}
+        </ul>
+    )
+}
+
+export {ToDoList}; 

src/Componentes/ToDoSearch/ToDoSearch.css

@@ -0,0 +1,18 @@
+.searchBar{
+    width: 279px;
+    height: 64px;
+    border-radius: 10px;
+    border: solid 1px gray
+}
+
+.searchBar::placeholder{
+    color: silver;
+    font-family: "Montserrat";
+    font-weight: 400;
+    text-align: center;
+    font-size: 20px;
+}
+
+.searchBar:focus{
+    outline-color: rgb(49, 49, 112);
+}

src/Componentes/ToDoSearch/ToDoSearch.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./ToDoSearch.css"
+
+function ToDoSearch ({searchValue, setSearchValue}) {
+
+    return (
+        <input 
+        className="searchBar" 
+        type="search" 
+        placeholder="Buscar ToDo" 
+        onChange={(event)=>{setSearchValue(event.target.value)}} 
+        value={searchValue}
+        />
+    )
+}
+
+export {ToDoSearch}; 

src/Componentes/TodoItem/ToDoItem.css

@@ -0,0 +1,50 @@
+li{
+    list-style: none;
+}
+
+.TodoItem{
+    width: 550px;
+    background-color: #FAFAFA;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 24px;
+    box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.15);
+    border-radius: 10px;
+}
+
+ .TodoItem-p{
+    margin: 24px 0 24px 24px;
+    width: calc(100% - 120px);
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 400;
+}
+
+ .TodoItem-p--complete{
+     text-decoration: line-through;
+}  
+
+.Icon{
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    width: 48px;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.Icon--check--active{
+    color: rgb(107, 173, 107);
+}
+
+.Icon-delete{
+    position: relative;   
+}
+
+.Icon-delete:hover{
+    color: rgb(241, 143, 143);
+}