platzi · Daliens01 · Jun 22, 2023 · Jun 22, 2023 · Jun 24, 2023 · Jun 27, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "dependencies": {
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^4.9.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App/App.js b/src/App/App.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { Logica } from "./logica";
+import {TodoProvider} from "../Contexts/todoContext"
+function App() {
+
+  //se separan entre statefull y stateless
+  return (
+    <TodoProvider>
+      <Logica/>
+    </TodoProvider>
+
+  );
+}
+
+export default App;
diff --git a/src/App/EmptyTodos.js b/src/App/EmptyTodos.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+function EmptyTodos() {
+  return (
+    <p>¡Crea tu primer TODO!</p>
+  );
+}
+
+export { EmptyTodos };
diff --git a/src/App/Modal.js b/src/App/Modal.js
@@ -0,0 +1,11 @@
+import  { React}  from 'react'
+import {createPortal} from "react-dom"
+import "../styles/modal.css"
+const Modal = ({children})=>{
+    return createPortal(<div className='ModalBackground'>
+    {children}
+    </div>,
+    document.getElementById("modal"))
+}
+
+export {Modal}
diff --git a/src/App/TodosError.js b/src/App/TodosError.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+function TodosError() {
+  return (
+    <p>Error...</p>
+  );
+}
+
+export { TodosError };
diff --git a/src/App/TodosLoading.js b/src/App/TodosLoading.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../styles/TodosLoading.css';
+
+function TodosLoading() {
+  return (
+    <div className="LoadingTodo-container">
+      <span className="LoadingTodo-completeIcon"></span>
+      <p className="LoadingTodo-text"></p>
+      <span className="LoadingTodo-deleteIcon"></span>
+    </div>
+  );
+}
+
+export { TodosLoading };
diff --git a/src/App/logica.js b/src/App/logica.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import {NameCounter} from "../Components/NameCounter/index";
+import { TodoFilter } from "../Components/TodoFilter/index";
+import { TodoList } from "../Components/TodoList/index";
+import {TodoItem} from "../Components/TodoItem/index";
+import { CreateButton } from "../Components/CreateButton/index";
+import {TodosLoading} from "./TodosLoading"
+import {TodosError} from "./TodosError"
+import {EmptyTodos} from "./EmptyTodos"
+import { TodoContext } from "../Contexts/todoContext";
+import { TodoForm } from '../Components/todoForm/todoForm';
+import { Modal } from './Modal';
+const Logica = ()=>{
+  const {completeTodo,deleteTodo,searchedTodos,setState, loading, error, openModal, setOpenModal} = React.useContext(TodoContext)
+
+    return(  <>
+        <NameCounter />
+       <TodoFilter setState={setState}/>
+       <TodoList>
+       {loading && (
+          <>
+            <TodosLoading />
+            <TodosLoading />
+            <TodosLoading />
+          </>
+        )}
+        {error && <TodosError/>}
+        {(!loading && searchedTodos.length === 0) && <EmptyTodos />}
+
+        {searchedTodos.map(todo => (
+          <TodoItem
+            key={todo.text}
+            element={todo}
+            completed={todo.completed}
+            oncomplete={() => completeTodo(todo.text)}
+            onDelete={() => deleteTodo(todo.text)}
+          />
+        ))}
+       <CreateButton abrir={setOpenModal}/>
+
+       {
+        openModal && <Modal> <TodoForm/></Modal>
+       }
+
+       </TodoList>
+
+    </>)
+}
+
+export {Logica}
diff --git a/src/Components/CreateButton/index.js b/src/Components/CreateButton/index.js
@@ -0,0 +1,11 @@
+import "../../styles/buttonStyle.css"
+
+const CreateButton = ({abrir})=>{
+
+    return(
+      <button className="CreateTodoButton" onClick={()=>{abrir(e=>!e)}}>+</button>
+    )    
+
+  }
+
+  export {CreateButton}
diff --git a/src/Components/NameCounter/index.js b/src/Components/NameCounter/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import "../../styles/nameCounter.css"
+import { TodoContext } from '../../Contexts/todoContext'
+
+const NameCounter = ()=>{
+  const {completedTodos, totalTodos} = React.useContext(TodoContext)
+
+    return(
+      <h1 className="TodoCounter">
+        has completado  {completedTodos} de {totalTodos} ToDo's
+      </h1>
+    )    
+
+  }
+
+  export {NameCounter}
diff --git a/src/Components/TodoFilter/index.js b/src/Components/TodoFilter/index.js
@@ -0,0 +1,14 @@
+import React from "react"
+import "../../styles/todoFilter.css"
+import { TodoContext } from "../../Contexts/todoContext"
+const TodoFilter = ()=>{
+    const {   searchValue,
+        setSearchValue,} = React.useContext(TodoContext)
+    return(
+   <> <input className="TodoSearch" placeholder="escribe algo" value={searchValue} onChange={(e)=>setSearchValue(e.target.value)}/></>
+    )    
+
+}
+
+export {TodoFilter}
+
diff --git a/src/Components/TodoItem/index.js b/src/Components/TodoItem/index.js
@@ -0,0 +1,16 @@
+import CompleteIcon from "../todoIcon/completeIcon.js";
+import DeleteIcon from "../todoIcon/deleteIcon.js";
+import "../../styles/todoItem.css";
+
+const TodoItem = ({element, completed,onComplete, onDelete})=>{
+    return(
+      <li className="TodoItem">
+        <CompleteIcon complete={completed}  oncomplete={onComplete}/>
+        <p className={`TodoItem-p ${element.completed&&"TodoItem-p--complete"}`}>{element.text}</p>
+        <DeleteIcon  onDelete={onDelete}/>
+      </li>
+    )    
+
+}
+
+export {TodoItem}
diff --git a/src/Components/TodoList/index.js b/src/Components/TodoList/index.js
@@ -0,0 +1,12 @@
+import "../../styles/todoList.css"
+
+const TodoList = (props)=>{
+
+    return(
+      <ul className="TodoList">
+        {props.children}
+      </ul>
+    )    
+}
+
+export {TodoList}
diff --git a/src/Components/todoForm/todoForm.js b/src/Components/todoForm/todoForm.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import "../../styles/todoForm.css"
+import {TodoContext} from "../../Contexts/todoContext"
+function TodoForm(){
+    const [newTodoValue, setNewTodoValue] = React.useState("")
+    const {setOpenModal,addTodo } = React.useContext(TodoContext)
+    const OnSubmit = e =>{
+        addTodo(newTodoValue)
+        e.preventDefault()
+        setOpenModal(false)
+    }
+
+    const OnCancel = () =>setOpenModal(false)
+    const OnChange = e=>{ setNewTodoValue(e.target.value)}
+    return(
+        <>
+            <form onSubmit={OnSubmit}>
+                <label>Escribe tu nuevo Todo</label>
+                <textarea  placeholder='escribe aquí...' value={newTodoValue} onChange={OnChange}></textarea>
+            <div className='TodoForm-buttonContainer'>
+            <button className='TodoForm-button TodoForm-button--cancel' type='button' onClick={OnCancel}>cancelar</button>
+            <button className='TodoForm-button TodoForm-button--add' type='submit'>agregar</button>
+            </div>
+            </form>
+        </>
+    )
+}
+
+export {TodoForm}
diff --git a/src/Components/todoIcon/completeIcon.js b/src/Components/todoIcon/completeIcon.js
@@ -0,0 +1,9 @@
+import {React} from 'react'
+import TodoIcon from '.';
+const completeIcon = ({complete, oncomplete}) => {
+    return (
+        <TodoIcon type="check" click={oncomplete} color={complete?"green":"gray"}/>
+    );
+}
+
+export default completeIcon
diff --git a/src/Components/todoIcon/deleteIcon.js b/src/Components/todoIcon/deleteIcon.js
@@ -0,0 +1,9 @@
+import {React} from 'react'
+import TodoIcon from '.';
+const deleteIcon = ({onDelete}) => {
+    return (
+        <TodoIcon type="delete"  color="gray" click={onDelete}/>
+    );
+}
+
+export  default deleteIcon
diff --git a/src/Components/todoIcon/index.js b/src/Components/todoIcon/index.js
@@ -0,0 +1,17 @@
+import {React} from 'react';
+import { ReactComponent as CheckIcon} from '../../icons/check.svg';
+import { ReactComponent as DeleteIcon } from '../../icons/delete.svg';
+import "../../styles/todoIcon.css"
+const todoIcon = ({type, color, click}) => {
+    const iconType = {
+        "check": color=><CheckIcon className="Icon-svg" fill={color}/>,
+        "delete": color =><DeleteIcon className="Icon-svg" fill={color}/>
+    }
+    return (
+        <span className={`Icon-container Icon-container-${type}`} onClick={()=>click()}>
+            {iconType[type](color)}
+        </span>
+    );
+}
+
+export  default todoIcon;