platzi · wilmarraga1 · Mar 29, 2024 · Mar 29, 2024
diff --git a/public/%PUBLIC_URL%/react192.png b/public/%PUBLIC_URL%/react192.png
diff --git a/public/index.html b/public/index.html
@@ -24,11 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=IBM+Plex+Sans:wght@400;500;700&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,700;1,600&family=Yellowtail&display=swap" rel="stylesheet">
+    <title>TODO Machine</title>
   </head>
   <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/AppUI.js b/src/App/AppUI.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { TodoCounter } from '../TodoCounter';
+import { TodoSearch } from '../TodoSearch';
+import { TodoList } from '../TodoList';
+import { TodoItem } from '../TodoItem';
+import { TodosLoading } from '../TodosLoading';
+import { TodosError } from '../TodosError';
+import { EmptyTodos } from '../EmptyTodos';
+import { CreateTodoButton } from '../CreateTodoButton';
+import { TodoContext } from '../TodoContext';
+import {Modal} from '../Modal';
+
+function AppUI() {
+  const {
+    loading,
+    error,
+    searchedTodos,
+    completeTodo,
+    deleteTodo,
+    openModal,
+    setOpenModal,
+  } = React.useContext(TodoContext);
+
+  return (
+    <>
+      <TodoCounter />
+      <TodoSearch />
+
+      <TodoList>
+        {loading && (
+          <>
+            <TodosLoading />
+            <TodosLoading />
+            <TodosLoading />
+          </>
+
+        )}
+        {error && <TodosError/>}
+        {(!loading && searchedTodos.length === 0) && <EmptyTodos />}
+
+        {searchedTodos.map(todo => (
+          <TodoItem
+            key={todo.text}
+            text={todo.text}
+            completed={todo.completed}
+            onComplete={() => completeTodo(todo.text)}
+            onDelete={() => deleteTodo(todo.text)}
+          />
+        ))}
+      </TodoList>
+
+      <CreateTodoButton />
+
+      {openModal && (
+        <Modal>
+          la funcionalidad de agregar TODO
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export { AppUI };
diff --git a/src/App/index.js b/src/App/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { TodoProvider } from '../TodoContext';
+import { AppUI } from './AppUI';
+
+function App() {
+  return (
+    <TodoProvider>
+      <AppUI />
+    </TodoProvider>
+  );
+}
+
+export default App;
diff --git a/src/CreateTodoButton/CreateTodoButton.css b/src/CreateTodoButton/CreateTodoButton.css
@@ -0,0 +1,23 @@
+.CreateTodoButton{
+    background-color: #61dafa;
+    box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 50px;
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    font-weight: bold;
+    color: #fafafa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 64px;
+    width: 64px;
+    transform: rotate(0);
+    transition: .3s ease;
+}
+.CreateTodoButton:hover{
+    transform: rotate(90deg);
+}
diff --git a/src/CreateTodoButton/index.js b/src/CreateTodoButton/index.js
@@ -0,0 +1,18 @@
+import './CreateTodoButton.css';
+
+function CreateTodoButton() {
+  return (
+    <button
+      className="CreateTodoButton"
+      onClick={
+        (event) => {
+          console.log('le diste click')
+          console.log(event)
+          console.log(event.target)
+        }
+      }
+    >+</button>
+  );
+}
+
+export { CreateTodoButton };
diff --git a/src/EmptyTodos/index.js b/src/EmptyTodos/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+function EmptyTodos() {
+  return (
+    <p>¡Crea tu primer TODO!</p>
+  );
+}
+
+export { EmptyTodos };
diff --git a/src/Modal/Modal.css b/src/Modal/Modal.css
@@ -0,0 +1,12 @@
+.ModalBackground {
+    background-color: rgba(32,35,41,.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
diff --git a/src/Modal/index.js b/src/Modal/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './Modal.css';
+
+function Modal({ children }) {
+  return ReactDOM.createPortal(
+    <div className="ModalBackground">
+      {children}
+    </div>,
+    document.getElementById('modal')
+  );
+}
+
+export { Modal };
diff --git a/src/TodoContext/index.js b/src/TodoContext/index.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { useLocalStorage } from './useLocalStorage';
+
+const TodoContext = React.createContext();
+
+function TodoProvider({ children }) {
+  const {
+    item: todos,
+    saveItem: saveTodos,
+    loading,
+    error,
+  } = useLocalStorage('TODOS_V1', []);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [openModal, setOpenModal] = React.useState(true);
+
+  const completedTodos = todos.filter(
+    todo => !!todo.completed
+  ).length;
+  const totalTodos = todos.length;
+
+  const searchedTodos = todos.filter(
+    (todo) => {
+      const todoText = todo.text.toLowerCase();
+      const searchText = searchValue.toLowerCase();
+      return todoText.includes(searchText);
+    }
+  );
+
+  const completeTodo = (text) => {
+    const newTodos = [...todos];
+    const todoIndex = newTodos.findIndex(
+      (todo) => todo.text === text
+    );
+    newTodos[todoIndex].completed = true;
+    saveTodos(newTodos);
+  };
+
+  const deleteTodo = (text) => {
+    const newTodos = [...todos];
+    const todoIndex = newTodos.findIndex(
+      (todo) => todo.text === text
+    );
+    newTodos.splice(todoIndex, 1);
+    saveTodos(newTodos);
+  };
+
+  return (
+    <TodoContext.Provider value={{
+      loading,
+      error,
+      completedTodos,
+      totalTodos,
+      searchValue,
+      setSearchValue,
+      searchedTodos,
+      completeTodo,
+      deleteTodo,
+      openModal,
+      setOpenModal,
+    }}>
+      {children}
+    </TodoContext.Provider>
+  );
+}
+
+export { TodoContext, TodoProvider };
diff --git a/src/TodoContext/useLocalStorage.js b/src/TodoContext/useLocalStorage.js
@@ -0,0 +1,57 @@
+import React from 'react';
+
+function useLocalStorage(itemName, initialValue) {
+  const [item, setItem] = React.useState(initialValue);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(false);
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      try {
+        const localStorageItem = localStorage.getItem(itemName);
+
+        let parsedItem;
+
+        if (!localStorageItem) {
+          localStorage.setItem(itemName, JSON.stringify(initialValue));
+          parsedItem = initialValue;
+        } else {
+          parsedItem = JSON.parse(localStorageItem);
+          setItem(parsedItem);
+        }
+
+        setLoading(false);
+      } catch(error) {
+        setLoading(false);
+        setError(true);
+      }
+    }, 2000);
+  });
+
+  const saveItem = (newItem) => {
+    localStorage.setItem(itemName, JSON.stringify(newItem));
+    setItem(newItem);
+  };
+
+  return {
+    item,
+    saveItem,
+    loading,
+    error,
+  };
+}
+
+export { useLocalStorage };
+
+
+// localStorage.removeItem('TODOS_V1');
+
+// const defaultTodos = [
+//   { text: 'Cortar cebolla', completed: true },
+//   { text: 'Tomar el Curso de Intro a React.js', completed: false },
+//   { text: 'Llorar con la Llorona', completed: false },
+//   { text: 'LALALALALA', completed: false },
+//   { text: 'Usar estados derivados', completed: true },
+// ];
+
+// localStorage.setItem('TODOS_V1', JSON.stringify(defaultTodos));
diff --git a/src/TodoCounter/TodoCounter.css b/src/TodoCounter/TodoCounter.css
@@ -0,0 +1,10 @@
+.TodoCounter{
+    font-size: 24px;
+    text-align: center;
+    margin: 0;
+    padding: 48px;
+    font-weight: normal;
+}
+.TodoCounter{
+    font-weight: bold;
+}