From b7c9c37d233d9857522562d25d7e85960d9ada0d Mon Sep 17 00:00:00 2001
From: Brian Sam-Bodden <brian.sam-bodden@redislabs.com>
Date: Tue, 5 Jan 2021 00:02:37 -0700
Subject: [PATCH] feat(ui): implement list controls - items left and clear
 completed functionality

---
 src/main/webapp/src/components/todo_list.js   |  2 +
 .../src/components/todo_list_controls.js      | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/main/webapp/src/components/todo_list_controls.js

diff --git a/src/main/webapp/src/components/todo_list.js b/src/main/webapp/src/components/todo_list.js
index 11e682d..a1f7635 100644
--- a/src/main/webapp/src/components/todo_list.js
+++ b/src/main/webapp/src/components/todo_list.js
@@ -1,6 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import { TodosContext } from "../context/todos_context";
 import Todo from './todo';
+import TodoListControls from './todo_list_controls';
 
 const TodoList = function () {
   const { todos, toggleAll } = useContext(TodosContext);
@@ -21,6 +22,7 @@ const TodoList = function () {
 				<Todo key={todo.id} id={todo.id} />
         ))}
       </ul>
+      <TodoListControls />
     </section >
   );
 }
diff --git a/src/main/webapp/src/components/todo_list_controls.js b/src/main/webapp/src/components/todo_list_controls.js
new file mode 100644
index 0000000..c514fde
--- /dev/null
+++ b/src/main/webapp/src/components/todo_list_controls.js
@@ -0,0 +1,39 @@
+import React, { useMemo, useContext } from 'react';
+import { TodosContext } from "../context/todos_context";
+
+const TodoListControls = function (props) {
+  const { todos, clearCompleted } = useContext(TodosContext);
+
+  const itemsLeft = useMemo(() => todos.reduce((p, c) => p + (c.completed ? 0 : 1), 0), [
+    todos
+  ]);
+
+  const itemsCompleted = useMemo(() => todos.length - itemsLeft, [
+    todos, itemsLeft
+  ]);
+
+  return (
+    <footer className="footer">
+      {/*  This should be `0 items left` by default  */}
+      <span className="todo-count"><strong>{itemsLeft}</strong> {itemsLeft != 1 ? "items" : "item"} left</span>
+      {/*  Remove this if you don't implement routing  */}
+      <ul className="filters">
+        <li>
+				  <a className="selected" href="#/">All</a>
+			  </li>
+				<li>
+					<a href="#/active">Active</a>
+				</li>
+				<li>
+					<a href="#/completed">Completed</a>
+				</li>
+      </ul>
+      {/*  Hidden if no completed items are left ↓  */}
+      {itemsCompleted > 0 &&
+        <button className="clear-completed" onClick={clearCompleted}>Clear completed</button>
+      }
+    </footer>
+  );
+}
+
+export default TodoListControls;
\ No newline at end of file