From 751da6851efe98819d580507a85120afa42af5f7 Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Sat, 24 Jun 2023 17:37:21 -0500 Subject: [PATCH 01/15] clases1-4 --- src/App.js | 49 +++++++++++++++++++++++++++-------------- src/CreateTodoButton.js | 9 ++++++++ src/TodoCounter.js | 7 ++++++ src/TodoItem.js | 11 +++++++++ src/TodoList.js | 9 ++++++++ src/TodoSearch.js | 7 ++++++ 6 files changed, 75 insertions(+), 17 deletions(-) create mode 100644 src/CreateTodoButton.js create mode 100644 src/TodoCounter.js create mode 100644 src/TodoItem.js create mode 100644 src/TodoList.js create mode 100644 src/TodoSearch.js diff --git a/src/App.js b/src/App.js index 952c8f1fd..06cd77a8c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,40 @@ -import logo from './platzi.webp'; +// import logo from './platzi.webp'; import './App.css'; +import {TodoCounter} from "./TodoCounter" +import {TodoSearch} from "./TodoSearch" +import {TodoList} from "./TodoList" +import {CreateTodoButton} from "./CreateTodoButton" +import { TodoItem } from './TodoItem'; +import React from 'react'; + +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} + +] function App() { return ( -
-
- logo -

- Edita el archivo src/App.js y guarda para recargar. -

- - Learn React - -
-
+ + + + + + + {defaultTodos.map(todo => ( + + ))} + + + + + + ); } + export default App; diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js new file mode 100644 index 000000000..c69adb997 --- /dev/null +++ b/src/CreateTodoButton.js @@ -0,0 +1,9 @@ +function CreateTodoButton() { + return ( + <> + + + ); + } + +export {CreateTodoButton}; \ No newline at end of file diff --git a/src/TodoCounter.js b/src/TodoCounter.js new file mode 100644 index 000000000..34762dd5f --- /dev/null +++ b/src/TodoCounter.js @@ -0,0 +1,7 @@ +function TodoCounter({total, completed}) { + return ( +

Has completado {completed} de {total} TODOS

+ ); + } + +export {TodoCounter}; \ No newline at end of file diff --git a/src/TodoItem.js b/src/TodoItem.js new file mode 100644 index 000000000..20c92c06f --- /dev/null +++ b/src/TodoItem.js @@ -0,0 +1,11 @@ +function TodoItem(props) { + return ( +
  • + V +

    {props.text}

    + X +
    • + ); + } + + export {TodoItem} \ No newline at end of file diff --git a/src/TodoList.js b/src/TodoList.js new file mode 100644 index 000000000..e442cf8cc --- /dev/null +++ b/src/TodoList.js @@ -0,0 +1,9 @@ +function TodoList({children}) { + return ( + + ); + } + +export {TodoList}; \ No newline at end of file diff --git a/src/TodoSearch.js b/src/TodoSearch.js new file mode 100644 index 000000000..85434ecd0 --- /dev/null +++ b/src/TodoSearch.js @@ -0,0 +1,7 @@ +function TodoSearch() { + return ( + + ); + } + +export {TodoSearch}; \ No newline at end of file From 20352357726aa8bcebf74aadeb5f0da19cfa9c89 Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Wed, 28 Jun 2023 23:31:28 -0500 Subject: [PATCH 02/15] Clase 5 estilos --- src/App.js | 2 +- src/CreateTodoButton.css | 25 ++++++++++++++++++++ src/CreateTodoButton.js | 4 +++- src/TodoCounter.css | 11 +++++++++ src/TodoCounter.js | 6 ++++- src/TodoItem.css | 49 ++++++++++++++++++++++++++++++++++++++++ src/TodoItem.js | 16 +++++++++---- src/TodoList.css | 5 ++++ src/TodoList.js | 18 ++++++++------- src/TodoSearch.css | 24 ++++++++++++++++++++ src/TodoSearch.js | 15 ++++++++---- src/index.css | 18 +++++++-------- 12 files changed, 164 insertions(+), 29 deletions(-) create mode 100644 src/CreateTodoButton.css create mode 100644 src/TodoCounter.css create mode 100644 src/TodoItem.css create mode 100644 src/TodoList.css create mode 100644 src/TodoSearch.css diff --git a/src/App.js b/src/App.js index 06cd77a8c..383728df8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ // import logo from './platzi.webp'; -import './App.css'; +// import './App.css'; import {TodoCounter} from "./TodoCounter" import {TodoSearch} from "./TodoSearch" import {TodoList} from "./TodoList" diff --git a/src/CreateTodoButton.css b/src/CreateTodoButton.css new file mode 100644 index 000000000..0b3a72938 --- /dev/null +++ b/src/CreateTodoButton.css @@ -0,0 +1,25 @@ +.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(224deg); + } \ No newline at end of file diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js index c69adb997..d18d44295 100644 --- a/src/CreateTodoButton.js +++ b/src/CreateTodoButton.js @@ -1,7 +1,9 @@ +import "./CreateTodoButton.css" + function CreateTodoButton() { return ( <> - + ); } diff --git a/src/TodoCounter.css b/src/TodoCounter.css new file mode 100644 index 000000000..64b598ece --- /dev/null +++ b/src/TodoCounter.css @@ -0,0 +1,11 @@ +.TodoCounter { + font-size: 24px; + text-align: center; + margin: 0; + padding: 48px; + font-weight: normal; + } + +.TodoCounter span { + font-weight: bold; +} \ No newline at end of file diff --git a/src/TodoCounter.js b/src/TodoCounter.js index 34762dd5f..bcda5a793 100644 --- a/src/TodoCounter.js +++ b/src/TodoCounter.js @@ -1,6 +1,10 @@ +import './TodoCounter.css' + function TodoCounter({total, completed}) { return ( -

    Has completado {completed} de {total} TODOS

    +

    + Has completado {completed} de {total} TODOs +

    ); } diff --git a/src/TodoItem.css b/src/TodoItem.css new file mode 100644 index 000000000..c72b134f6 --- /dev/null +++ b/src/TodoItem.css @@ -0,0 +1,49 @@ +.TodoItem { + background-color: #FAFAFA; + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-top: 24px; + box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.15); + } + + .TodoItem-p { + margin: 24px 0 24px 24px; + width: calc(100% - 120px); + font-size: 18px; + line-height: 24px; + font-weight: 400; + } + .TodoItem-p--complete { + text-decoration: line-through; + } + + .Icon { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + height: 48px; + width: 48px; + font-size: 24px; + font-weight: bold; + /* background-color: #CCC; */ + } + + .Icon-check { + position: absolute; + left: 12px; + } + .Icon-check--active { + color: #4caf50; + } + + .Icon-delete { + position: absolute; + top: -24px; + right: 0; + } + .Icon-delete:hover { + color: red; + } \ No newline at end of file diff --git a/src/TodoItem.js b/src/TodoItem.js index 20c92c06f..b52ad9d1a 100644 --- a/src/TodoItem.js +++ b/src/TodoItem.js @@ -1,9 +1,17 @@ +import './TodoItem.css'; + function TodoItem(props) { return ( -
  • - V -

    {props.text}

    - X +
  • + + V + +

    + {props.text} +

    + + X +
    • ); } diff --git a/src/TodoList.css b/src/TodoList.css new file mode 100644 index 000000000..c6cf80c56 --- /dev/null +++ b/src/TodoList.css @@ -0,0 +1,5 @@ +.TodoList { + margin: 0; + padding: 0 0 56px 0; + list-style: none; + } \ No newline at end of file diff --git a/src/TodoList.js b/src/TodoList.js index e442cf8cc..c667e0783 100644 --- a/src/TodoList.js +++ b/src/TodoList.js @@ -1,9 +1,11 @@ -function TodoList({children}) { - return ( - - ); - } +import './TodoList.css'; -export {TodoList}; \ No newline at end of file +function TodoList({ children }) { + return ( + + ); +} + +export { TodoList }; \ No newline at end of file diff --git a/src/TodoSearch.css b/src/TodoSearch.css new file mode 100644 index 000000000..25827dc2c --- /dev/null +++ b/src/TodoSearch.css @@ -0,0 +1,24 @@ +.TodoSearch { + background: #F9FBFC; + border-radius: 2px; + border: 2px solid #202329; + margin: 0 24px; + height: 64px; + width: calc(100% - 62px); + font-size: 24px; + text-align: center; + font-family: 'Montserrat'; + font-weight: 400; + color: #1E1E1F; + box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.25); + } + + .TodoSearch::placeholder { + color: #A5A5A5; + font-family: 'Montserrat'; + font-weight: 400; + } + + .TodoSearch:focus { + outline-color: #61DAFA; + } \ No newline at end of file diff --git a/src/TodoSearch.js b/src/TodoSearch.js index 85434ecd0..babc0623d 100644 --- a/src/TodoSearch.js +++ b/src/TodoSearch.js @@ -1,7 +1,12 @@ +import './TodoSearch.css'; + function TodoSearch() { - return ( - - ); - } + return ( + + ); +} -export {TodoSearch}; \ No newline at end of file +export { TodoSearch }; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e8c..2226064d0 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + padding: 0; + background: #F2F4F5; + color: #1E1E1F; + font-family: 'Montserrat', Arial, Helvetica, sans-serif; } -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} +#root { + margin: 0 24px; + position: relative; + min-height: 100vh; +} \ No newline at end of file From 9d8afc4c6b0cbf02a1c3f51bd8793f4d9b514d99 Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Thu, 29 Jun 2023 13:24:10 -0500 Subject: [PATCH 03/15] Clase 6 --- src/CreateTodoButton.js | 11 ++++++++++- src/TodoSearch.js | 6 ++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js index d18d44295..4682be431 100644 --- a/src/CreateTodoButton.js +++ b/src/CreateTodoButton.js @@ -3,7 +3,16 @@ import "./CreateTodoButton.css" function CreateTodoButton() { return ( <> - + ); } diff --git a/src/TodoSearch.js b/src/TodoSearch.js index babc0623d..88f04ce21 100644 --- a/src/TodoSearch.js +++ b/src/TodoSearch.js @@ -5,6 +5,12 @@ function TodoSearch() { { + console.log("escribiuste ") + console.log(event) + console.log(event.target) + console.log(event.target.value) + }} /> ); } From f54bf782f1b2a45fb68516aab3bbcc18b31f99d3 Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Sun, 2 Jul 2023 23:35:01 -0500 Subject: [PATCH 04/15] Clase 8 --- src/App.js | 21 ++++++++++++++++----- src/TodoSearch.js | 15 ++++++++++----- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index 383728df8..72b85d644 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import {TodoSearch} from "./TodoSearch" import {TodoList} from "./TodoList" import {CreateTodoButton} from "./CreateTodoButton" import { TodoItem } from './TodoItem'; -import React from 'react'; +import React, { useState } from 'react'; const defaultTodos = [ {text :"cortar" , completed: true}, @@ -17,11 +17,22 @@ const defaultTodos = [ ] function App() { + const [todos, setTodos] = useState(defaultTodos); + const [searchValue , setSearchValue ] = useState("") + + const completedTodos = todos.filter(todo => !!todo.completed).length; + const totalTodos = todos.length; + + console.log("searchValue",searchValue) + return ( - + <> - - + + {defaultTodos.map(todo => ( @@ -32,7 +43,7 @@ function App() { - + ); } diff --git a/src/TodoSearch.js b/src/TodoSearch.js index 88f04ce21..ac3c038e2 100644 --- a/src/TodoSearch.js +++ b/src/TodoSearch.js @@ -1,15 +1,20 @@ +import React from 'react'; import './TodoSearch.css'; -function TodoSearch() { +function TodoSearch({searchValue, setSearchValue}) { + + return ( { - console.log("escribiuste ") - console.log(event) - console.log(event.target) - console.log(event.target.value) + setSearchValue(event.target.value) + // console.log("escribiuste ") + // console.log(event) + // console.log(event.target) + // console.log(event.target.value) }} /> ); From 934ca49a4109b0365e6d2bfa7319e5c6b6bee53c Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Mon, 3 Jul 2023 00:06:59 -0500 Subject: [PATCH 05/15] Clase 10 se puede hacer la actividad recomendad --- src/App.js | 27 +++++++++++++++++++++++++-- src/TodoItem.js | 9 +++++++-- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 72b85d644..4d7a50024 100644 --- a/src/App.js +++ b/src/App.js @@ -23,6 +23,29 @@ function App() { 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 + setTodos(newTodos) + } + + const deleteTodo = (text) => { + const newTodos = [...todos] + const todoIndex = newTodos.findIndex((todo) => todo.text === text) + newTodos.splice(todoIndex, 1) + setTodos(newTodos) + } + + console.log("searchValue",searchValue) return ( @@ -35,8 +58,8 @@ function App() { /> - {defaultTodos.map(todo => ( - + {searchedTodos.map(todo => ( + completeTodo(todo.text)} onDelete={()=> deleteTodo(todo.text)}/> ))} diff --git a/src/TodoItem.js b/src/TodoItem.js index b52ad9d1a..3a28a18d7 100644 --- a/src/TodoItem.js +++ b/src/TodoItem.js @@ -3,13 +3,18 @@ import './TodoItem.css'; function TodoItem(props) { return (
  • - + V

    {props.text}

    - + X
    • From f80d8577cf7896344cc860b85cc4506d2e8abafb Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Mon, 3 Jul 2023 00:31:34 -0500 Subject: [PATCH 06/15] Clase 11 --- src/CompleteIcon.js | 12 ++++++++++++ src/DeleteIcon.js | 13 +++++++++++++ src/TodoIcon.js | 19 +++++++++++++++++++ src/TodoItem.js | 12 ++++++++---- src/check.svg | 7 +++++++ src/delete.svg | 9 +++++++++ 6 files changed, 68 insertions(+), 4 deletions(-) create mode 100644 src/CompleteIcon.js create mode 100644 src/DeleteIcon.js create mode 100644 src/TodoIcon.js create mode 100644 src/check.svg create mode 100644 src/delete.svg diff --git a/src/CompleteIcon.js b/src/CompleteIcon.js new file mode 100644 index 000000000..826ff4b8c --- /dev/null +++ b/src/CompleteIcon.js @@ -0,0 +1,12 @@ +import { TodoIcon } from "./TodoIcon" + +function CompleteIcon(){ + return ( + + ) +} + +export {CompleteIcon} \ No newline at end of file diff --git a/src/DeleteIcon.js b/src/DeleteIcon.js new file mode 100644 index 000000000..e871bf096 --- /dev/null +++ b/src/DeleteIcon.js @@ -0,0 +1,13 @@ +import { TodoIcon } from "./TodoIcon" + + +function DeleteIcon(){ + return ( + +) +} + +export {DeleteIcon} \ No newline at end of file diff --git a/src/TodoIcon.js b/src/TodoIcon.js new file mode 100644 index 000000000..51ffff034 --- /dev/null +++ b/src/TodoIcon.js @@ -0,0 +1,19 @@ +import {ReactComponent as CheckSVG} from "./check.svg" +import {ReactComponent as DeleteSVG} from "./delete.svg" + +const iconTypes ={ + "check": , + "delete": , +} + +function TodoIcon({type}){ + return( + + {iconTypes[type]} + + ) +} + +export {TodoIcon} \ No newline at end of file diff --git a/src/TodoItem.js b/src/TodoItem.js index 3a28a18d7..325d8f887 100644 --- a/src/TodoItem.js +++ b/src/TodoItem.js @@ -1,22 +1,26 @@ import './TodoItem.css'; +import {CompleteIcon} from "./CompleteIcon" +import {DeleteIcon} from "./DeleteIcon" function TodoItem(props) { return (
  • - + {/* V - + */}

    {props.text}

    - + {/* X - + */}
    • ); } diff --git a/src/check.svg b/src/check.svg new file mode 100644 index 000000000..461b67247 --- /dev/null +++ b/src/check.svg @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/src/delete.svg b/src/delete.svg new file mode 100644 index 000000000..a0a46f135 --- /dev/null +++ b/src/delete.svg @@ -0,0 +1,9 @@ + + + \ No newline at end of file From 1d445ece864d6c86c4bcfe02178f405ef921bb6b Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Tue, 4 Jul 2023 00:11:11 -0500 Subject: [PATCH 07/15] Clase 13 --- src/App.js | 40 ++++++++++++++++++++++++++++++---------- src/CompleteIcon.js | 5 +++-- src/DeleteIcon.js | 5 +++-- src/TodoIcon.css | 42 ++++++++++++++++++++++++++++++++++++++++++ src/TodoIcon.js | 12 +++++++----- src/TodoItem.css | 29 ----------------------------- src/TodoItem.js | 20 +++++++------------- 7 files changed, 92 insertions(+), 61 deletions(-) create mode 100644 src/TodoIcon.css diff --git a/src/App.js b/src/App.js index 4d7a50024..a34be0e0c 100644 --- a/src/App.js +++ b/src/App.js @@ -7,17 +7,32 @@ import {CreateTodoButton} from "./CreateTodoButton" import { TodoItem } from './TodoItem'; import React, { useState } from 'react'; -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} +// 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() { - const [todos, setTodos] = useState(defaultTodos); + const localStorageTodos = localStorage.getItem('TODOS_V1') + + let parsedTodos; + + if (!localStorageTodos) { + localStorage.setItem("TODOS_V1" , JSON.stringify([])) + parsedTodos=[] + }else{ + parsedTodos = JSON.parse(localStorageTodos) + } + + // let parsedTodos = JSON.parse(localStorageTodos) + + const [todos, setTodos] = useState(parsedTodos); const [searchValue , setSearchValue ] = useState("") const completedTodos = todos.filter(todo => !!todo.completed).length; @@ -31,18 +46,23 @@ function App() { } ) + const saveTodos = (newTodos) =>{ + localStorage.setItem("TODOS_V1", JSON.stringify(newTodos)) + setTodos(newTodos) + } + const completeTodo = (text) => { const newTodos = [...todos] const todoIndex = newTodos.findIndex((todo) => todo.text === text) newTodos[todoIndex].completed = true - setTodos(newTodos) + saveTodos(newTodos) } const deleteTodo = (text) => { const newTodos = [...todos] const todoIndex = newTodos.findIndex((todo) => todo.text === text) newTodos.splice(todoIndex, 1) - setTodos(newTodos) + saveTodos(newTodos) } diff --git a/src/CompleteIcon.js b/src/CompleteIcon.js index 826ff4b8c..8564a48c6 100644 --- a/src/CompleteIcon.js +++ b/src/CompleteIcon.js @@ -1,10 +1,11 @@ import { TodoIcon } from "./TodoIcon" -function CompleteIcon(){ +function CompleteIcon({completed , onComplete}){ return ( ) } diff --git a/src/DeleteIcon.js b/src/DeleteIcon.js index e871bf096..ca967e9d5 100644 --- a/src/DeleteIcon.js +++ b/src/DeleteIcon.js @@ -1,11 +1,12 @@ import { TodoIcon } from "./TodoIcon" -function DeleteIcon(){ +function DeleteIcon({onDelete}){ return ( ) } diff --git a/src/TodoIcon.css b/src/TodoIcon.css new file mode 100644 index 000000000..44af5057b --- /dev/null +++ b/src/TodoIcon.css @@ -0,0 +1,42 @@ + + .Icon-container { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + height: 48px; + width: 48px; + font-size: 24px; + font-weight: bold; + /* background-color: #CCC; */ + } + + .Icon-container-check { + position: absolute; + left: 12px; + } + .Icon-container-check--active { + color: #4caf50; + } + + .Icon-container-delete { + position: absolute; + top: -24px; + right: 0; + } + .Icon-container-delete:hover { + color: red; + } + + .Icon-svg{ + width: 24px; + height: 24px; + } + + .Icon-container-delete:hover .Icon-svg { + fill: red; + } + + .Icon-container-check:hover .Icon-svg { + fill: green; + } \ No newline at end of file diff --git a/src/TodoIcon.js b/src/TodoIcon.js index 51ffff034..c16b1f362 100644 --- a/src/TodoIcon.js +++ b/src/TodoIcon.js @@ -1,17 +1,19 @@ import {ReactComponent as CheckSVG} from "./check.svg" import {ReactComponent as DeleteSVG} from "./delete.svg" +import "./TodoIcon.css" const iconTypes ={ - "check": , - "delete": , + "check": (color)=>, + "delete": (color)=>, } -function TodoIcon({type}){ +function TodoIcon({type , color, onClick}){ return( - {iconTypes[type]} + {iconTypes[type](color)} ) } diff --git a/src/TodoItem.css b/src/TodoItem.css index c72b134f6..9f605c89d 100644 --- a/src/TodoItem.css +++ b/src/TodoItem.css @@ -18,32 +18,3 @@ .TodoItem-p--complete { text-decoration: line-through; } - - .Icon { - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - height: 48px; - width: 48px; - font-size: 24px; - font-weight: bold; - /* background-color: #CCC; */ - } - - .Icon-check { - position: absolute; - left: 12px; - } - .Icon-check--active { - color: #4caf50; - } - - .Icon-delete { - position: absolute; - top: -24px; - right: 0; - } - .Icon-delete:hover { - color: red; - } \ No newline at end of file diff --git a/src/TodoItem.js b/src/TodoItem.js index 325d8f887..5f99cb2dd 100644 --- a/src/TodoItem.js +++ b/src/TodoItem.js @@ -5,22 +5,16 @@ import {DeleteIcon} from "./DeleteIcon" function TodoItem(props) { return (
  • - - {/* - V - */} +

    {props.text}

    - - {/* - X - */} +
    • ); } From 5d8b007a07dcadf11b1d28a321368f4c293031bf Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Tue, 4 Jul 2023 00:55:08 -0500 Subject: [PATCH 08/15] Clase 14 --- src/App.js | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/App.js b/src/App.js index a34be0e0c..c48dd5508 100644 --- a/src/App.js +++ b/src/App.js @@ -18,21 +18,30 @@ import React, { useState } from 'react'; // localStorage.setItem("TODOS_V1" , JSON.stringify(defaultTodos)) // localStorage.removeItem("TODOS_V1") -function App() { - const localStorageTodos = localStorage.getItem('TODOS_V1') +function useLocalStorage(itemName, initialValue) { + const localStorageItem = localStorage.getItem(itemName) - let parsedTodos; + let parsedItem; - if (!localStorageTodos) { - localStorage.setItem("TODOS_V1" , JSON.stringify([])) - parsedTodos=[] + if (!localStorageItem) { + localStorage.setItem(itemName , JSON.stringify(initialValue)) + parsedItem=initialValue }else{ - parsedTodos = JSON.parse(localStorageTodos) + parsedItem = JSON.parse(localStorageItem) } - // let parsedTodos = JSON.parse(localStorageTodos) + const [item, setItem] = useState(parsedItem); + + const saveItem = (newItem) =>{ + localStorage.setItem(itemName, JSON.stringify(newItem)) + setItem(newItem) + } + return [item , saveItem] +} - const [todos, setTodos] = useState(parsedTodos); +function App() { + // let parsedTodos = JSON.parse(localStorageTodos) + const [todos, saveTodos] = useLocalStorage("TODOS_V1", []); const [searchValue , setSearchValue ] = useState("") const completedTodos = todos.filter(todo => !!todo.completed).length; @@ -45,12 +54,7 @@ function App() { return todoText.includes(searchText) } ) - - const saveTodos = (newTodos) =>{ - localStorage.setItem("TODOS_V1", JSON.stringify(newTodos)) - setTodos(newTodos) - } - + const completeTodo = (text) => { const newTodos = [...todos] const todoIndex = newTodos.findIndex((todo) => todo.text === text) From ff56b6011ef218401de377dd9dcaeef5ae427573 Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Wed, 5 Jul 2023 00:31:51 -0500 Subject: [PATCH 09/15] clase 17, cambo de organizacion --- src/App.css | 38 ------------ src/App/AppUi.js | 44 +++++++++++++ src/{App.js => App/index.js} | 58 +++--------------- src/App/useLocalStorage.js | 24 ++++++++ .../CreateTodoButton.css | 0 .../index.js} | 0 src/{ => TodoCounter}/TodoCounter.css | 0 src/{TodoCounter.js => TodoCounter/index.js} | 0 src/{ => TodoIcon}/CompleteIcon.js | 2 +- src/{ => TodoIcon}/DeleteIcon.js | 2 +- src/{ => TodoIcon}/TodoIcon.css | 0 src/{ => TodoIcon}/check.svg | 0 src/{ => TodoIcon}/delete.svg | 0 src/{TodoIcon.js => TodoIcon/index.js} | 0 src/{ => TodoItem}/TodoItem.css | 0 src/{TodoItem.js => TodoItem/index.js} | 4 +- src/{ => TodoList}/TodoList.css | 0 src/{TodoList.js => TodoList/index.js} | 0 src/{ => TodoSearch}/TodoSearch.css | 0 src/{TodoSearch.js => TodoSearch/index.js} | 0 src/platzi.webp | Bin 1008 -> 0 bytes 21 files changed, 82 insertions(+), 90 deletions(-) delete mode 100644 src/App.css create mode 100644 src/App/AppUi.js rename src/{App.js => App/index.js} (52%) create mode 100644 src/App/useLocalStorage.js rename src/{ => CreateTodoButton}/CreateTodoButton.css (100%) rename src/{CreateTodoButton.js => CreateTodoButton/index.js} (100%) rename src/{ => TodoCounter}/TodoCounter.css (100%) rename src/{TodoCounter.js => TodoCounter/index.js} (100%) rename src/{ => TodoIcon}/CompleteIcon.js (85%) rename src/{ => TodoIcon}/DeleteIcon.js (81%) rename src/{ => TodoIcon}/TodoIcon.css (100%) rename src/{ => TodoIcon}/check.svg (100%) rename src/{ => TodoIcon}/delete.svg (100%) rename src/{TodoIcon.js => TodoIcon/index.js} (100%) rename src/{ => TodoItem}/TodoItem.css (100%) rename src/{TodoItem.js => TodoItem/index.js} (81%) rename src/{ => TodoList}/TodoList.css (100%) rename src/{TodoList.js => TodoList/index.js} (100%) rename src/{ => TodoSearch}/TodoSearch.css (100%) rename src/{TodoSearch.js => TodoSearch/index.js} (100%) delete mode 100644 src/platzi.webp diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 4661df052..000000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.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; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App/AppUi.js b/src/App/AppUi.js new file mode 100644 index 000000000..02db79696 --- /dev/null +++ b/src/App/AppUi.js @@ -0,0 +1,44 @@ +import { TodoCounter } from '../TodoCounter'; +import { TodoSearch } from '../TodoSearch'; +import { TodoList } from '../TodoList'; +import { TodoItem } from '../TodoItem'; +import { CreateTodoButton } from '../CreateTodoButton'; + +function AppUI({ + completedTodos, + totalTodos, + searchValue, + setSearchValue, + searchedTodos, + completeTodo, + deleteTodo, +}) { + return ( + <> + + + + + {searchedTodos.map(todo => ( + completeTodo(todo.text)} + onDelete={() => deleteTodo(todo.text)} + /> + ))} + + + + + ); +} + +export { AppUI }; \ No newline at end of file diff --git a/src/App.js b/src/App/index.js similarity index 52% rename from src/App.js rename to src/App/index.js index c48dd5508..9b04a0bf7 100644 --- a/src/App.js +++ b/src/App/index.js @@ -1,11 +1,6 @@ -// import logo from './platzi.webp'; -// import './App.css'; -import {TodoCounter} from "./TodoCounter" -import {TodoSearch} from "./TodoSearch" -import {TodoList} from "./TodoList" -import {CreateTodoButton} from "./CreateTodoButton" -import { TodoItem } from './TodoItem'; import React, { useState } from 'react'; +import {useLocalStorage} from './useLocalStorage'; +import {AppUI} from './AppUi' // const defaultTodos = [ // {text :"cortar" , completed: true}, @@ -18,26 +13,6 @@ import React, { useState } from 'react'; // localStorage.setItem("TODOS_V1" , JSON.stringify(defaultTodos)) // localStorage.removeItem("TODOS_V1") -function useLocalStorage(itemName, initialValue) { - const localStorageItem = localStorage.getItem(itemName) - - let parsedItem; - - if (!localStorageItem) { - localStorage.setItem(itemName , JSON.stringify(initialValue)) - parsedItem=initialValue - }else{ - parsedItem = JSON.parse(localStorageItem) - } - - const [item, setItem] = useState(parsedItem); - - const saveItem = (newItem) =>{ - localStorage.setItem(itemName, JSON.stringify(newItem)) - setItem(newItem) - } - return [item , saveItem] -} function App() { // let parsedTodos = JSON.parse(localStorageTodos) @@ -68,29 +43,16 @@ function App() { newTodos.splice(todoIndex, 1) saveTodos(newTodos) } - - console.log("searchValue",searchValue) - return ( - <> - - - - - - {searchedTodos.map(todo => ( - completeTodo(todo.text)} onDelete={()=> deleteTodo(todo.text)}/> - ))} - - - - - - + ); } diff --git a/src/App/useLocalStorage.js b/src/App/useLocalStorage.js new file mode 100644 index 000000000..3d67016ae --- /dev/null +++ b/src/App/useLocalStorage.js @@ -0,0 +1,24 @@ +import {useState} from "react"; + +function useLocalStorage(itemName, initialValue) { + const localStorageItem = localStorage.getItem(itemName) + + let parsedItem; + + if (!localStorageItem) { + localStorage.setItem(itemName , JSON.stringify(initialValue)) + parsedItem=initialValue + }else{ + parsedItem = JSON.parse(localStorageItem) + } + + const [item, setItem] = useState(parsedItem); + + const saveItem = (newItem) =>{ + localStorage.setItem(itemName, JSON.stringify(newItem)) + setItem(newItem) + } + return [item , saveItem] + } + + export {useLocalStorage} \ No newline at end of file diff --git a/src/CreateTodoButton.css b/src/CreateTodoButton/CreateTodoButton.css similarity index 100% rename from src/CreateTodoButton.css rename to src/CreateTodoButton/CreateTodoButton.css diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton/index.js similarity index 100% rename from src/CreateTodoButton.js rename to src/CreateTodoButton/index.js diff --git a/src/TodoCounter.css b/src/TodoCounter/TodoCounter.css similarity index 100% rename from src/TodoCounter.css rename to src/TodoCounter/TodoCounter.css diff --git a/src/TodoCounter.js b/src/TodoCounter/index.js similarity index 100% rename from src/TodoCounter.js rename to src/TodoCounter/index.js diff --git a/src/CompleteIcon.js b/src/TodoIcon/CompleteIcon.js similarity index 85% rename from src/CompleteIcon.js rename to src/TodoIcon/CompleteIcon.js index 8564a48c6..955312e06 100644 --- a/src/CompleteIcon.js +++ b/src/TodoIcon/CompleteIcon.js @@ -1,4 +1,4 @@ -import { TodoIcon } from "./TodoIcon" +import { TodoIcon } from "./index" function CompleteIcon({completed , onComplete}){ return ( diff --git a/src/DeleteIcon.js b/src/TodoIcon/DeleteIcon.js similarity index 81% rename from src/DeleteIcon.js rename to src/TodoIcon/DeleteIcon.js index ca967e9d5..7c6d56b95 100644 --- a/src/DeleteIcon.js +++ b/src/TodoIcon/DeleteIcon.js @@ -1,4 +1,4 @@ -import { TodoIcon } from "./TodoIcon" +import { TodoIcon } from "./index" function DeleteIcon({onDelete}){ diff --git a/src/TodoIcon.css b/src/TodoIcon/TodoIcon.css similarity index 100% rename from src/TodoIcon.css rename to src/TodoIcon/TodoIcon.css diff --git a/src/check.svg b/src/TodoIcon/check.svg similarity index 100% rename from src/check.svg rename to src/TodoIcon/check.svg diff --git a/src/delete.svg b/src/TodoIcon/delete.svg similarity index 100% rename from src/delete.svg rename to src/TodoIcon/delete.svg diff --git a/src/TodoIcon.js b/src/TodoIcon/index.js similarity index 100% rename from src/TodoIcon.js rename to src/TodoIcon/index.js diff --git a/src/TodoItem.css b/src/TodoItem/TodoItem.css similarity index 100% rename from src/TodoItem.css rename to src/TodoItem/TodoItem.css diff --git a/src/TodoItem.js b/src/TodoItem/index.js similarity index 81% rename from src/TodoItem.js rename to src/TodoItem/index.js index 5f99cb2dd..656845023 100644 --- a/src/TodoItem.js +++ b/src/TodoItem/index.js @@ -1,6 +1,6 @@ import './TodoItem.css'; -import {CompleteIcon} from "./CompleteIcon" -import {DeleteIcon} from "./DeleteIcon" +import {CompleteIcon} from "../TodoIcon/CompleteIcon" +import {DeleteIcon} from "../TodoIcon/DeleteIcon" function TodoItem(props) { return ( diff --git a/src/TodoList.css b/src/TodoList/TodoList.css similarity index 100% rename from src/TodoList.css rename to src/TodoList/TodoList.css diff --git a/src/TodoList.js b/src/TodoList/index.js similarity index 100% rename from src/TodoList.js rename to src/TodoList/index.js diff --git a/src/TodoSearch.css b/src/TodoSearch/TodoSearch.css similarity index 100% rename from src/TodoSearch.css rename to src/TodoSearch/TodoSearch.css diff --git a/src/TodoSearch.js b/src/TodoSearch/index.js similarity index 100% rename from src/TodoSearch.js rename to src/TodoSearch/index.js diff --git a/src/platzi.webp b/src/platzi.webp deleted file mode 100644 index a84536756882549cc895dade9ebe7295c17a9a2e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1008 zcmVaj*r`-jiplutb{28Zb zBa^nNf4$i~0zruWpTz}|Ix>k+^{+I?OGQ4y6sc8 zZPU<1srJ|mlTFKG8$``RJ7#k&ji`HLsUfuj@;2G%KSTj~9O%2xT@bK`Zl-?K3Wc{b zZJbtUyyFbh2O;v%6Mj}iA@i8Xu4;tP8>WjkK`1?J*jhOo31d1Gau9MKc)B^&YhH-~ zUm=IFDToOV6E6NAj0hEe6hl6uFeMDeWQD`!@hqi0?w38e5~gK$eV0%Ex@<+)6a8Jc zm-5x$XWE<25cbcq#2;H-=?xHhh2Z!u%lxf-k5$&P2EnP6!k|WLrUZgSgHCi1bs`I% zBL*JDtk4NVy_ouJFmP#8+ZG^@DdfsF2wEa(N)YtK5ilZPRIFKgLcpoM;u-+jf?v|o z@WQKGI-8^6CO5q1h0i<)f!bxyL{tj+)bYTfZc!8(6od*g(4ZpF3^}r(B*@^ESYT56 z8kqz|=?Bgvkm*b3kpni3U*^LU(5dvPxAnhPyBYN+0`S2rD)ykJh>oSoPDEg)PD#OD)Re1|jdj~)+?0dT z)U&S}ueo_iz4i6>rly<-Y|qV02<%8rIWX9TnyXM4GdE#18lGDgTOuZCyD&i;hzQGnqfqk`GEt>mk zqtL1j)qTkl*!@s;3_wtJT z%gb^vug$%@K>zY8-OEdLFR$0Tyy(`yymI&Q^4+Uz;9gw__v&i6SC_=Sx-Rb3#c{8$ zkb8BR+^cKlTwSm>dskP@y}ESn)%EkPE~0yNCB3W5>1SP2ri(hJy0G5W)%C6}v3GTy eovVxOU0reK>asgm*WR?}>fZ(M>~|G@3H}2yCHam3 From 991ed9f8c3865505d5300d151140147df2f907cb Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Thu, 6 Jul 2023 00:00:19 -0500 Subject: [PATCH 10/15] clase 20 --- src/App/AppUi.js | 5 +++++ src/App/index.js | 18 +++++++++++++++-- src/App/useLocalStorage.js | 41 +++++++++++++++++++++++++------------- 3 files changed, 48 insertions(+), 16 deletions(-) diff --git a/src/App/AppUi.js b/src/App/AppUi.js index 02db79696..ba41ccc90 100644 --- a/src/App/AppUi.js +++ b/src/App/AppUi.js @@ -12,6 +12,8 @@ function AppUI({ searchedTodos, completeTodo, deleteTodo, + loading, + error }) { return ( <> @@ -25,6 +27,9 @@ function AppUI({ /> + {loading &&

    Estamos cargando ...

    } + {error &&

    Error al traer los TODOs

    } + {(!loading && searchedTodos.length === 0) &&

    Crea tu primer TODO!

    } {searchedTodos.map(todo => ( !!todo.completed).length; const totalTodos = todos.length; + // console.log("log 1") + + // // useEffect(()=> { + // // console.log("log 2") + // // }) + // useEffect(()=> { + // console.log("log 2") + // }, [totalTodos]) + + // console.log("log 3") + + const searchedTodos = todos.filter( (todo) => { const todoText =todo.text.toLowerCase(); @@ -46,6 +58,8 @@ function App() { console.log("searchValue",searchValue) return ( { + 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] + return {item , saveItem, loading, error} } export {useLocalStorage} \ No newline at end of file From 19eed738b8c0316fe5eb1cab211f7b952a75aace Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Sat, 8 Jul 2023 01:49:41 -0500 Subject: [PATCH 11/15] se presentan errores --- src/App/AppUi.js | 71 ++++++------ src/App/index.js | 59 +--------- src/EmptyTodos/index.js | 12 ++ src/TodoContext/index.js | 115 ++++++++++++++++++++ src/{App => TodoContext}/useLocalStorage.js | 2 +- src/TodosError/index.js | 12 ++ src/TodosLoading/TodosLoading.css | 59 ++++++++++ src/TodosLoading/index.js | 16 +++ 8 files changed, 259 insertions(+), 87 deletions(-) create mode 100644 src/EmptyTodos/index.js create mode 100644 src/TodoContext/index.js rename src/{App => TodoContext}/useLocalStorage.js (98%) create mode 100644 src/TodosError/index.js create mode 100644 src/TodosLoading/TodosLoading.css create mode 100644 src/TodosLoading/index.js diff --git a/src/App/AppUi.js b/src/App/AppUi.js index ba41ccc90..085a98d11 100644 --- a/src/App/AppUi.js +++ b/src/App/AppUi.js @@ -3,43 +3,48 @@ 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 { TodoContext } from '../TodoContext'; -function AppUI({ - completedTodos, - totalTodos, - searchValue, - setSearchValue, - searchedTodos, - completeTodo, - deleteTodo, - loading, - error -}) { + +function AppUI() { return ( <> - - + + - - {loading &&

    Estamos cargando ...

    } - {error &&

    Error al traer los TODOs

    } - {(!loading && searchedTodos.length === 0) &&

    Crea tu primer TODO!

    } - {searchedTodos.map(todo => ( - completeTodo(todo.text)} - onDelete={() => deleteTodo(todo.text)} - /> - ))} -     + + {({ + searchedTodos, + completeTodo, + deleteTodo, + loading, + error + })=> { + + {loading && + <> + + + + + } + {error && } + {(!loading && searchedTodos.length === 0) && } + {searchedTodos.map(todo => ( + completeTodo(todo.text)} + onDelete={() => deleteTodo(todo.text)} + /> + ))} + + }} + diff --git a/src/App/index.js b/src/App/index.js index fe2623c24..5c30ccf98 100644 --- a/src/App/index.js +++ b/src/App/index.js @@ -1,6 +1,7 @@ -import React, { useEffect, useState } from 'react'; -import {useLocalStorage} from './useLocalStorage'; +import React from 'react'; +// import {useLocalStorage} from './useLocalStorage'; import {AppUI} from './AppUi' +import { TodoProvider } from '../TodoContext'; // const defaultTodos = [ // {text :"cortar" , completed: true}, @@ -15,58 +16,10 @@ import {AppUI} from './AppUi' function App() { - // let parsedTodos = JSON.parse(localStorageTodos) - const {item: todos, saveItem:saveTodos, loading, error} = useLocalStorage("TODOS_V1", []); - const [searchValue , setSearchValue ] = useState("") - - const completedTodos = todos.filter(todo => !!todo.completed).length; - const totalTodos = todos.length; - - // console.log("log 1") - - // // useEffect(()=> { - // // console.log("log 2") - // // }) - // useEffect(()=> { - // console.log("log 2") - // }, [totalTodos]) - - // console.log("log 3") - - - 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) - } - console.log("searchValue",searchValue) return ( - + + + ); } diff --git a/src/EmptyTodos/index.js b/src/EmptyTodos/index.js new file mode 100644 index 000000000..4ee8585c8 --- /dev/null +++ b/src/EmptyTodos/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +// import './EmptyTodos.css'; + +function EmptyTodos() { + + + return ( +

    Crea tu primer TODO!

    + ); +} + +export { EmptyTodos }; \ No newline at end of file diff --git a/src/TodoContext/index.js b/src/TodoContext/index.js new file mode 100644 index 000000000..782e545ae --- /dev/null +++ b/src/TodoContext/index.js @@ -0,0 +1,115 @@ +// import React, { createContext,useState } from "react"; +// import { useLocalStorage } from "./useLocalStorage"; + +// const TodoContext =createContext(); + +// function TodoProvider({children}) { +// const {item: todos, saveItem:saveTodos, loading, error} = useLocalStorage("TODOS_V1", []); +// const [searchValue , setSearchValue ] = useState("") + +// 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) +// } +// console.log("searchValue",searchValue) +// return ( +// +// {children} +// +// ) +// } + +// export { TodoContext ,TodoProvider} +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 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 ( + + {children} + + ); +} + +export { TodoContext, TodoProvider }; \ No newline at end of file diff --git a/src/App/useLocalStorage.js b/src/TodoContext/useLocalStorage.js similarity index 98% rename from src/App/useLocalStorage.js rename to src/TodoContext/useLocalStorage.js index 9cb1ce909..3fad27e4c 100644 --- a/src/App/useLocalStorage.js +++ b/src/TodoContext/useLocalStorage.js @@ -24,7 +24,7 @@ function useLocalStorage(itemName, initialValue) { setError(true) } }, 2000) - },[]) + } , []) const saveItem = (newItem) =>{ diff --git a/src/TodosError/index.js b/src/TodosError/index.js new file mode 100644 index 000000000..44d8fd27c --- /dev/null +++ b/src/TodosError/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +// import './TodosError.css'; + +function TodosError() { + + + return ( +

    Error...

    + ); +} + +export { TodosError }; \ No newline at end of file diff --git a/src/TodosLoading/TodosLoading.css b/src/TodosLoading/TodosLoading.css new file mode 100644 index 000000000..ee8b60ce4 --- /dev/null +++ b/src/TodosLoading/TodosLoading.css @@ -0,0 +1,59 @@ +.LoadingTodo-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-top: 24px; + box-shadow: 0px 5px 50px rgba(32, 35, 41, 0.15); + border-radius: 10px; + padding: 12px 0; + } + + .LoadingTodo-text { + margin: 24px 0 24px 24px; + width: calc(100% - 120px); + font-size: 18px; + line-height: 24px; + font-weight: 400; + } + + .LoadingTodo-completeIcon, + .LoadingTodo-deleteIcon { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50px; + height: 48px; + width: 48px; + } + .LoadingTodo-completeIcon { + position: absolute; + left: 12px; + } + .LoadingTodo-deleteIcon { + position: absolute; + top: -24px; + right: 0; + } + + + .LoadingTodo-container, + .LoadingTodo-completeIcon, + .LoadingTodo-deleteIcon { + background: linear-gradient(90deg, rgba(250,250,250,1), rgb(200, 199, 199)); + background-size: 400% 400%; + animation: loadingAnimation 3s ease-in-out infinite; + } + + @keyframes loadingAnimation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } \ No newline at end of file diff --git a/src/TodosLoading/index.js b/src/TodosLoading/index.js new file mode 100644 index 000000000..f962d222c --- /dev/null +++ b/src/TodosLoading/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import './TodosLoading.css'; + +function TodosLoading() { + + +return ( +
    + +

    + +
    + ); +} + +export { TodosLoading }; \ No newline at end of file From 0f8ac6fb6911faa0c690354f82d6bf7761490d4b Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Sat, 8 Jul 2023 16:39:56 -0500 Subject: [PATCH 12/15] clase 23 --- src/App/AppUi.js | 71 ++++++++++++++++++++-------------------- src/App/index.js | 1 - src/TodoCounter/index.js | 25 +++++++++----- src/TodoSearch/index.js | 18 +++++----- 4 files changed, 60 insertions(+), 55 deletions(-) diff --git a/src/App/AppUi.js b/src/App/AppUi.js index 085a98d11..46f5f7983 100644 --- a/src/App/AppUi.js +++ b/src/App/AppUi.js @@ -1,50 +1,49 @@ +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 {TodosLoading} from '../TodosLoading'; -import {TodosError} from '../TodosError'; -import {EmptyTodos} from '../EmptyTodos'; import { TodoContext } from '../TodoContext'; - function AppUI() { + const { + loading, + error, + searchedTodos, + completeTodo, + deleteTodo, + } = React.useContext(TodoContext); + return ( <> - - + + + + + {loading && ( + <> + + + + + )} + {error && } + {(!loading && searchedTodos.length === 0) && } - - {({ - searchedTodos, - completeTodo, - deleteTodo, - loading, - error - })=> { - - {loading && - <> - - - - - } - {error && } - {(!loading && searchedTodos.length === 0) && } - {searchedTodos.map(todo => ( - completeTodo(todo.text)} - onDelete={() => deleteTodo(todo.text)} - /> - ))} - - }} - + {searchedTodos.map(todo => ( + completeTodo(todo.text)} + onDelete={() => deleteTodo(todo.text)} + /> + ))} + diff --git a/src/App/index.js b/src/App/index.js index 5c30ccf98..c6f0453e8 100644 --- a/src/App/index.js +++ b/src/App/index.js @@ -1,5 +1,4 @@ import React from 'react'; -// import {useLocalStorage} from './useLocalStorage'; import {AppUI} from './AppUi' import { TodoProvider } from '../TodoContext'; diff --git a/src/TodoCounter/index.js b/src/TodoCounter/index.js index bcda5a793..f3b73f297 100644 --- a/src/TodoCounter/index.js +++ b/src/TodoCounter/index.js @@ -1,11 +1,18 @@ -import './TodoCounter.css' +import React from 'react'; +import { TodoContext } from '../TodoContext'; +import './TodoCounter.css'; -function TodoCounter({total, completed}) { - return ( -

    - Has completado {completed} de {total} TODOs -

    - ); - } +function TodoCounter() { + const { + completedTodos, + totalTodos, + } = React.useContext(TodoContext); + + return ( +

    + Has completado {completedTodos} de {totalTodos} TODOs +

    + ); +} -export {TodoCounter}; \ No newline at end of file +export { TodoCounter }; \ No newline at end of file diff --git a/src/TodoSearch/index.js b/src/TodoSearch/index.js index ac3c038e2..c4a9f54df 100644 --- a/src/TodoSearch/index.js +++ b/src/TodoSearch/index.js @@ -1,20 +1,20 @@ import React from 'react'; +import { TodoContext } from '../TodoContext'; import './TodoSearch.css'; -function TodoSearch({searchValue, setSearchValue}) { - - +function TodoSearch() { + const { + searchValue, + setSearchValue, + } = React.useContext(TodoContext); + return ( { - setSearchValue(event.target.value) - // console.log("escribiuste ") - // console.log(event) - // console.log(event.target) - // console.log(event.target.value) + onChange={(event) => { + setSearchValue(event.target.value); }} /> ); From 5fdd8353f07108a7d0e537c0c3807f30805f9295 Mon Sep 17 00:00:00 2001 From: Santiago Millan <104397283+SantiagoNivelics@users.noreply.github.com> Date: Sat, 8 Jul 2023 18:13:57 -0500 Subject: [PATCH 13/15] clase 25 --- public/index.html | 1 + src/App/AppUi.js | 13 +++++- src/CreateTodoButton/CreateTodoButton.css | 49 +++++++++++----------- src/CreateTodoButton/index.js | 51 +++++++++++++++-------- src/Modal/Modal.css | 12 ++++++ src/Modal/index.js | 14 +++++++ src/TodoContext/index.js | 4 ++ src/TodoForm/index.js | 0 8 files changed, 102 insertions(+), 42 deletions(-) create mode 100644 src/Modal/Modal.css create mode 100644 src/Modal/index.js create mode 100644 src/TodoForm/index.js diff --git a/public/index.html b/public/index.html index e5b37b15c..4094d1912 100644 --- a/public/index.html +++ b/public/index.html @@ -29,6 +29,7 @@
    +