From 44e57f64dd8b00900c31d7fd56fda94f4e69e986 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 25 Aug 2016 19:52:55 +0200 Subject: [PATCH] Improving statuses, adding a composer drawer, which doesn't work yet --- .../components/actions/statuses.jsx | 15 ++++++ .../components/components/button.jsx | 22 +++++++++ .../components/character_counter.jsx | 16 +++++++ .../components/components/column.jsx | 2 +- .../components/components/composer_drawer.jsx | 46 +++++++++++++++++++ .../components/components/display_name.jsx | 2 +- .../components/components/frontend.jsx | 6 ++- .../components/components/nav_bar.jsx | 6 ++- .../components/relative_timestamp.jsx | 2 +- .../components/components/status.jsx | 2 +- .../containers/composer_drawer_container.jsx | 17 +++++++ .../components/store/configureStore.jsx | 7 +-- config/initializers/doorkeeper.rb | 2 +- package.json | 5 +- 14 files changed, 138 insertions(+), 12 deletions(-) create mode 100644 app/assets/javascripts/components/components/button.jsx create mode 100644 app/assets/javascripts/components/components/character_counter.jsx create mode 100644 app/assets/javascripts/components/components/composer_drawer.jsx create mode 100644 app/assets/javascripts/components/containers/composer_drawer_container.jsx diff --git a/app/assets/javascripts/components/actions/statuses.jsx b/app/assets/javascripts/components/actions/statuses.jsx index 21821b8ba..fece257d5 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 000000000..b2d7ba9a9 --- /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 000000000..b58d9fe32 --- /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 c585b6b0b..c1f5b84a2 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 000000000..d33e28219 --- /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 ( +
+