useContext

Misael-GC · Nov 2, 2023 · 7dd42c2 · 7dd42c2
1 parent cf37158
commit 7dd42c2
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 30 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/mgc.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#97ca3f" />
     <meta
-      name="description"
-      content="Web site created using create-react-app"
+      name="Aplicación de Taeras por hacer"
+      content="Web site created using create-react-app por Misael Gomez Cuautle"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/react192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/mgc.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/public/mgc.png b/public/mgc.png
diff --git a/src/App/AppUI.js b/src/App/AppUI.js
@@ -16,25 +16,22 @@ import { TodoGraphicLoading } from "../TodoGraphicLoading";
 import { TodoContext } from "../TodoContext";
 
 function AppUI() {
+  const {
+    loading,
+    error,
+    completedTodos,
+    totalTodos,
+    searchedTodos,
+    completeTodo,
+    deleteTodo,
+    showSearch,
+    showCounter,
+    showGraphic,
+    } = React.useContext(TodoContext);
   return (
     <>
       <Nadvar />
-      <TodoContext.Consumer>
-        {({
-        loading,
-        error,
-        completedTodos,
-        totalTodos,
-        motivationalPhrase,
-        searchValue,
-        setSearchValue,
-        searchedTodos,
-        completeTodo,
-        deleteTodo,
-        showSearch,
-        showCounter,
-        showGraphic,
-        }) => (
+
           <div className="SuperiorContainerAll">
           {loading && (
             <>
@@ -82,8 +79,7 @@ function AppUI() {
 
           {/* Arreglar los estilos */}
         </div>
-        )}
-      </TodoContext.Consumer>
+
       <CreateTodoButton />
       <Footer />
     </>

diff --git a/src/TodoContext/index.js b/src/TodoContext/index.js
@@ -86,7 +86,7 @@ function TodoProvider({ children }) {
         error,
         completedTodos,
         totalTodos,
-        motivationalPhrase,
+        motivationalPhrase, 
         searchValue,
         setSearchValue,
         searchedTodos,

diff --git a/src/TodoCounter/index.jsx b/src/TodoCounter/index.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import "./TodoCounter.css"
+import { TodoContext } from '../TodoContext';
 
-function TodoCounter({ total, completed, motivationalPhrase }){
+function TodoCounter(){
+
+    const { totalTodos, completedTodos, motivationalPhrase } = React.useContext(TodoContext);
 
     return(
         <h1 className="TodoCounter">
-            Has completado <span>{completed} </span> 
-            de <span>{total}</span> TODOs
+            Has completado <span>{completedTodos} </span> 
+            de <span>{totalTodos}</span> TODOs
         <p>{motivationalPhrase}</p>
         </h1>
     );

diff --git a/src/TodoSearch/index.js b/src/TodoSearch/index.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import { AiOutlineSearch } from "react-icons/ai";
 import './TodoSearch.css';
+import { TodoContext } from '../TodoContext';
 
-function TodoSearch({
-    searchValue,
-    setSearchValue,
-}){
+function TodoSearch(){
+    const {
+        searchValue,
+        setSearchValue,
+    } = React.useContext(TodoContext);
 
     return(
         <div className="container-sm mb-5 ">