Solution: Jon Garcia y Sebastian Burpbacher

.eslintrc.js

@@ -49,7 +49,12 @@ module.exports = {
     },
   ],
   rules: {
-    "prettier/prettier": "error",
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+      },
+    ],
     "react/jsx-filename-extension": "off",
     "import/prefer-default-export": "off",
     "prefer-destructuring": "off",

package.json

@@ -19,6 +19,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-innertext": "^1.1.5",
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
@@ -56,7 +57,7 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^4.1.1",
-    "jest": "^26.6.0",
+    "jest": "^26.6.3",
     "prettier": "^2.2.1",
     "typescript": "^4.2.4"
   },

public/index.html

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link href="%PUBLIC_URL%/styles.css" rel="stylesheet" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,15 +1,154 @@
-import React from "react";
-
-function App() {
-  return (
-    <main className="container mt-5">
-      <section className="row">
-        <div className="col col-12">
-          <h1>Hola mundo</h1>
-        </div>
-      </section>
-    </main>
-  );
+import React, { Component } from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+import Home from "./components/pages/Home";
+import Active from "./components/pages/Active";
+import Completed from "./components/pages/Complete";
+// import Todo from "./components/Todo";
+
+import "./_App.scss";
+
+const LOCAL_STORAGE_KEY = "react-sc-state";
+
+function loadLocalStorage() {
+  const json = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+  const state = JSON.parse(json);
+
+  if (!state) {
+    return {
+      todos: [],
+    };
+  }
+
+  return state;
 }
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: [],
+    };
+    this.newTodo = this.newTodo.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleSelected = this.handleSelected.bind(this);
+    this.clear = this.clear.bind(this);
+  }
+
+  componentDidMount() {
+    const prevState = loadLocalStorage();
+
+    this.setState({
+      todos: prevState.todos,
+    });
+  }
+
+  componentDidUpdate() {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.state));
+  }
 
+  handleSelected(itemId) {
+    const { todos } = this.state;
+    const bolTodo = todos.map((todo) => {
+      if (todo.id === itemId) {
+        // eslint-disable-next-line no-param-reassign
+        return { ...todo, selected: !todo.selected };
+      }
+      return todo;
+    });
+    this.setState({
+      todos: bolTodo,
+    });
+  }
+
+  handleDelete(itemId) {
+    const { todos } = this.state;
+    const notDelete = todos.filter((el) => el.id !== itemId);
+    this.setState({
+      todos: notDelete,
+    });
+  }
+
+  submitNewTitle = (newTitle, id) => {
+    const { todos } = this.state;
+
+    this.setState({
+      todos: todos.map((todo) => {
+        if (todo.id === id) {
+          // eslint-disable-next-line no-param-reassign
+          todo.title = newTitle;
+        }
+        return todo;
+      }),
+    });
+  };
+
+  newTodo(item) {
+    const { todos } = this.state;
+
+    this.setState({
+      todos: [...todos, item],
+    });
+  }
+
+  clear() {
+    const { todos } = this.state;
+    const cleared = todos.filter((item) => item.selected !== true);
+    this.setState({
+      todos: cleared,
+    });
+  }
+
+  render() {
+    const { todos } = this.state;
+
+    return (
+      <BrowserRouter>
+        <Route
+          exact
+          path="/"
+          render={(routeProps) => (
+            <Home
+              clear={this.clear}
+              submitNewTitle={this.submitNewTitle}
+              todos={todos}
+              newTodo={this.newTodo}
+              handleDelete={this.handleDelete}
+              handleSelected={this.handleSelected}
+              {...routeProps}
+            />
+          )}
+        />
+        <Route
+          exact
+          path="/active"
+          render={(routeProps) => (
+            <Active
+              submitNewTitle={this.submitNewTitle}
+              handleDelete={this.handleDelete}
+              handleSelected={this.handleSelected}
+              newTodo={this.newTodo}
+              todos={todos.filter((item) => item.selected === false)}
+              {...routeProps}
+            />
+          )}
+        />
+        <Route
+          exact
+          path="/completed"
+          render={(routeProps) => (
+            <Completed
+              clear={this.clear}
+              submitNewTitle={this.submitNewTitle}
+              handleDelete={this.handleDelete}
+              handleSelected={this.handleSelected}
+              newTodo={this.newTodo}
+              todos={todos.filter((item) => item.selected === true)}
+              {...routeProps}
+            />
+          )}
+        />
+      </BrowserRouter>
+    );
+  }
+}
 export default App;

src/_App.scss

@@ -0,0 +1,40 @@
+// @use "./global.scss" as global;
+
+.background_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+}
+.parent_container {
+  display: flex;
+  position: fixed;
+  background-image: linear-gradient(
+    20deg,
+    rgb(13, 13, 14),
+    rgb(38, 44, 70),
+    rgb(42, 79, 134),
+    rgb(144, 174, 207),
+    rgba(175, 194, 207, 0.8),
+    rgba(238, 242, 247, 0.3)
+  );
+  top: 5%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 70%;
+  width: 40%;
+  flex-wrap: wrap;
+  gap: 25px;
+  border-radius: 10px;
+}
+h1 {
+  height: 80px;
+  width: 100%;
+  letter-spacing: 10px;
+}
+
+Link:hover {
+  color: red;
+}

src/components/Button/Button.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./_Button.scss";
+// import { Link } from "react-router-dom";
+
+const Checkbox = ({ ...newers }) => {
+  return <input className="check" type="checkbox" {...newers} />;
+};
+
+function Button({ ...newers }) {
+  return <input className="but" type="button" {...newers} />;
+}
+function ClearBut({ ...newers }) {
+  return <input className="butClear" type="button" {...newers} />;
+}
+export { Button, Checkbox, ClearBut };

src/components/Button/_Button.scss

@@ -0,0 +1,18 @@
+@use "../../global.scss" as global;
+
+.check {
+  max-width: 20px;
+  margin-right: 20px;
+}
+
+.but {
+  position: absolute;
+  max-width: 20px;
+  max-height: 20px;
+  right: 100px;
+}
+
+.butClear {
+  height: 20px;
+  width: 20px;
+}

src/components/Button/index.js

@@ -0,0 +1 @@
+export { default } from "./Button";

src/components/Footer/Footer.js

@@ -0,0 +1,24 @@
+import React from "react";
+import "./footer.scss";
+import { Link } from "react-router-dom";
+import { ClearBut } from "../Button/Button";
+
+function Footer({ clear }) {
+  return (
+    <footer className="todo_footer">
+      <h6>5 items left</h6>
+      <Link to="/" className="nav_links">
+        <h6>All</h6>
+      </Link>
+      <Link to="/active" className="nav_links">
+        <h6>Active</h6>
+      </Link>
+      <Link to="/completed" className="nav_links">
+        <h6>Completed</h6>
+      </Link>
+      <ClearBut onClick={clear} />
+    </footer>
+  );
+}
+
+export default Footer;

src/components/Footer/footer.scss

@@ -0,0 +1,16 @@
+.todo_footer {
+  display: flex;
+  flex-direction: row;
+  color: white;
+}
+
+h6 {
+  margin: 0 25px 0 25px;
+}
+
+.nav_links {
+  color: white;
+}
+.nav_links:hover {
+  text-decoration: none;
+}

src/components/Footer/index.js

@@ -0,0 +1 @@
+export { default } from "./Footer";