Filled out implementation of TaskList

chromaui · Mar 5, 2019 · 22a7e0b · 22a7e0b
1 parent 65ed814
commit 22a7e0b
Showing 1 changed file with 34 additions and 3 deletions.
diff --git 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>
   );
 }