assembler-institute · AntonioCopete · Sep 21, 2021 · Sep 21, 2021 · Sep 21, 2021 · Sep 22, 2021
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 package-lock.json
+src/
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/notes.txt b/notes.txt
@@ -0,0 +1 @@
+X element: &#10006;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.3",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -57,7 +57,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.3.5",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-markdown": "^2.0.1",
+    "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       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>
+    <title>To-do App - Antonio & Carlos</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,230 @@
 import React from "react";
+import Background from "./components/Background";
+import ChangeMode from "./components/ChangeMode";
+import TodoList from "./components/TodoList";
+import Menu from "./components/Menu";
+import Toast from "./components/Toast";
+import classNames from "classnames";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import "./App.scss";
 
-function App() {
-  return (
-    <main className="container mt-5">
-      <section className="row">
-        <div className="col col-12">
-          <h1>Hola mundo</h1>
-        </div>
-      </section>
-    </main>
-  );
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: JSON.parse(localStorage.getItem("todos"))
+        ? JSON.parse(localStorage.getItem("todos"))
+        : [],
+        isDarkMode: false,
+    };
+
+    this.handleAddTodo = this.handleAddTodo.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleCheckbox = this.handleCheckbox.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.handleEditName = this.handleEditName.bind(this);
+    this.handleClearAll = this.handleClearAll.bind(this);
+    this.handleTheme = this.handleTheme.bind(this)
+  }
+
+  handleTheme() {
+    let theme = !this.state.isDarkMode
+    this.setState({ isDarkMode: theme })
+  }
+
+  handleCheckbox(todo) {
+    let test = this.state.todos.find((stateTodo) => {
+      return stateTodo.id === todo.id;
+    });
+    test.completed = !test.completed;
+
+    let newTodoList = this.state.todos.map((prevTodo) => {
+      return prevTodo.id === todo.id ? test : prevTodo;
+    });
+    this.setState({ todos: newTodoList });
+  }
+
+  handleEdit(id) {
+    let test = this.state.todos.find((stateTodo) => {
+      return stateTodo.id === id;
+    });
+    test.isEditing = !test.isEditing;
+
+    let newTodoList = this.state.todos.map((prevTodo) => {
+      return prevTodo.id === id ? test : prevTodo;
+    });
+    this.setState({ todos: newTodoList });
+  }
+
+  handleEditName(id, newTask) {
+    let test = this.state.todos.find((stateTodo) => {
+      return stateTodo.id === id;
+    });
+    test.task = newTask;
+
+    let newTodoList = this.state.todos.map((prevTodo) => {
+      return prevTodo.id === id ? test : prevTodo;
+    });
+    this.setState({ todos: newTodoList });
+  }
+
+  handleDelete(id) {
+    const newTodoList = this.state.todos.filter((todo) => {
+      if (todo.id !== id) {
+        return todo;
+      }
+    });
+    this.setState({ todos: newTodoList });
+  }
+
+  handleEmptyInput() {
+    var toastLiveExample = document.getElementById("liveToast");
+    toastLiveExample.style.opacity = "1";
+    setTimeout(() => {
+      toastLiveExample.style.opacity = "0";
+    }, 2000);
+  }
+
+  handleAddTodo(event) {
+    let task;
+    if (event.key === "Enter") {
+      if (event.target.value == "") {
+        this.handleEmptyInput();
+        return;
+      }
+      task = event.target.value;
+      let newToDo = {
+        id: new Date().getTime(),
+        task: task,
+        completed: false,
+        isEditing: false,
+      };
+
+      this.setState((prevState) => ({
+        todos: [...prevState.todos, newToDo],
+      }));
+
+      event.target.value = null;
+    }
+  }
+
+  handleClearAll() {
+    let pendingTodos = this.state.todos.filter((completedTodo) => {
+      return completedTodo.completed == false;
+    });
+    this.setState({ todos: pendingTodos });
+  }
+
+  componentDidMount() {
+    let todos = JSON.parse(localStorage.getItem("todos"));
+    let isDarkMode = JSON.parse(localStorage.getItem("theme"));
+
+    if (todos != null) {
+      this.setState({todos});
+    }
+
+    if (isDarkMode != null) {
+      this.setState({isDarkMode});
+    }
+  }
+
+  componentDidUpdate() {
+    localStorage.setItem("todos", JSON.stringify(this.state.todos));
+    localStorage.setItem("theme", JSON.stringify(this.state.isDarkMode));
+  }
+
+  render() {
+    const { todos } = this.state;
+    const activeTodos = todos.filter((todo) => todo.completed === false);
+    const completedTodos = todos.filter((todo) => todo.completed === true);
+
+    const isDarkMode = this.state.isDarkMode
+    const inputClass = classNames({ "bg-dark text-light": isDarkMode })
+
+    return (
+      <>
+        <Router>
+          <Background
+            isDarkMode={this.state.isDarkMode}
+          />
+          <main className="container pt-5 main-width">
+            <section className="row">
+              <div className="col col-12">
+                <header className="d-flex justify-content-between align-items-center">
+                  <h1>TODO</h1>
+                  <ChangeMode
+                    isDarkMode={this.state.isDarkMode}
+                    handleTheme={this.handleTheme}
+                  />
+                </header>
+                <div>
+                  <input
+                    onKeyDown={this.handleAddTodo}
+                    id="inputNewToDo"
+                    type="text"
+                    className={`w-100 mt-4 new-todo shadow ${inputClass}`}
+                  ></input>
+                  {todos.length > 0 ? (
+                    <div className="list-container bg-white shadow">
+                      <Switch>
+                        <Route path="/active">
+                          <TodoList
+                            todos={activeTodos}
+                            isDarkMode={this.state.isDarkMode}
+                            handleCheckbox={this.handleCheckbox}
+                            handleEdit={this.handleEdit}
+                            handleEditName={this.handleEditName}
+                            handleDelete={this.handleDelete}
+                          />
+                        </Route>
+
+                        <Route path="/completed">
+                          <TodoList
+                            todos={completedTodos}
+                            isDarkMode={this.state.isDarkMode}
+                            handleCheckbox={this.handleCheckbox}
+                            handleEdit={this.handleEdit}
+                            handleEditName={this.handleEditName}
+                            handleDelete={this.handleDelete}
+                          />
+                        </Route>
+
+                        <Route path="/">
+                          <TodoList
+                            todos={todos}
+                            isDarkMode={this.state.isDarkMode}
+                            handleCheckbox={this.handleCheckbox}
+                            handleEdit={this.handleEdit}
+                            handleEditName={this.handleEditName}
+                            handleDelete={this.handleDelete}
+                          />
+                        </Route>
+                      </Switch>
+                      <Menu
+                        todos={todos}
+                        isDarkMode={this.state.isDarkMode}
+                        handleClearAll={this.handleClearAll}
+                      />
+                    </div>
+                  ) : (
+                    <div className="list-container bg-white shadow mt-4 p-2 ">
+                      <h4
+                        data-testid="no-todos"
+                        className="m-0 text-center text-danger"
+                      >
+                        Create a new task please
+                      </h4>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </section>
+            <Toast />
+          </main>
+        </Router>
+      </>
+    );
+  }
 }
 
 export default App;
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,22 @@
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
+
+body {
+    font-family: 'Dosis', sans-serif;
+    font-size: 1.5rem;
+}
+
+h1 {
+    font-family: 'Lato', sans-serif;
+    color: #FFFEFF;
+    letter-spacing: 1rem;
+    margin-bottom: 0;
+}
+
+.main-width {
+    max-width: 40rem;
+}
+
+.list-container {
+    border-radius: 5px;
+}
diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg