platzi · santiagomillan · Jun 24, 2023 · Jun 29, 2023 · Jun 29, 2023 · Jul 3, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -28,5 +30,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "homepage": "https://santiagomillan.github.io/curso-react-intro-platzi",
+  "devDependencies": {
+    "gh-pages": "^5.0.0"
   }
 }
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,65 @@
+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 { Modal } from '../Modal';
+import { TodoForm } from '../TodoForm';
+import { TodoContext } from '../TodoContext';
+
+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,26 @@
+import React  from 'react';
+import {AppUI} from './AppUi'
+import { TodoProvider } from '../TodoContext';
+
+// const defaultTodos = [
+//   {text :"cortar" , completed: true},
+//   {text :"cortar 1" , completed: true},
+//   {text :"cortar 2" , completed: false},
+//   {text :"cortar 3" , completed: false},
+//   {text :"cortar 4" , completed: false}
+// ]
+
+// localStorage.setItem("TODOS_V1" , JSON.stringify(defaultTodos))
+// localStorage.removeItem("TODOS_V1")
+
+
+function App() {
+  return (
+    <TodoProvider>
+      <AppUI/>
+    </TodoProvider>
+  );
+}
+
+
+export default App;
diff --git a/src/CreateTodoButton/CreateTodoButton.css b/src/CreateTodoButton/CreateTodoButton.css
@@ -0,0 +1,26 @@
+.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;
+  z-index: 1;
+
+  transform: rotate(0);
+  transition: .3s ease;
+}
+
+.CreateTodoButton:hover {
+  transform: rotate(224deg);
+}
diff --git a/src/CreateTodoButton/index.js b/src/CreateTodoButton/index.js
@@ -0,0 +1,37 @@
+// import "./CreateTodoButton.css"
+
+// function CreateTodoButton({ setOpenModal }) {
+//     return (
+//       <>
+//       <button 
+//         className="CreateTodoButton" 
+//         onClick={
+//           (event)=> {
+//             console.log("le diste click")
+//             console.log(event)
+//             console.log(event.target)
+//             setOpenModal(state => !state);
+//           }
+//         }
+//       >+</button>
+//       </>
+//     );
+//   }
+
+// export {CreateTodoButton};
+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,12 @@
+import React from 'react';
+// import './EmptyTodos.css';
+
+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 };