From 22a7e0b52ebaf9695d9dd8a5c9f97edc42fc48f2 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@thesnail.org>
Date: Tue, 3 Apr 2018 12:07:32 +1000
Subject: [PATCH] Filled out implementation of `TaskList`

---
 src/components/TaskList.js | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/TaskList.js b/src/components/TaskList.js
index f638fcfa..508d131a 100644
--- a/src/components/TaskList.js
+++ b/src/components/TaskList.js
@@ -8,17 +8,48 @@ function TaskList({ loading, tasks, onPinTask, onArchiveTask }) {
     onArchiveTask,
   };
 
+  const LoadingRow = (
+    <div className="loading-item">
+      <span className="glow-checkbox" />
+      <span className="glow-text">
+        <span>Loading</span> <span>cool</span> <span>state</span>
+      </span>
+    </div>
+  );
+
   if (loading) {
-    return <div className="list-items">loading</div>;
+    return (
+      <div className="list-items">
+        {LoadingRow}
+        {LoadingRow}
+        {LoadingRow}
+        {LoadingRow}
+        {LoadingRow}
+        {LoadingRow}
+      </div>
+    );
   }
 
   if (tasks.length === 0) {
-    return <div className="list-items">empty</div>;
+    return (
+      <div className="list-items">
+        <div className="wrapper-message">
+          <span className="icon-check" />
+          <div className="title-message">You have no tasks</div>
+          <div className="subtitle-message">Sit back and relax</div>
+        </div>
+      </div>
+    );
   }
 
+  const tasksInOrder = [
+    ...tasks.filter(t => t.state === 'TASK_PINNED'),
+    ...tasks.filter(t => t.state !== 'TASK_PINNED'),
+  ];
+
   return (
     <div className="list-items">
-      {tasks.map(task => <Task key={task.id} task={task} {...events} />)}
+      {tasksInOrder.map(task => <Task key={task.id} task={task} {...events} />)}
     </div>
   );
 }