From a3f0ec363700920be55e7e0c23329899571970bf Mon Sep 17 00:00:00 2001
From: Saugat Acharya <mesaugat@gmail.com>
Date: Fri, 29 Dec 2017 20:23:29 +0545
Subject: [PATCH 1/2] Add TodoCount component

---
 src/TodoCount.js | 21 +++++++++++++++++++++
 src/TodoList.js  |  5 ++++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/TodoCount.js

diff --git a/src/TodoCount.js b/src/TodoCount.js
new file mode 100644
index 0000000..31b68dd
--- /dev/null
+++ b/src/TodoCount.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+/**
+ * Component to display number of todos.
+ *
+ * @param {Object} props
+ */
+const TodoCount = (props) => {
+  const {count} = props;
+
+  return (
+    <div className="todo-footer">
+      <strong>
+        <span className="count-todos">{count}</span>
+      </strong>
+      {count === 1 ? ' item' : ' items'}
+    </div>
+  );
+}
+
+export default TodoCount;
diff --git a/src/TodoList.js b/src/TodoList.js
index 2c722cd..8c5f64a 100644
--- a/src/TodoList.js
+++ b/src/TodoList.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import TodoItem from './TodoItem';
+import TodoCount from './TodoCount';
 
 /**
  * Component to show list of todos.
@@ -7,7 +8,8 @@ import TodoItem from './TodoItem';
  * @param {Object} props
  */
 const TodoList = (props) => {
-  const {items} = props
+  const {items} = props;
+  const count = items.length;
 
   return (
     <div className="todolist">
@@ -19,6 +21,7 @@ const TodoList = (props) => {
           )
         }
       </ul>
+      <TodoCount count={count} />
     </div>
   )
 }

From bb9d47d4d833c90acd7caf83397fdf040e8ab2d5 Mon Sep 17 00:00:00 2001
From: Saugat Acharya <mesaugat@gmail.com>
Date: Fri, 29 Dec 2017 20:25:29 +0545
Subject: [PATCH 2/2] Move files to components directory

---
 src/{ => components}/App.js       | 0
 src/{ => components}/TodoCount.js | 0
 src/{ => components}/TodoItem.js  | 0
 src/{ => components}/TodoList.js  | 0
 src/index.js                      | 2 +-
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{ => components}/App.js (100%)
 rename src/{ => components}/TodoCount.js (100%)
 rename src/{ => components}/TodoItem.js (100%)
 rename src/{ => components}/TodoList.js (100%)

diff --git a/src/App.js b/src/components/App.js
similarity index 100%
rename from src/App.js
rename to src/components/App.js
diff --git a/src/TodoCount.js b/src/components/TodoCount.js
similarity index 100%
rename from src/TodoCount.js
rename to src/components/TodoCount.js
diff --git a/src/TodoItem.js b/src/components/TodoItem.js
similarity index 100%
rename from src/TodoItem.js
rename to src/components/TodoItem.js
diff --git a/src/TodoList.js b/src/components/TodoList.js
similarity index 100%
rename from src/TodoList.js
rename to src/components/TodoList.js
diff --git a/src/index.js b/src/index.js
index 0939a3f..8e01902 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './App';
+import App from './components/App';
 
 // Add boostrap css
 import 'bootstrap/dist/css/bootstrap.css';