create /task page (#10)

renderer/components/input.js

@@ -16,7 +16,8 @@ const Input = ({
   size,
   value,
   autoFocus,
-  onChange
+  onChange,
+  readOnly
 }) => {
   const classnames = classNames(size)
 
@@ -34,6 +35,7 @@ const Input = ({
           value={value}
           onChange={onChange}
           autoFocus={autoFocus}
+          readOnly={readOnly}
         />
       ) : (
         <input
@@ -45,6 +47,7 @@ const Input = ({
           value={value}
           onChange={onChange}
           autoFocus={autoFocus}
+          readOnly={readOnly}
         />
       )}
 
@@ -255,7 +258,8 @@ Input.propTypes = {
   success: PropTypes.string,
   icon: PropTypes.element,
   size: PropTypes.oneOf(['normal', 'large', 'medium']),
-  autoFocus: PropTypes.bool
+  autoFocus: PropTypes.bool,
+  readOnly: PropTypes.bool
 }
 
 Input.defaultProps = {
@@ -269,7 +273,8 @@ Input.defaultProps = {
   icon: null,
   value: '',
   size: 'normal',
-  autoFocus: false
+  autoFocus: false,
+  readOnly: false
 }
 
 export default Input

renderer/components/task.js

@@ -12,6 +12,11 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
     <div>
       <ul>
         <li onClick={() => onMove(task)}>{isToday}</li>
+        <li>
+          <Link href={`/task?id=${id}`}>
+            <span>view</span>
+          </Link>
+        </li>
         <li>
           <Link href={`/edit?id=${id}`}>
             <span>edit</span>
@@ -47,10 +52,12 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
     <li>
       <label onClick={() => onMove(task)} />
 
-      <div>
-        <h2>{title}</h2>
-        <p>{desc}</p>
-      </div>
+      <Link href={`/task?id=${id}`}>
+        <div>
+          <h2>{title}</h2>
+          <p>{desc}</p>
+        </div>
+      </Link>
 
       <footer>{hasFooter}</footer>
 
@@ -76,6 +83,7 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
         div {
           max-width: calc(250px - 27px);
           flex-basis: calc(250px - 27px);
+          cursor: pointer;
         }
 
         label:hover {

renderer/pages/task.js

@@ -0,0 +1,123 @@
+'use strict'
+
+// Packages
+import { Component } from 'react'
+import Link from 'next/link'
+
+// Layouts
+import Page from './../layouts/page'
+
+// Components
+import Row from './../components/row'
+import Hero from './../components/hero'
+import Input from './../components/input'
+import Button from './../components/button'
+
+// Services
+import { getUser } from './../services/api'
+
+class Task extends Component {
+  constructor() {
+    super()
+
+    this.state = { title: '', description: '' }
+  }
+
+  componentDidMount() {
+    const { url: { query: { id } } } = this.props
+    const { user } = getUser()
+    const { title, description } = user.tasks.filter(task => task.id === id)[0]
+
+    if (title) {
+      return this.setState({ title, description })
+    }
+  }
+
+  render() {
+    const { title, description } = this.state
+    const { url: { query: { id } } } = this.props
+
+    return (
+      <Page>
+        <Row>
+          <section>
+            <Hero type="Task details" />
+
+            <form>
+              <fieldset>
+                <Input
+                  label="Title"
+                  name="title"
+                  placeholder={title}
+                  size="large"
+                  autoFocus={true}
+                  onChange={this.inputChange}
+                  value={title}
+                  inputRef="title"
+                  readOnly={true}
+                />
+
+                <Input
+                  label="Description"
+                  name="description"
+                  placeholder={description}
+                  multiline={true}
+                  onChange={this.inputChange}
+                  value={description}
+                  inputRef="description"
+                  readOnly={true}
+                />
+              </fieldset>
+
+              <footer>
+                <Link href="/start" prefetch>
+                  <span>Back</span>
+                </Link>
+
+                <Link href={`/edit?id=${id}`} prefetch>
+                  <Button>Edit task</Button>
+                </Link>
+              </footer>
+            </form>
+          </section>
+        </Row>
+
+        <style jsx>{`
+          section {
+            display: flex;
+            flex-direction: column;
+            jutify-content: space-between;
+            min-height: 500px;
+          }
+
+          form {
+            height: 414px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+
+          span {
+            display: block;
+            width: 100%;
+            color: #aaa;
+            height: 36px;
+            font-weight: 600;
+            font-size: 10px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            text-align: center;
+            transition: 0.2s all;
+          }
+
+          span:hover {
+            color: white;
+          }
+        `}</style>
+      </Page>
+    )
+  }
+}
+
+export default Task