Sesion 4

adición de últimos detalles de lógica y + persistencia de datos y así ggg
Guarnerman · May 11, 2023 · 1cd3682 · 1cd3682
1 parent 434b740
commit 1cd3682
Show file tree

Hide file tree

Showing 31 changed files with 480 additions and 154 deletions.
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/AppUI.js b/src/App/AppUI.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { ToDoCounter  } from '../ToDoCounter';
+import { ToDoSearch } from "../ToDoSearch";
+import { ToDoList } from '../ToDoList';
+import { ToDoItem } from '../ToDoItem';
+import { CreateToDoButton } from '../CreateToDoButton'
+import { ToDosLoading } from "../ToDosLoading";
+import { ToDosError } from "../ToDosError";
+import { EmptyToDos } from "../EmptyToDos";
+import { Modal } from "../Modal";
+import { ToDoContext } from "../ToDoContext";
+import { ToDoForm } from '../ToDoForm';
+
+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 
+                setOpenModal={setOpenModal}
+            />
+
+            {openModal && (
+                <Modal>
+                    <ToDoForm />
+                </Modal>
+            )}
+        </ >
+    );
+}
+
+export { AppUI }
diff --git a/src/App/index.js b/src/App/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { AppUI } from './AppUI';
+import { ToDoProvider } from '../ToDoContext';
+
+function App() {
+  return (
+    <ToDoProvider>
+      <AppUI />
+    </ToDoProvider>
+  )
+}
+
+export default App;
diff --git a/src/CreateToDoButton.js b/src/CreateToDoButton.js
diff --git a/src/CreateToDoButton.css → src/CreateToDoButton/CreateToDoButton.css b/src/CreateToDoButton.css → src/CreateToDoButton/CreateToDoButton.css
@@ -15,6 +15,7 @@
     align-items: center;
     height: 64px;
     width: 64px;
+    z-index: 1;
 
     transform: rotate(0);
     transition: .3s ease;

diff --git a/src/CreateToDoButton/index.js b/src/CreateToDoButton/index.js
@@ -0,0 +1,14 @@
+import './CreateToDoButton.css'
+
+function CreateToDoButton({ setOpenModal }) {
+    return (
+        <button 
+            className="CreateToDoButton" 
+            onClick={() => {
+                setOpenModal(state => !state)
+            }}
+        >+</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 To-Do!</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,71 @@
+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(false)
+
+      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.toLocaleLowerCase()
+          return toDoText.includes(searchText)})
+
+      const addToDo = (text) => {
+        const newToDos = [...toDos]
+        newToDos.push({
+          text,
+          completed: false,
+        })
+        saveToDos(newToDos)
+      }
+
+      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,
+            addToDo,
+        }}>
+            { children }
+        </ToDoContext.Provider>
+    )
+}
+
+export { ToDoContext, ToDoProvider }