Solution: Jonathan Cedeño & Alfonso García

.gitignore

@@ -121,4 +121,5 @@ dist
 **/*.backup.*
 **/*.back.*
 
-node_modules
+node_modules
+package-lock.json

.prettierrc

@@ -15,5 +15,5 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "useTabs": false,
-  "endOfLine": "lf"
+  "endOfLine": "auto"
 }

package.json

@@ -16,6 +16,7 @@
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.5",
     "bootstrap": "^4.6.0",
+    "formik": "^2.2.7",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -25,7 +26,9 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "sass": "^1.32.11",
-    "web-vitals": "^1.1.1"
+    "uuid": "^8.3.2",
+    "web-vitals": "^1.1.1",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@babel/core": "^7.13.16",

src/App.js

@@ -1,15 +1,220 @@
-import React from "react";
-
-function App() {
-  return (
-    <main className="container mt-5">
-      <section className="row">
-        <div className="col col-12">
-          <h1>Hola mundo</h1>
+import React, { Component } from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+
+import Home from "./pages/Home";
+import Completed from "./pages/Completed";
+import Active from "./pages/Active";
+
+import Main from "./components/Main";
+import Header from "./components/Header";
+import NewTask from "./components/NewTask";
+import ListFooter from "./components/ListFooter";
+
+import * as api from "./api";
+
+const LOCAL_STORAGE_KEY = "react-tasks-state";
+
+function loadLocalStorageData() {
+  const prevItems = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+  if (!prevItems) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(prevItems);
+  } catch (error) {
+    return null;
+  }
+}
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tasks: [],
+      isDark: false,
+    };
+
+    this.saveNewTask = this.saveNewTask.bind(this);
+    this.toggleDarkLightMode = this.toggleDarkLightMode.bind(this);
+    this.handleDeleteTask = this.handleDeleteTask.bind(this);
+    this.handleClearCompleted = this.handleClearCompleted.bind(this);
+    this.handleUpdateTask = this.handleUpdateTask.bind(this);
+    this.handleToggleEditing = this.handleToggleEditing.bind(this);
+    this.handleToggleCheck = this.handleToggleCheck.bind(this);
+  }
+
+  componentDidMount() {
+    const prevItems = loadLocalStorageData();
+
+    if (!prevItems) {
+      api.getTasks().then((data) => {
+        this.setState({
+          tasks: data,
+        });
+      });
+      return;
+    }
+
+    this.setState({
+      tasks: prevItems.tasks,
+    });
+  }
+
+  componentDidUpdate() {
+    const { tasks } = this.state;
+
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({ tasks }));
+  }
+
+  handleDeleteTask(event, taskId) {
+    const { tasks } = this.state;
+
+    const updatedTasks = tasks.filter((task) => task.id !== taskId);
+
+    this.setState({ tasks: updatedTasks });
+  }
+
+  handleClearCompleted() {
+    const { tasks } = this.state;
+
+    const updatedTasks = tasks.filter((task) => !task.isCompleted);
+
+    this.setState({ tasks: updatedTasks });
+  }
+
+  handleToggleCheck(taskId) {
+    const { tasks } = this.state;
+
+    const updatedTasks = tasks.map((task) => {
+      if (task.id === taskId) {
+        return {
+          ...task,
+          isCompleted: !task.isCompleted,
+        };
+      }
+      return task;
+    });
+
+    this.setState({ tasks: updatedTasks });
+  }
+
+  handleToggleEditing(taskId) {
+    const { tasks } = this.state;
+
+    const updatedTasks = tasks.map((task) => {
+      if (task.id === taskId) {
+        return {
+          ...task,
+          isEditing: true,
+        };
+      }
+
+      return task;
+    });
+
+    this.setState({ tasks: updatedTasks });
+  }
+
+  handleUpdateTask(data, taskId) {
+    const { tasks } = this.state;
+
+    const updatedTasks = tasks.map((task) => {
+      if (task.id === taskId && data.title !== task.title) {
+        return {
+          ...task,
+          title: data.title,
+          isEditing: false,
+        };
+      }
+      return {
+        ...task,
+        isEditing: false,
+      };
+    });
+
+    this.setState({ tasks: updatedTasks });
+  }
+
+  saveNewTask(newTask) {
+    this.setState((prevState) => ({
+      tasks: [newTask, ...prevState.tasks],
+    }));
+  }
+
+  toggleDarkLightMode() {
+    const { isDark } = this.state;
+    if (isDark === true) this.setState({ isDark: false });
+    else this.setState({ isDark: true });
+  }
+
+  render() {
+    const { tasks, isDark } = this.state;
+
+    return (
+      <Main>
+        <div className="list-header">
+          <Header
+            toggleDarkLightMode={this.toggleDarkLightMode}
+            isDark={isDark}
+          />
+          <NewTask saveNewTask={this.saveNewTask} />
+        </div>
+        <div className="list-container">
+          <BrowserRouter>
+            <Route
+              path="/"
+              exact
+              render={(routeProps) => (
+                <Home
+                  {...routeProps}
+                  tasks={tasks}
+                  handleDeleteTask={this.handleDeleteTask}
+                  handleUpdateTask={this.handleUpdateTask}
+                  handleToggleEditing={this.handleToggleEditing}
+                  handleToggleCheck={this.handleToggleCheck}
+                />
+              )}
+            />
+            <Route
+              path="/completed"
+              exact
+              render={(routeProps) => (
+                <Completed
+                  {...routeProps}
+                  tasks={tasks}
+                  handleDeleteTask={this.handleDeleteTask}
+                  handleUpdateTask={this.handleUpdateTask}
+                  handleToggleEditing={this.handleToggleEditing}
+                  handleToggleCheck={this.handleToggleCheck}
+                />
+              )}
+            />
+            <Route
+              path="/active"
+              exact
+              render={(routeProps) => (
+                <Active
+                  {...routeProps}
+                  tasks={tasks}
+                  handleDeleteTask={this.handleDeleteTask}
+                  handleUpdateTask={this.handleUpdateTask}
+                  handleToggleEditing={this.handleToggleEditing}
+                  handleToggleCheck={this.handleToggleCheck}
+                />
+              )}
+            />
+            <ListFooter
+              handleClearCompleted={this.handleClearCompleted}
+              tasksLeft={tasks.filter((task) => !task.isCompleted).length}
+            />
+          </BrowserRouter>
         </div>
-      </section>
-    </main>
-  );
+      </Main>
+    );
+  }
 }
 
 export default App;

src/api/getTasks.js

@@ -0,0 +1,15 @@
+import tasks from "../utils/demo-data";
+
+function getTasks(fail = false) {
+  return new Promise((res, rej) => {
+    setTimeout(() => {
+      if (fail) {
+        rej(new Error("Failed to fetch"));
+      }
+
+      res(tasks);
+    }, 1000);
+  });
+}
+
+export { getTasks };

src/api/index.js

@@ -0,0 +1 @@
+export * from "./getTasks";

src/components/Checkbox/Checkbox.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+
+import "./Checkbox.scss";
+
+class Checkbox extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: props.defaultChecked,
+      taskId: props.taskId,
+    };
+    this.toggleChange = this.toggleChange.bind(this);
+    this.handleToggleCheck = props.handleToggleCheck;
+  }
+
+  toggleChange() {
+    this.setState((prevState) => ({
+      isChecked: !prevState.isChecked,
+    }));
+    const { taskId } = this.state;
+    this.handleToggleCheck(taskId);
+  }
+
+  render() {
+    const { taskId, isChecked } = this.state;
+    return (
+      <div className="round-checkbox">
+        <input
+          id={taskId}
+          type="checkbox"
+          defaultChecked={isChecked}
+          onChange={this.toggleChange}
+        />
+        {/* eslint-disable-next-line */}
+        <label htmlFor={taskId} />
+      </div>
+    );
+  }
+}
+
+export default Checkbox;

src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,49 @@
+.round-checkbox {
+  position: relative;
+  & input[type="checkbox"]:not(:checked) + label:hover {
+    border: 4px solid;
+    border-color: rgb(66, 126, 179);
+  }
+  & input[type="checkbox"]:checked + label:hover {
+    border: 1px solid;
+    border-color: rgb(20, 71, 116);
+  }
+  & label {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 28px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 28px;
+    &:after {
+      border: 2px solid #fff;
+      border-top: none;
+      border-right: none;
+      content: "";
+      height: 6px;
+      left: 7px;
+      opacity: 0;
+      position: absolute;
+      top: 8px;
+      transform: rotate(-45deg);
+      width: 12px;
+    }
+  }
+  & input[type="checkbox"] {
+    visibility: hidden;
+  }
+  & input[type="checkbox"]:checked + label {
+    background: linear-gradient(
+      -45deg,
+      rgb(149, 184, 214),
+      rgb(66, 126, 179),
+      white
+    );
+  }
+  & input[type="checkbox"]:checked + label:after {
+    opacity: 1;
+  }
+}

src/components/Checkbox/index.js

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