+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 {
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);
+ });
+ };
+}
--- /dev/null
+const Button = React.createClass({
+ propTypes: {
+ text: React.PropTypes.string.isRequired,
+ onClick: React.PropTypes.func
+ },
+
+ handleClick (e) {
+ e.preventDefault();
+ this.props.onClick();
+ },
+
+ render () {
+ return (
+ <a href='#' onClick={this.handleClick} style={{ display: 'inline-block', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', backgroundColor: '#2b90d9', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}>
+ {this.props.text}
+ </a>
+ );
+ }
+
+});
+
+export default Button;
--- /dev/null
+const CharacterCounter = React.createClass({
+ propTypes: {
+ text: React.PropTypes.string.isRequired
+ },
+
+ render () {
+ return (
+ <span style={{ fontSize: '16px', cursor: 'default' }}>
+ {this.props.text.length}
+ </span>
+ );
+ }
+
+});
+
+export default CharacterCounter;
render: function() {
return (
- <div style={{ width: '350px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
+ <div style={{ width: '380px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
<ColumnHeader type={this.props.type} />
<StatusListContainer type={this.props.type} />
</div>
--- /dev/null
+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 (
+ <div style={{ width: '230px', background: '#454b5e', margin: '10px 0', padding: '10px' }}>
+ <textarea placeholder='What is on your mind?' value={this.state.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} />
+
+ <div style={{ marginTop: '10px', overflow: 'hidden' }}>
+ <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} /></div>
+ <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.state.text} /></div>
+ </div>
+ </div>
+ );
+ }
+
+});
+
+export default ComposerDrawer;
var url = this.props.account.get('url');
return (
- <a href={url} style={{ color: '#616b86', textDecoration: 'none' }}>
+ <a href={url} style={{ display: 'inline-block', color: '#616b86', textDecoration: 'none', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '190px' }}>
<strong style={{ fontWeight: 'bold', color: '#fff' }}>{displayName}</strong> <span>{acct}</span>
</a>
);
-import NavBar from './nav_bar';
-import ColumnsArea from './columns_area';
+import NavBar from './nav_bar';
+import ColumnsArea from './columns_area';
+import ComposerDrawerContainer from '../containers/composer_drawer_container';
const Frontend = React.createClass({
return (
<div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
<NavBar />
+ <ComposerDrawerContainer />
<ColumnsArea />
</div>
);
const NavBar = React.createClass({
render: function() {
- return <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }} />;
+ return (
+ <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }}>
+
+ </div>
+ );
}
});
d: "a day",
dd: "%dd",
M: "a month",
- MM: "%dm",
+ MM: "%dmo",
y: "a year",
yy: "%dy"
}
var status = this.props.status;
return (
- <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b' }}>
+ <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}>
<Avatar src={status.getIn(['account', 'avatar'])} />
<div style={{ flex: '1 1 auto', marginLeft: '10px' }}>
--- /dev/null
+import { connect } from 'react-redux';
+import ComposerDrawer from '../components/composer_drawer';
+import { publish } from '../actions/statuses';
+
+const mapStateToProps = function (state, props) {
+ return {};
+};
+
+const mapDispatchToProps = function (dispatch) {
+ return {
+ onSubmit: function (text, in_reply_to_id) {
+ dispatch(publish(text, in_reply_to_id));
+ }
+ }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComposerDrawer);
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
import appReducer from '../reducers';
-export default function configureStore(initialState) {
- return createStore(appReducer, initialState);
+export default function configureStore() {
+ return createStore(appReducer, applyMiddleware(thunk));
}
# This block will be called to check whether the resource owner is authenticated or not.
resource_owner_authenticator do
- current_user || redirect_to(new_user_session_url)
+ current_user || warden.authenticate!(scope: :user)
end
resource_owner_from_credentials do |routes|
"redux-devtools": "^3.3.1"
},
"dependencies": {
+ "es6-promise": "^3.2.1",
"immutable": "^3.8.1",
+ "isomorphic-fetch": "^2.2.1",
"moment": "^2.14.1",
"react-immutable-proptypes": "^2.1.0",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
- "redux-immutable": "^3.0.8"
+ "redux-immutable": "^3.0.8",
+ "redux-thunk": "^2.1.0"
}
}
cat aescling's git repositories / mastodon.git / commitdiff