Solution: Arantza Beitia, Jaime Alcalde

.eslintignore

@@ -1 +1,2 @@
 package-lock.json
+src/*

.husky/.gitignore

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

package.json

@@ -25,10 +25,11 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^4.0.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "sass": "^1.32.11",
+    "shortid": "^2.2.16",
     "uuid": "^8.3.2",
     "web-vitals": "^1.1.1",
     "yup": "^0.32.9"
@@ -68,6 +69,7 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "start-server-and-test": "^1.12.5",
+    "styled-components": "^5.3.1",
     "typescript": "^4.2.4"
   },
   "scripts": {

src/App.js

@@ -1,14 +1,23 @@
 import React from "react";
 
+// import TodoFooter from "./components/TodoFooter";
+import TodoList from "./components/TodoList";
+
 function App() {
   return (
-    <main className="container mt-5">
-      <section className="row">
-        <div className="col col-12">
-          <h1>Hola mundo</h1>
-        </div>
-      </section>
-    </main>
+    <div className="position-relative">
+      <section className="padding-15 mb-4 bg-image-hero"></section>
+      <main className="card position-absolute absolute-center">{/*  card */}
+        <header className="card-header">
+          <h1>TODO</h1>
+        </header>
+        <TodoList />
+        {/* <TodoFooter /> */}
+      </main>
+      <footer className="text-center">
+        <p>Drag and drop to reorder list</p>
+      </footer>
+    </div>
   );
 }
 

src/assets/styles/components/formComponents/checkbox.scss

@@ -0,0 +1,15 @@
+.checkbox {
+  $size: 1.3rem;
+	width: $size;
+  height: $size;
+	border-radius: 50%;
+  border: 2px solid #a76bef;
+	transition: box-shadow .3s;
+	background: lightgrey;
+	cursor: pointer;
+	appearance: none;
+}
+
+.checkbox:checked {
+  box-shadow: inset 0 0 0 1.25rem #a76bef;
+}

src/assets/styles/components/formComponents/index.scss

@@ -0,0 +1,2 @@
+@forward 'input';
+@forward 'checkbox';

src/assets/styles/components/formComponents/input.scss

@@ -0,0 +1,12 @@
+.input {
+	width: 100%;
+	border: 0;
+  border-bottom: 2px solid #a76bef;
+
+	&:focus {
+		border: 0;
+		border-bottom: 3px solid #a76bef;
+		outline: none;
+		background:  #a66bef41;
+	}
+}

src/assets/styles/components/img/img.scss

@@ -0,0 +1,19 @@
+.bg-image-hero {
+  background-image:
+  radial-gradient(
+    rgb(4 4 68 / 81%),rgb(7 7 56 / 32%)),
+  url('https://picsum.photos/1000/600?random=101');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: bottom;
+  background-attachment: fixed;
+  height: 20rem;
+}
+
+.absolute-center {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 30rem;
+  width: 100%;
+}

src/assets/styles/components/img/index.scss

@@ -0,0 +1 @@
+@forward 'img';

src/assets/styles/components/index.scss

@@ -0,0 +1,2 @@
+@forward "img";
+@forward "formComponents";

src/assets/styles/main.scss

@@ -0,0 +1,2 @@
+@use 'components';
+@use 'utils';

src/assets/styles/utils/index.scss

@@ -0,0 +1,2 @@
+@forward 'state';
+@forward 'text';

src/assets/styles/utils/state.scss

@@ -0,0 +1,5 @@
+.is-disabled {
+  pointer-events: none;
+  opacity: .5;
+  text-decoration: line-through;
+}

src/assets/styles/utils/text.scss

@@ -0,0 +1,3 @@
+.text-tag {
+  font-size: .8125rem;
+}

src/components/Button/Button.style.js

@@ -0,0 +1,13 @@
+import styled from "styled-components"
+
+export const Button = styled.button`
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  border: none;
+
+  &:hover {
+    font-weight: 600;
+    color: #a76bef;
+  }
+`;

src/components/TodoFooter/TodoFooter.js

@@ -0,0 +1,24 @@
+import { Component } from "react"
+
+class TodoFooter extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render () {
+    return (
+      <footer className="card-footer text-muted d-flex justify-content-between align-items-center">
+        <span className="text-tag">5 items left</span>
+        <div className="d-flex">
+          <span className="text-tag">All</span>
+          <span className="text-tag px-2">Active</span>
+          <span className="text-tag">Completed</span>
+        </div>
+        <span className="text-tag">Clear Completed</span>
+      </footer>
+    )
+  }
+}
+
+export default TodoFooter

src/components/TodoFooter/index.js

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

src/components/TodoForm/TodoForm.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import shortid from "shortid";
+
+class TodoForm extends Component{
+  constructor(props) {
+    super(props)
+    this.state = {text:""}
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(e){
+    e.preventDefault();
+    this.props.onSubmit({
+      id: shortid.generate(),
+      text: this.state.text,
+      completed: false,
+    })
+    this.setState({text:""})
+  }
+
+  handleChange(e){
+    this.setState({[e.target.name] : e.target.value});
+  }
+
+  render() {
+    const {text} = this.state;
+    return(
+      <form onSubmit={this.handleSubmit} className="card-body">
+        <input className="input" type="text" placeholder="insert text here" value={text} name="text" onChange={this.handleChange}/>
+
+      </form>
+    )
+  }
+}
+
+export default TodoForm

src/components/TodoForm/index.js

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

src/components/TodoList/TodoList.js

@@ -0,0 +1,114 @@
+import React, { Component } from "react";
+import TodoForm from "../TodoForm";
+// import TodoItem from '../TodoItem/TodoItem'
+import { Button } from "../Button/Button.style"
+class TodoList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: [],
+      showTodos: "all",
+    };
+  }
+  addTodo = (todo) => {
+    const newTodo = [todo, ...this.state.todos]; // empieza con el array todo, y hace un push
+    this.setState({ todos: newTodo });
+  };
+
+  showTodos = (string) => {
+    this.setState({ showTodos: string });
+  };
+
+  toggleCompleted = (completedId) => {
+    this.setState({
+      todos: this.state.todos.map((item) => {
+        if (item.id === completedId) {
+          return {
+            id: item.id,
+            text: item.text,
+            completed: !item.completed,
+          };
+        } else {
+          return item;
+        }
+      }),
+    });
+  };
+
+  onDelete = (id) => {
+    this.setState({
+      todos: this.state.todos.filter(item => item.id !== id)
+    })
+  }
+  deleteCompleted = () => {
+    this.setState({
+      todos: this.state.todos.filter((notDelete) => !notDelete.completed),
+    });
+  };
+
+  render() {
+    let { showTodos, todos } = this.state;
+    if (showTodos === "all") {
+      todos = todos;
+    } else if (showTodos === "active") {
+      todos = todos.filter((counter) => !counter.completed);
+    } else if (showTodos === "completed") {
+      todos = todos.filter((counter) => counter.completed);
+    }
+    return (
+      <>
+        <TodoForm onSubmit={this.addTodo} />
+
+        <ul className="list-group list-group-flush">
+          {todos.map((item) => (
+            <li className="list-group-item d-flex justify-content-between align-items-center" key={item.id}>
+              <div className="d-flex align-items-center">
+                <input
+                  className="checkbox"
+                  type="checkbox"
+                  name={item.id}
+                  onClick={() => this.toggleCompleted(item.id)}
+                />
+                <label
+                  className={`ml-2 mb-0 ${item.completed ? "is-disabled": ""}`}
+                  contentEditable="true"
+                  htmlFor={item.id}
+                >
+                  {item.text}
+                </label>
+              </div>
+              <Button onClick={() => this.onDelete(item.id)}>&times;</Button>
+            </li>
+          ))}
+        </ul>
+
+        <footer className="card-footer text-muted d-flex justify-content-between align-items-center">
+          <span className="text-tag">
+            {todos.filter((counter) => !counter.completed).length} items left
+          </span>
+          <div className="d-flex">
+            <Button className="text-tag" onClick={() => this.showTodos("all")}>
+              All
+            </Button>
+            <Button
+              className="text-tag px-2"
+              onClick={() => this.showTodos("active")}
+            >
+              Active
+            </Button>
+            <Button
+              className="text-tag"
+              onClick={() => this.showTodos("completed")}
+            >
+              Completed
+            </Button>
+          </div>
+          <Button className="text-tag" onClick={this.deleteCompleted}>
+            Clear Completed
+          </Button>
+        </footer>
+      </>
+    );
+  }
+}
+export default TodoList;

src/components/TodoList/index.js

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

src/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 import "bootstrap/dist/css/bootstrap.min.css";
+import "./assets/styles/main.scss";
 
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";