platzi · PANAMA-TEC · Jul 23, 2024 · Jul 24, 2024 · Jul 25, 2024 · Jul 25, 2024
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/Icons/CompleteIcon/index.css b/src/Icons/CompleteIcon/index.css
@@ -0,0 +1,9 @@
+.iconCheck {
+  /* border-style: solid; */
+  width: 20%;
+  height: -webkit-fill-available;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor:pointer;
+}
diff --git a/src/Icons/CompleteIcon/index.js b/src/Icons/CompleteIcon/index.js
@@ -0,0 +1,13 @@
+import "./index.css";
+
+const CompleteIcon = ({onCompleted, completed}) => {
+  return(
+    <span className="iconCheck">
+      <svg onClick={ onCompleted } xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill={ `${ completed ? 'red' : 'blue'}`} className={"bi bi-check2"} viewBox="0 0 16 16">
+        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+      </svg>
+    </span>
+  );
+}
+
+export { CompleteIcon }
diff --git a/src/Icons/DeleteIcon/index.css b/src/Icons/DeleteIcon/index.css
@@ -0,0 +1,17 @@
+.closeButton {
+  position: relative;
+  top: -50%;
+  right: 0px;
+  /* border-style: solid; */
+
+  height: 50px;
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  background-color: white;
+  cursor: pointer;
+  border-radius: 50%;
+  border-style: solid;
+}
diff --git a/src/Icons/DeleteIcon/index.js b/src/Icons/DeleteIcon/index.js
@@ -0,0 +1,13 @@
+import './index.css'
+
+const DeleteIcon = ({onDelete}) => {
+  return(
+    <span className='closeButton'> 
+      <svg onClick={ onDelete } xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className={"bi bi-eraser"} viewBox="0 0 16 16">
+        <path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z"/>
+      </svg>
+    </span>
+  );
+}
+
+export {DeleteIcon}
diff --git a/src/Icons/iconManager/index.css b/src/Icons/iconManager/index.css
@@ -0,0 +1,9 @@
+.iconCheck {
+  /* border-style: solid; */
+  width: 20%;
+  height: -webkit-fill-available;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor:pointer;
+}
diff --git a/src/Icons/iconManager/index.js b/src/Icons/iconManager/index.js
@@ -0,0 +1,13 @@
+import "./index.css";
+
+const CompleteIcon = ({onCompleted, completed}) => {
+  return(
+    <span className="iconCheck">
+      <svg onClick={ onCompleted } xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill={ `${ completed ? 'red' : 'blue'}`} className={"bi bi-check2"} viewBox="0 0 16 16">
+        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+      </svg>
+    </span>
+  );
+}
+
+export { CompleteIcon }
diff --git a/src/Modal/index.css b/src/Modal/index.css
@@ -0,0 +1,14 @@
+.Modal{
+    padding: 40px;
+    background-color: blue;
+    color: white;
+    position: fixed;
+
+    top:0;
+    z-index:1;
+    right:0;
+
+    width: 30vw;
+    height: 100vh;;
+
+}
diff --git a/src/Modal/index.js b/src/Modal/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import './index.css'
+
+
+const Modal =( {children} )=> {
+    return ReactDOM.createPortal(
+        <div className="Modal">
+            {children}
+        </div>,
+
+        document.getElementById('modal')
+    );
+}
+
+export { Modal }
diff --git a/src/components/App/AppUI.js b/src/components/App/AppUI.js
@@ -0,0 +1,47 @@
+import { TodoCounter } from '../TodoCounter';
+import { TodoSearch } from '../TodoSearch';
+import { TodoList } from '../TodoList';
+import { TodoItem } from '../TodoItem';
+import { CreateTodo } from '../CreateTodo';
+import { LoadingsTodo } from '../LoadingsTodos';
+import { ErrorsTodo } from '../ErrorsTodos';
+import { EmptyTodos } from '../EmptysTodos';
+import { TodoContext } from '../TodoContext';
+import { Modal } from '../../Modal';
+import React from 'react';
+
+const AppUI = ( )=>{
+    //Esto es utilizado para pasar los props de una manera más limpia a la aplicación.
+    const { loading, searchedTodo, error, toggleToDo, deleteTodo, openModal } = React.useContext(TodoContext);  
+
+    return ( 
+        <div className='App'>
+
+          <div className='contenedorPrincipal'>
+
+            <TodoCounter />
+            <TodoSearch />
+
+            <TodoList>
+              { loading ? <LoadingsTodo/>  : "" }
+              { error ? <ErrorsTodo/>  : "" }
+              { !loading && searchedTodo.length === 0 ? <EmptyTodos/> : "" }
+              { searchedTodo.map( todo => (  
+                  <TodoItem  mensaje = { todo.text } key = { todo.text } completed ={todo.Completed}
+                    onCompleted = { ()=>{ toggleToDo(todo.text) }}
+                    onDelete = { () => { deleteTodo(todo.text); }} 
+                  /> 
+              ))}
+            </TodoList>
+
+            <CreateTodo/>
+
+          </div>
+
+          { openModal ? <Modal>La funcionalidad de agregar TODOs.</Modal> : "" }
+
+        </div>
+    );
+}
+
+export { AppUI }
diff --git a/src/components/App/index.css b/src/components/App/index.css
@@ -0,0 +1,79 @@
+.App {
+
+  text-align: center; 
+  display: flex;
+  flex-direction: row;  
+  align-items: center;
+  justify-content: center;
+
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.App-header {
+  background-color: #233553;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #97ca3f;
+}
+
+
+
+.contenedorInferior{
+
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: flex-end;
+  /* border-style: solid; */
+  position: relative;
+  bottom: 100px;
+
+}
+
+.contenedorPrincipal{
+
+  min-width: 600px;
+  /* border-style: solid; */
+  padding: 50px 100px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  background-color: rgb(243,244,245);
+  border-radius: 10px;
+  gap: 50px;
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  border-style: solid;
+  border-color: white;
+  border-width: 2px;
+
+}
+
+
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -0,0 +1,31 @@
+import './index.css';
+import { AppUI } from './AppUI';
+import { TodoProvider } from '../TodoContext';
+
+
+/**
+ *
+ * 
+ * 
+const defaultTodos = [
+  { text: ' cebolla', Completed: true },
+  { text: 'tomar el curso de React', Completed: false },
+  { text: 'Llorar con la llorona', Completed: false },
+  { text: 'Cortar cebolla', Completed: false },
+  { text: 'LALALALA ', Completed: false },
+  { text: 'Usar estados derivados ', Completed: true }
+]
+
+localStorage.setItem(itemName, JSON.stringify(defaultTodos));
+
+*/
+
+const App = () =>{
+  return(
+    <TodoProvider>
+      <AppUI />
+    </TodoProvider>
+  )
+}
+
+export default App;
diff --git a/src/components/CreateTodo/index.css b/src/components/CreateTodo/index.css
@@ -0,0 +1,25 @@
+.buttonAgregar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    font-size: 50px;
+
+    position: absolute;
+    right: 50px;
+    bottom:50px;
+    background-color: rgb(130,216,246);
+    color: white;
+    border-style: none;
+    cursor: pointer;
+
+
+    transform: rotate(0deg);
+    transition: 0.3s ease;
+    z-index: 2
+
+}
+
+.buttonAgregar:hover {
+    transform: rotate(224deg);
+
+}
diff --git a/src/components/CreateTodo/index.js b/src/components/CreateTodo/index.js
@@ -0,0 +1,19 @@
+import './index.css';
+import React from 'react';
+import { TodoContext } from '../TodoContext';
+
+const CreateTodo = () => {
+  const { setOpenModal, openModal } = React.useContext(TodoContext);  
+
+  return(
+
+    <button className='buttonAgregar' onClick={() => { setOpenModal(!openModal)}}>
+      +
+   </button>
+
+  );
+}
+
+
+
+export { CreateTodo };