Initial commit

src/Views/App/App.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import 'normalize.css/normalize.css';
+import styles from './App.scss';
+
+import { toggleEditors } from '../../Actions';
+
+import Header from '../../Components/Header';
+
+import Auth from '../../Utils/Auth';
+
+class App extends Component {
+  static propTypes = {
+    children: React.PropTypes.element,
+    activeEditors: React.PropTypes.isRequired,
+    toggleEditors: React.PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {}
+
+  state = {
+    loggedIn: Auth.loggedIn(),
+  }
+
+  componentWillMount = () => {
+    Auth.onChange = this.updateAuth;
+  }
+
+  updateAuth = (loggedIn) => {
+    this.setState({
+      loggedIn,
+    });
+  }
+
+  logout = () => {
+    // TODO: Replace with Redux actions
+    Auth.logout();
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <Header
+          activeEditors={this.props.activeEditors}
+          toggleEditors={this.props.toggleEditors}
+        />
+        <div className={ styles.content }>
+          { this.props.children }
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    activeEditors: state.activeEditors,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    toggleEditors: (toggledEditor) => {
+      dispatch(toggleEditors(toggledEditor));
+    },
+  };
+};
+
+App = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(App);
+
+export default App;
+
+// {this.state.loggedIn ? (
+//   <a href="#" onClick={this.logout}>Logout</a>
+// ) : (
+//   <Link to="/login">Login</Link>
+// )}

src/Views/App/App.scss

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  height: 100%;
+
+  background-color: #fff;
+  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
+  color: #222;
+}
+
+.content {
+}

src/Views/App/index.js

@@ -0,0 +1,2 @@
+import App from './App';
+export default App;

src/Views/Dashboard/Dashboard.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import MarkdownEditor from '../../Components/MarkdownEditor';
+import TextEditor from '../../Components/TextEditor';
+
+import { toMarkdown } from '../../Utils/Markdown';
+import { updateText } from '../../Actions';
+
+import styles from './Dashboard.scss';
+
+class Dashboard extends Component {
+  static propTypes = {
+    editMarkdown: React.PropTypes.func.isRequired,
+    editText: React.PropTypes.func.isRequired,
+    text: React.PropTypes.string,
+    activeEditors: React.PropTypes.array,
+  }
+
+  // componentDidMount = () => {
+  //   client.get('/user')
+  //   .then(data => {
+  //     this.setState({ user: data });
+  //   });
+  // }
+
+  render() {
+    const activeEditors = this.props.activeEditors;
+
+    return (
+      <div className={ styles.container }>
+        {
+          activeEditors.includes('MARKDOWN') ? (
+            <div className={ `${activeEditors.length > 1 ?
+                styles.panel : styles.fullscreen} ${styles.markdown}`}
+            >
+              <MarkdownEditor onChange={this.props.editMarkdown} text={this.props.text} />
+            </div>
+          ) : null
+        }
+        {
+          activeEditors.includes('TEXT') ? (
+            <div className={ `${activeEditors.length > 1 ?
+                styles.panel : styles.fullscreen} ${styles.text}`}
+            >
+              <TextEditor onChange={this.props.editText} text={this.props.text} />
+            </div>
+          ) : null
+        }
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    text: state.text,
+    editor: state.editor,
+    activeEditors: state.activeEditors,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    editMarkdown: (text) => {
+      dispatch(updateText(text, 'markdown'));
+    },
+    editText: (html) => {
+      const text = toMarkdown(html);
+      dispatch(updateText(text, 'text'));
+    },
+  };
+};
+
+Dashboard = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Dashboard);
+
+export default Dashboard;

src/Views/Dashboard/Dashboard.scss

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+}
+
+.panel {
+  width: 50%;
+}
+
+.fullscreen {
+  width: 100%;
+}
+
+.markdown {
+  background-color: #fbfbfb;
+}

src/Views/Dashboard/index.js

@@ -0,0 +1,2 @@
+import Dashboard from './Dashboard';
+export default Dashboard;

src/Views/Login/Login.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+
+import Auth from '../../Utils/Auth';
+
+export default class Login extends Component {
+  static propTypes = {
+    location: React.PropTypes.object,
+  }
+
+  static contextTypes = {
+    router: React.PropTypes.object.isRequired,
+  }
+
+  state = {
+    email: '',
+    password: '',
+    error: null,
+  }
+
+  handleEmailChange = (event) => {
+    this.setState({ email: event.target.value });
+  }
+
+  handlePasswordChange = (event) => {
+    this.setState({ password: event.target.value });
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+
+    Auth.login(this.state.email, this.state.password)
+    .then(() => {
+      const { location } = this.props;
+
+      if (location.state && location.state.nextPathname) {
+        this.context.router.replace(location.state.nextPathname);
+      } else {
+        this.context.router.replace('/dashboard');
+      }
+    })
+    .catch((err) => {
+      this.setState({ error: err.error });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Login</h2>
+        <form action="" onSubmit={ this.handleSubmit }>
+          {this.state.error && (
+            <p>{ this.state.error }</p>
+          )}
+
+          <div>
+            <input
+              placeholder={ 'Email' }
+              onChange={ this.handleEmailChange }
+            />
+          </div>
+          <div>
+            <input
+              placeholder={ 'Password' }
+              type={ 'password' }
+              onChange={ this.handlePasswordChange }
+            />
+          </div>
+          <div>
+            <input type={ 'submit' } />
+          </div>
+        </form>
+      </div>
+    );
+  }
+}

src/Views/Login/index.js

@@ -0,0 +1,2 @@
+import Login from './Login';
+export default Login;