diff --git a/app/components/Blogpost.jsx b/app/components/Blogpost.jsx index c9bae3cb61cea58b5f0fba0f9c2cd35d71ba31ad..24bd9fc00d80a153743bda4baef93d636d60ddb2 100644 --- a/app/components/Blogpost.jsx +++ b/app/components/Blogpost.jsx @@ -66,7 +66,7 @@ export default class Blogpost extends React.Component { {input} </Col> <Col xs={12} md={4}> - <LinkContainer to={`/admin/creates/${blogpost._id}`}> + <LinkContainer to={`/admin/editor/${blogpost._id}`}> <Button bsStyle='primary'>Edit this</Button> </LinkContainer> <Button bsStyle='success' onClick={this._onPublish}>Publish</Button> diff --git a/app/components/Dashboard.jsx b/app/components/Dashboard.jsx deleted file mode 100644 index 0992dd489960be46cf68cad00dbf851aea689939..0000000000000000000000000000000000000000 --- a/app/components/Dashboard.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -export default class Dashboard extends React.Component { - render () { - return ( - <div>Welcome to the Pubsweet Dashboard</div> - ) - } -} diff --git a/app/components/Editor.jsx b/app/components/Editor.jsx index 60055825e7cdfa694028ab93581d0dbb086a7137..1a12f926bbb01d890e2f943d15b2928993ec5518 100644 --- a/app/components/Editor.jsx +++ b/app/components/Editor.jsx @@ -1,31 +1,67 @@ +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import * as Actions from '../actions' +import _ from 'lodash' + import React from 'react' import ReactQuill from 'react-quill' -import 'scss/components/_editor' +import '../scss/components/_editor' -export default class Editor extends React.Component { +class Editor extends React.Component { constructor (props) { super(props) this._onChange = this._onChange.bind(this) - - this.state = { - value: this.props.value || '' - } } - _onChange (value) { - this.setState({value: value}) - this.props.onChange(value) + _onChange (content) { + let fragment = Object.assign(this.props.fragment, { + source: content, + presentation: content + }) + this.props.actions.updateFragment(fragment) } render () { + let editor + if (this.props.fragment) { + editor = <ReactQuill theme='snow' + value={this.props.fragment.source} + onChange={this._onChange} + /> + } else { + editor = <p>Loading</p> + } + return ( - <ReactQuill theme='snow' value={this.state.value} onChange={this._onChange} /> + <div> + {editor} + </div> ) } } Editor.propTypes = { - onChange: React.PropTypes.func, - value: React.PropTypes.string + fragment: React.PropTypes.object, + actions: React.PropTypes.object +} + +function mapStateToProps (state) { + console.log(state) + return { + fragment: _.find(state.fragments, function (f) { + return f._id === state.router.params.id + }) + } +} + +function mapDispatchToProps (dispatch) { + return { + actions: bindActionCreators(Actions, dispatch) + } } + +export default connect( + mapStateToProps, + mapDispatchToProps +)(Editor) diff --git a/app/components/Navigation.jsx b/app/components/Navigation.jsx index 054e3f661982b790c85169e1b28c567fabd90acc..e47940d3f8f1b168ffe6986dc2c8cdba386beebb 100644 --- a/app/components/Navigation.jsx +++ b/app/components/Navigation.jsx @@ -8,8 +8,8 @@ export default class Navigation extends React.Component { return ( <Navbar brand='Science Blogger'> <Nav> - <LinkContainer to='/admin/manages'> - <NavItem>Manage</NavItem> + <LinkContainer to='/admin/manager'> + <NavItem>Manager</NavItem> </LinkContainer> <IndexLinkContainer to='/'> <NavItem>Share</NavItem> diff --git a/app/routes.jsx b/app/routes.jsx index 39f6e08f1b5777d345093ddddfca674070e08eb1..aa007c6d77ad742847db79431ab93dcf19f89039 100644 --- a/app/routes.jsx +++ b/app/routes.jsx @@ -5,10 +5,8 @@ import App from './containers/App' // Admin import About from './components/About' -import Manage from './containers/BlogManager' - -import Dashboard from './components/Dashboard' -import Create from './components/Create' +import BlogManager from './containers/BlogManager' +import Editor from './components/Editor' // Public import Share from './components/Share' @@ -17,9 +15,8 @@ export default ( <Route component={App}> <Route path='/' component={Share}/> <Route path='/admin'> - <Route path='manages' component={Manage} /> - <Route path='creates/:createId' component={Create} /> - <Route path='dashboard' component={Dashboard} /> + <Route path='manager' component={BlogManager} /> + <Route path='editor/:id' component={Editor} /> <Route path='about' component={About} /> </Route> </Route>