Rect ToDo List Gonzalo & Ivan

.eslintrc.js

@@ -56,6 +56,7 @@ module.exports = {
     },
   ],
   rules: {
+    "no-param-reassign": 0,
     "prettier/prettier": [
       "error",
       {

.husky/.gitignore

@@ -0,0 +1 @@
+_

package.json

@@ -20,11 +20,12 @@
     "clsx": "^1.1.1",
     "cypress": "^7.5.0",
     "formik": "^2.2.6",
+    "framer-motion": "^6.2.6",
     "prop-types": "^15.7.2",
     "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 +58,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",

public/index.html

@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.js

@@ -1,14 +1,177 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+import { motion } from "framer-motion/dist/framer-motion";
+
+import "./sass/main.scss";
+import imgLight from "./img/motivation.jpg";
+import imgDark from "./img/motivation2.jpg";
+import { data } from "./utils/data";
+import makeNewId from "./utils/hash";
+
+// Components
+import ToDoList from "./components/ToDoList";
+import CreateToDo from "./components/CreateToDo";
+import Quote from "./components/Quote";
+
+const classNames = require("classnames");
 
 function App() {
+  const [toDoItems, setToDoItems] = useState(data);
+  const [formData, setFormData] = useState({
+    id: "",
+    text: "",
+    done: false,
+    isEditing: false,
+    label: "",
+  });
+
+  // React Router routes
+  const [isEmpty, setIsEmpty] = useState(false);
+  const [todoIsEmpty, setTodoIsEmpty] = useState(false);
+  const [darkTheme, setDarkTheme] = useState(false);
+
+  const completedTodos = toDoItems.filter((item) => item.done === true);
+  const activeTodos = toDoItems.filter((item) => item.done !== true);
+
+  // Local storage
+  useEffect(() => {
+    const storedTodos = JSON.parse(localStorage.getItem("todos"));
+    if (storedTodos) setToDoItems(storedTodos);
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("todos", JSON.stringify(toDoItems));
+  }, [toDoItems]);
+
+  const routes = [
+    { path: "/", data: toDoItems },
+    { path: "/completed", data: completedTodos },
+    { path: "/active", data: activeTodos },
+  ];
+
+  // Create New Item
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevState) => {
+      return {
+        ...prevState,
+        [name]: value,
+      };
+    });
+    setIsEmpty(false);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Empty error
+    if (formData.text === "") {
+      setIsEmpty(true);
+      return;
+    }
+    const newToDo = {
+      id: makeNewId(),
+      text: formData.text,
+      done: false,
+      isEditing: false,
+      label: formData.label,
+    };
+    setToDoItems((prevState) => [newToDo, ...prevState]);
+    setFormData({
+      id: "",
+      text: "",
+      done: false,
+      isEditing: false,
+      label: "",
+    });
+  };
+  // Delete
+  const handleDelete = (id) => {
+    const deleteIndex = toDoItems.find((index) => index.id === id);
+    setToDoItems((prevState) => {
+      const newState = prevState.filter((item) => item !== deleteIndex);
+      return newState;
+    });
+  };
+  // Modify a formData of a ToDo Item
+  const changeformData = (id, param) => {
+    const element = toDoItems.find((index) => index.id === id);
+    const index = toDoItems.indexOf(element);
+    const newState = Array.from(toDoItems);
+    newState[index][param] = !newState[index][param];
+    setToDoItems(newState);
+  };
+  // Is Completed
+  const isCompleted = (id) => {
+    const element = toDoItems.find((index) => index.id === id);
+    handleDelete(id);
+    const newToDo = {
+      id: element.id,
+      text: element.text,
+      done: !element.done,
+      isEditing: false,
+      label: element.label,
+    };
+    setToDoItems((prevState) => [...prevState, newToDo]);
+  };
+  // Is Editing
+  const toggleEditing = (id) => changeformData(id, "isEditing");
+  // Clear Completed Items
+  const clearCompleted = () => setToDoItems(activeTodos);
+
+  const changeTheme = () => setDarkTheme(!darkTheme);
+
   return (
-    <main className="container mt-5">
-      <section className="row">
-        <div className="col col-12">
-          <h1>Hola mundo</h1>
-        </div>
-      </section>
-    </main>
+    <BrowserRouter>
+      <main className={darkTheme ? classNames("dark-mode") : ""}>
+        <header>
+          <img
+            src={darkTheme ? imgDark : imgLight}
+            alt="motivated person in the mountains"
+          />
+        </header>
+        <section
+          id="container-sm"
+          className="container-sm d-flex flex-column fixed-top align-items-center h-100"
+        >
+          <div className="main-header w-100 mt-5 d-flex justify-content-between">
+            <h1>TODO</h1>
+            <motion.button
+              initial={{ opacity: 0, y: -25 }}
+              animate={{ opacity: 1, y: 0 }}
+              className=""
+              type="button"
+              onClick={changeTheme}
+            >
+              <span className="material-icons-outlined md-48">
+                {darkTheme ? "dark_mode" : "light_mode"}
+              </span>
+            </motion.button>
+          </div>
+          <Quote />
+          <CreateToDo
+            value={formData.text}
+            handleChange={handleChange}
+            handleSubmit={handleSubmit}
+            emptyError={isEmpty}
+          />
+          {routes.map((route) => (
+            <Route key={route} path={route.path} exact>
+              <ToDoList
+                data={route.data}
+                handleDelete={handleDelete}
+                isCompleted={isCompleted}
+                handleError={setTodoIsEmpty}
+                emptyError={todoIsEmpty}
+                toggleEditing={toggleEditing}
+                handleClear={clearCompleted}
+                reorderList={setToDoItems}
+                theme={darkTheme}
+              />
+            </Route>
+          ))}
+          <h6 className="mt-5">Drag and drop to reorder list</h6>
+        </section>
+      </main>
+    </BrowserRouter>
   );
 }
 

src/components/CreateToDo/CreateToDo.js

@@ -0,0 +1,131 @@
+import React, { useState, useRef, useEffect } from "react";
+
+import { motion } from "framer-motion/dist/framer-motion";
+
+import "./CreateToDo.scss";
+
+const classNames = require("classnames");
+
+export default function CreateToDo({
+  value,
+  handleChange,
+  handleSubmit,
+  handleKeyPress,
+  emptyError,
+}) {
+  const [todoLabel, setTodoLabel] = useState("");
+  const inputRef = useRef();
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, []);
+  return (
+    <form action="" className="create-todo-input">
+      <span className="material-icons-outlined md-30">circle</span>
+      <input
+        ref={inputRef}
+        className={emptyError ? "inputError" : ""}
+        type="text"
+        placeholder={
+          !emptyError
+            ? "Create new item"
+            : "Please enter at least one character"
+        }
+        value={value}
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+        data-testid="create-todo-input"
+        name="text"
+      />
+      <fieldset required>
+        <motion.label
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          htmlFor="green-option"
+          className={
+            todoLabel === "green"
+              ? classNames("label-border-green", "green-label")
+              : "green-label"
+          }
+        >
+          <input
+            type="radio"
+            id="green-option"
+            name="label"
+            value="#06d6a0"
+            onChange={handleChange}
+            style={{ display: "none" }}
+            onClick={() => setTodoLabel("green")}
+          />
+        </motion.label>
+        <motion.label
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          className={
+            todoLabel === "red"
+              ? classNames("label-border-red", "red-label")
+              : "red-label"
+          }
+          htmlFor="red-option"
+        >
+          <input
+            type="radio"
+            id="red-option"
+            name="label"
+            value="#ef476f"
+            onChange={handleChange}
+            style={{ display: "none" }}
+            onClick={() => setTodoLabel("red")}
+          />
+        </motion.label>
+        <motion.label
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          className={
+            todoLabel === "orange"
+              ? classNames("label-border-orange", "orange-label")
+              : "orange-label"
+          }
+          htmlFor="orange-option"
+        >
+          <input
+            type="radio"
+            id="orange-option"
+            name="label"
+            value="#fb5607"
+            onChange={handleChange}
+            style={{ display: "none" }}
+            onClick={() => setTodoLabel("orange")}
+          />
+        </motion.label>
+        <motion.label
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          className={
+            todoLabel === "blue"
+              ? classNames("label-border-blue", "blue-label")
+              : "blue-label"
+          }
+          htmlFor="blue-option"
+        >
+          <input
+            type="radio"
+            id="blue-option"
+            name="label"
+            value="#3a86ff"
+            onChange={handleChange}
+            style={{ display: "none" }}
+            onClick={() => setTodoLabel("blue")}
+          />
+        </motion.label>
+      </fieldset>
+      <button
+        type="submit"
+        style={{ display: "none" }}
+        onClick={handleSubmit}
+        name=""
+        value=""
+      />
+    </form>
+  );
+}