From 038e005bc8975e21e4bac587aeb651ca13eaab29 Mon Sep 17 00:00:00 2001 From: Sandro444 Date: Tue, 16 Mar 2021 10:34:13 +0400 Subject: [PATCH] feat/imporve-code-structure --- App.js | 45 +- package-lock.json | 3044 ++++++++++--------- package.json | 2 +- src/components/AddTodo.js | 33 + src/components/Todo.js | 39 - src/components/{TodoList.js => TodoItem.js} | 12 +- 6 files changed, 1695 insertions(+), 1480 deletions(-) create mode 100644 src/components/AddTodo.js delete mode 100644 src/components/Todo.js rename src/components/{TodoList.js => TodoItem.js} (89%) diff --git a/App.js b/App.js index 5f31599..807ba3f 100644 --- a/App.js +++ b/App.js @@ -5,18 +5,15 @@ import { TextInput, View, Button, - ScrollView + ScrollView, } from "react-native"; import AppBar from "./src/components/AppBar"; -import Todo from "./src/components/Todo"; -import TodoList from "./src/components/TodoList"; +import AddTodo from "./src/components/AddTodo"; +import TodoItem from "./src/components/TodoItem"; export default function App() { const [title, setTitle] = useState(""); - // iniitalize empty object todo - const [todo, setTodo] = useState({}); - // Initalize empty array to store todos const [todos, setTodos] = useState([]); @@ -31,11 +28,11 @@ export default function App() { }; // function to mark todo as checked or unchecked - const checkTodo = id => { + const checkTodo = (id) => { // loop through todo list and look for the the todo that matches the given id param // update the state using setTodos function setTodos( - todos.map(todo => { + todos.map((todo) => { if (todo.key === id) { todo.isChecked = !todo.isChecked; } @@ -45,12 +42,14 @@ export default function App() { }; // function to delete todo from the todo list - const deleteTodo = id => { + const deleteTodo = (id) => { // loop through todo list and return todos that don't match the id // update the state using setTodos function - setTodos(todos.filter(todo => { - return todo.key !== id; - })); + setTodos( + todos.filter((todo) => { + return todo.key !== id; + }) + ); }; useEffect(() => { @@ -63,18 +62,18 @@ export default function App() { - setTitle(value)} + title={title} + setTitle={setTitle} style={styles.textbox} + addTodo={addTodo} /> -