diff --git a/app/components/Admin/Blogpost.jsx b/app/components/Admin/Blogpost.jsx index dcf277f1db8699e269a55dfd89fa03778f5ad0ec..bd1054b4fc369db8fcbe2b57c48ed33ced38cb86 100644 --- a/app/components/Admin/Blogpost.jsx +++ b/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> - <Button bsStyle='success' onClick={this._onPublish}>Publish</Button> - <Button bsStyle='warning' onClick={this._onUnpublish}>Unpublish</Button> - <Button bsStyle='danger' onClick={this._onDestroyClick}>Delete</Button> + {changePublished} + <Button bsStyle='danger' onClick={this._onDestroyClick} title='Delete' aria-label='Delete'> + <i className='fa fa-trash-o'></i> + </Button> </td> </tr> ) diff --git a/app/components/Admin/BlogpostCreator.jsx b/app/components/Admin/BlogpostCreator.jsx index 198f5727004c1a74fb0f29341b26d12291147437..7c2f7b14a75fe2c85cc101ebaed6dd2cb01701fe 100644 --- a/app/components/Admin/BlogpostCreator.jsx +++ b/app/components/Admin/BlogpostCreator.jsx @@ -1,28 +1,52 @@ 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> ) } diff --git a/app/containers/Admin.jsx b/app/containers/Admin.jsx index f16c2c9dddcfee2f2aeff59ef32b8c42b7132ebf..327a499ec29db1cc959ee9e1f784308832da233c 100644 --- a/app/containers/Admin.jsx +++ b/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> ) diff --git a/app/containers/Admin/BlogManager.jsx b/app/containers/Admin/BlogManager.jsx index c6497c1a4bbc8414a4c28360f48fd5e6805fbf65..3d517700d67e2a0f3eb0f2f2e119847da6d836ad 100644 --- a/app/containers/Admin/BlogManager.jsx +++ b/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> )