show task as done on done's tab (#31)

renderer/components/done.js

@@ -9,9 +9,7 @@ const Done = ({ tasks, onMove }) => {
     tasks.length === 0 ? (
       <EmptyState title="tasks done" />
     ) : (
-      tasks.map(task => (
-        <Task key={task.id} task={task} onMove={onMove} isDone={true} />
-      ))
+      tasks.map(task => <Task key={task.id} task={task} onMove={onMove} />)
     )
 
   return (

renderer/components/task-actions.js

@@ -0,0 +1,53 @@
+'use strict'
+
+// Packages
+import Link from 'next/link'
+
+const TaskActions = ({ task, onDelete, onMove }) => {
+  const { id, type } = task
+  const isToday = type === 'today' ? 'done' : 'today'
+  const nextType = type === 'today' ? 'today' : 'backlog'
+
+  return (
+    <ul>
+      {type !== 'done' ? ( // eslint-disable-line no-negated-condition
+        <li onClick={() => onMove(nextType, task)}>{isToday}</li>
+      ) : null}
+
+      {type !== 'backlog' ? ( // eslint-disable-line no-negated-condition
+        <li onClick={() => onMove('back', task)}>backlog</li>
+      ) : null}
+
+      <li>
+        <Link href={`/edit?id=${id}`}>
+          <span>view</span>
+        </Link>
+      </li>
+
+      <li onClick={() => onDelete(task)}>delete</li>
+
+      <style jsx>{`
+        li {
+          color: white;
+          display: inline-block;
+          font-size: 11px;
+          font-weight: 600;
+          margin-right: 10px;
+          color: #868e96;
+          cursor: pointer;
+        }
+
+        span {
+          color: #868e96;
+        }
+
+        li:hover,
+        span:hover {
+          color: white;
+        }
+      `}</style>
+    </ul>
+  )
+}
+
+export default TaskActions

renderer/components/task-check.js

@@ -0,0 +1,58 @@
+'use strict'
+
+const TaskCheck = ({ task, onMove }) => {
+  const { type } = task
+  const isDone = type === 'done' ? 'is-done' : ''
+  const nextMove = type === 'backlog' ? 'backlog' : 'today'
+  const hasAction = type === 'done' ? null : nextMove
+
+  return (
+    <div>
+      <label className={isDone} onClick={() => onMove(hasAction, task)} />
+
+      <style jsx>{`
+        label {
+          height: 12px;
+          width: 12px;
+          display: block;
+          border: 1px dotted rgba(255, 255, 255, 0.75);
+          border-radius: 50%;
+          margin-right: 10px;
+          margin-top: 6px;
+          cursor: pointer;
+          transition: 0.15s;
+          position: relative;
+        }
+
+        label:hover {
+          border-color: white;
+          border-style: solid;
+        }
+
+        .is-done {
+          background-color: transparent;
+          border: 0;
+          cursor: default;
+        }
+
+        .is-done:after {
+          display: inline-block;
+          width: 6px;
+          height: 2px;
+          position: absolute;
+          left: 2px;
+          top: 3px;
+          border: 2px solid #00e7c0;
+          border-top: 0;
+          border-right: 0;
+          color: #00e7c0;
+          opacity: 1;
+          transform: rotate(-45deg) scale(1);
+          content: '';
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default TaskCheck

renderer/components/task-project.js

@@ -0,0 +1,25 @@
+'use strict'
+
+// Packages
+import reactHashAvatar from 'react-hash-avatar'
+import renderHTML from 'react-render-html'
+
+const TaskProject = ({ project }) => {
+  if (project) {
+    return (
+      <span title={project}>
+        {renderHTML(reactHashAvatar(project, { size: 8, radius: '50px' }))}
+
+        <style jsx>{`
+          span {
+            flex-basis: 10px;
+          }
+        `}</style>
+      </span>
+    )
+  }
+
+  return null
+}
+
+export default TaskProject

renderer/components/task.js

@@ -2,121 +2,20 @@
 
 // Packages
 import Link from 'next/link'
-import reactHashAvatar from 'react-hash-avatar'
-import renderHTML from 'react-render-html'
 
-const Task = ({ task, onMove, onDelete, isDone }) => {
-  const { id, title, description, project, type } = task
-  const isToday = type === 'today' ? 'done' : 'today'
-  const nextType = type === 'today' ? 'today' : 'backlog'
+// Components
+import TaskCheck from './task-check'
+import TaskProject from './task-project'
+import TaskActions from './task-actions'
+
+const Task = ({ task, onMove, onDelete }) => {
+  const { id, title, description, project } = task
   const desc =
     description.length >= 30 ? `${description.substr(0, 30)}...` : description
-  const hasProject = project ? (
-    <span title={project}>
-      {renderHTML(reactHashAvatar(project, { size: 8, radius: '50px' }))}
-
-      <style jsx>{`
-        span {
-          flex-basis: 10px;
-        }
-      `}</style>
-    </span>
-  ) : null
-  const backBacklog =
-    type === 'today' || type === 'done' ? (
-      <li onClick={() => onMove('back', task)}>
-        backlog
-        <style jsx>{`
-          li {
-            color: white;
-            display: inline-block;
-            font-size: 11px;
-            font-weight: 600;
-            margin-right: 10px;
-            color: #868e96;
-            cursor: pointer;
-          }
-
-          li:hover {
-            color: white;
-          }
-        `}</style>
-      </li>
-    ) : null
-  const hasFooter = isDone ? (
-    <div>
-      <ul>
-        {backBacklog}
-
-        <li>
-          <Link href={`/task?id=${id}`}>
-            <span>view</span>
-          </Link>
-        </li>
-      </ul>
-
-      <style jsx>{`
-        li {
-          color: white;
-          display: inline-block;
-          font-size: 11px;
-          font-weight: 600;
-          margin-right: 10px;
-          color: #868e96;
-          cursor: pointer;
-        }
-
-        span {
-          color: #868e96;
-        }
-
-        li:hover,
-        span:hover {
-          color: white;
-        }
-      `}</style>
-    </div>
-  ) : (
-    <div>
-      <ul>
-        <li onClick={() => onMove(nextType, task)}>{isToday}</li>
-
-        {backBacklog}
-
-        <li>
-          <Link href={`/edit?id=${id}`}>
-            <span>view</span>
-          </Link>
-        </li>
-        <li onClick={() => onDelete(task)}>delete</li>
-      </ul>
-
-      <style jsx>{`
-        li {
-          color: white;
-          display: inline-block;
-          font-size: 11px;
-          font-weight: 600;
-          margin-right: 10px;
-          color: #868e96;
-          cursor: pointer;
-        }
-
-        span {
-          color: #868e96;
-        }
-
-        li:hover,
-        span:hover {
-          color: white;
-        }
-      `}</style>
-    </div>
-  )
 
   return (
     <li>
-      <label onClick={() => onMove(task)} />
+      <TaskCheck task={task} onMove={onMove} />
 
       <Link href={`/edit?id=${id}`}>
         <div className="heading">
@@ -125,11 +24,13 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
             <p>{desc}</p>
           </div>
 
-          {hasProject}
+          <TaskProject project={project} />
         </div>
       </Link>
 
-      <footer>{hasFooter}</footer>
+      <footer>
+        <TaskActions task={task} onMove={onMove} onDelete={onDelete} />
+      </footer>
 
       <style jsx>{`
         li {
@@ -138,18 +39,6 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
           flex-wrap: wrap;
         }
 
-        label {
-          height: 12px;
-          width: 12px;
-          display: block;
-          border: 1px dotted rgba(255, 255, 255, 0.75);
-          border-radius: 50%;
-          margin-right: 15px;
-          margin-top: 6px;
-          cursor: pointer;
-          transition: 0.15s;
-        }
-
         .heading {
           max-width: calc(280px - 37px);
           flex-basis: calc(280px - 37px);
@@ -159,11 +48,6 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
           align-items: center;
         }
 
-        label:hover {
-          border-color: white;
-          border-style: solid;
-        }
-
         h2 {
           font-weight: 700;
           font-size: 14px;
@@ -183,7 +67,7 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
         footer {
           transform: translateY(-5px);
           opacity: 0;
-          margin-left: 28px;
+          margin-left: 22px;
           transition: 0.2s;
           flex-basis: 100%;
         }