diff --git a/app/assets/javascripts/components/actions/statuses.jsx b/app/assets/javascripts/components/actions/statuses.jsx index 21821b8ba1..fece257d58 100644 --- a/app/assets/javascripts/components/actions/statuses.jsx +++ b/app/assets/javascripts/components/actions/statuses.jsx @@ -1,5 +1,8 @@ +import fetch from 'isomorphic-fetch' + export const SET_TIMELINE = 'SET_TIMELINE'; export const ADD_STATUS = 'ADD_STATUS'; +export const PUBLISH = 'PUBLISH'; export function setTimeline(timeline, statuses) { return { @@ -16,3 +19,15 @@ export function addStatus(timeline, status) { status: status }; } + +export function publish(text, in_reply_to_id) { + return function (dispatch) { + return fetch('/api/statuses', { + method: 'POST' + }).then(function (response) { + return response.json(); + }).then(function (json) { + console.log(json); + }); + }; +} diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx new file mode 100644 index 0000000000..b2d7ba9a9e --- /dev/null +++ b/app/assets/javascripts/components/components/button.jsx @@ -0,0 +1,22 @@ +const Button = React.createClass({ + propTypes: { + text: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func + }, + + handleClick (e) { + e.preventDefault(); + this.props.onClick(); + }, + + render () { + return ( + + {this.props.text} + + ); + } + +}); + +export default Button; diff --git a/app/assets/javascripts/components/components/character_counter.jsx b/app/assets/javascripts/components/components/character_counter.jsx new file mode 100644 index 0000000000..b58d9fe321 --- /dev/null +++ b/app/assets/javascripts/components/components/character_counter.jsx @@ -0,0 +1,16 @@ +const CharacterCounter = React.createClass({ + propTypes: { + text: React.PropTypes.string.isRequired + }, + + render () { + return ( + + {this.props.text.length} + + ); + } + +}); + +export default CharacterCounter; diff --git a/app/assets/javascripts/components/components/column.jsx b/app/assets/javascripts/components/components/column.jsx index c585b6b0b8..c1f5b84a26 100644 --- a/app/assets/javascripts/components/components/column.jsx +++ b/app/assets/javascripts/components/components/column.jsx @@ -8,7 +8,7 @@ const Column = React.createClass({ render: function() { return ( -
+
diff --git a/app/assets/javascripts/components/components/composer_drawer.jsx b/app/assets/javascripts/components/components/composer_drawer.jsx new file mode 100644 index 0000000000..d33e28219b --- /dev/null +++ b/app/assets/javascripts/components/components/composer_drawer.jsx @@ -0,0 +1,46 @@ +import CharacterCounter from './character_counter'; +import Button from './button'; +import { publish } from '../actions/statuses'; + +const ComposerDrawer = React.createClass({ + + propTypes: { + onSubmit: React.PropTypes.func.isRequired + }, + + getInitialState() { + return { + text: '' + }; + }, + + handleChange (e) { + this.setState({ text: e.target.value }); + }, + + handleKeyUp (e) { + if (e.keyCode === 13 && e.ctrlKey) { + this.handleSubmit(); + } + }, + + handleSubmit () { + this.props.onSubmit(this.state.text, null); + }, + + render () { + return ( +
+