Add author and date fields to BlogManager and BlogpostCreator.

app/components/Admin/Blogpost.jsx

@@ -27,6 +27,7 @@ export default class Blogpost extends React.Component {
 
   _onPublish () {
     this.props.update(Object.assign(this.props.blogpost, {
+      published_at: new Date(),
       status: 'published'
     }))
   }
@@ -56,6 +57,22 @@ export default class Blogpost extends React.Component {
           value={blogpost.title}
         />
     }
+
+    var changePublished
+    if (blogpost.status === 'unpublished') {
+      changePublished = <Button title='Publish' aria-label='Publish' bsStyle='success' onClick={this._onPublish}>
+          <i className='fa fa-chain'></i>
+        </Button>
+    } else {
+      changePublished = <Button title='Unpublish' aria-label='Unpublish' bsStyle='warning' onClick={this._onUnpublish}>
+          <i className='fa fa-chain-broken'></i>
+        </Button>
+    }
+
+    if (blogpost.published_at) {
+      blogpost.published_at = new Date(blogpost.published_at).toDateString()
+    }
+
     return (
       <tr className='blogpost' key={blogpost.key}>
         <td>
@@ -75,11 +92,14 @@ export default class Blogpost extends React.Component {
         </td>
         <td>
           <LinkContainer to={`/admin/editor/${blogpost._id}`}>
-            <Button bsStyle='primary'>Edit this</Button>
+            <Button bsStyle='primary' title='Edit' aria-label='Edit'>
+              <i className='fa fa-pencil'></i>
+            </Button>
           </LinkContainer>&nbsp;
-          <Button bsStyle='success' onClick={this._onPublish}>Publish</Button>&nbsp;
-          <Button bsStyle='warning' onClick={this._onUnpublish}>Unpublish</Button>&nbsp;
-          <Button bsStyle='danger' onClick={this._onDestroyClick}>Delete</Button>
+          {changePublished}&nbsp;
+          <Button bsStyle='danger' onClick={this._onDestroyClick} title='Delete' aria-label='Delete'>
+            <i className='fa fa-trash-o'></i>
+          </Button>
         </td>
       </tr>
     )

app/components/Admin/BlogpostCreator.jsx

 import React from 'react'
-import TextInput from './TextInput'
-
-import styles from '../../scss/components/_blogpostCreator'
+// import TextInput from './TextInput'
+import { Input, Button } from 'react-bootstrap'
 
 export default class BlogpostCreator extends React.Component {
   constructor (props) {
     super(props)
-    this._onSave = this._onSave.bind(this)
+    this.onSave = this.onSave.bind(this)
+    this.onChange = this.onChange.bind(this)
   }
 
-  _onSave (text) {
+  onSave (text) {
     this.props.create({
       type: 'blogpost',
-      title: text,
+      title: this.state.title,
+      author: this.state.author,
       status: 'unpublished',
       source: ''
     })
   }
 
+  onChange () {
+    this.setState({
+      title: this.refs.title.getValue(),
+      author: this.refs.author.getValue()
+    })
+  }
+
   render () {
     return (
       <div>
-        <h1 className={styles.entrybox__header}>Create a new blog post</h1>
-        <TextInput className={styles.entrybox__input} placeholder='Title' onSave={this._onSave} />
+        <h3>Create a new blog post</h3>
+        <Input
+          type='text'
+          placeholder='One fine day...'
+          label='Title'
+          ref='title'
+          onChange={this.onChange}
+        />
+        <Input
+          type='text'
+          placeholder='Benjamin Franklin'
+          label='Author'
+          ref='author'
+          onChange={this.onChange}
+        />
+        <Button bsStyle='primary' onClick={this.onSave} title='Create' aria-label='Create'>
+            <i className='fa fa-plus'></i> Create
+        </Button>
       </div>
     )
   }

app/containers/Admin.jsx

@@ -16,7 +16,9 @@ class Admin extends Component {
     const { children } = this.props
     return (
       <div>
-        <Navigation />
+        <div className='bootstrap'>
+          <Navigation/>
+        </div>
         {children}
       </div>
     )

app/containers/Admin/BlogManager.jsx

@@ -17,11 +17,12 @@ class BlogManager extends React.Component {
     return (
       <Grid>
         <div blog={blog} className={styles.vote}>
-          <BlogpostCreator create={actions.createFragment} />
           <BlogpostList
             update={actions.updateFragment}
             delete={actions.deleteFragment}
             blogposts={blogposts} />
+          <BlogpostCreator create={actions.createFragment} />
+
         </div>
       </Grid>
     )