Refactor

src/scenes/App/App.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import 'normalize.css/normalize.css';
+import '../../fonts/atlas/atlas.css';
+import styles from './App.scss';
+
+import {
+  toggleEditors,
+  addRevision,
+ } from '../../actions';
+
+import Header from '../../components/Header';
+import Editor from '../../components/Editor';
+
+class App extends Component {
+  static propTypes = {
+    children: React.PropTypes.element,
+    addRevision: React.PropTypes.func.isRequired,
+    unsavedChanges: React.PropTypes.bool.isRequired,
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <Header
+          activeEditors={this.props.activeEditors}
+          addRevision={this.props.addRevision}
+          unsavedChanges={this.props.unsavedChanges}
+        />
+        <div className={ styles.content }>
+          <Editor />
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    activeEditors: state.activeEditors,
+    unsavedChanges: state.text.unsavedChanges,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    addRevision: () => {
+      dispatch(addRevision());
+    },
+  };
+};
+
+App = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(App);
+
+export default App;

src/scenes/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/scenes/App/index.js

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

src/scenes/Dashboard/Dashboard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { replace } from 'react-router-redux';
+
+import { client } from 'utils/ApiClient';
+
+import Layout from 'components/Layout';
+import styles from './Dashboard.scss';
+
+class Dashboard extends React.Component {
+  static propTypes = {
+    replace: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return (
+      <Layout
+        header={<div>header!</div>}
+      >
+        holla!
+      </Layout>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({ replace }, dispatch)
+}
+
+export default connect(
+  null, mapDispatchToProps
+)(Dashboard);

src/scenes/Dashboard/index.js

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

src/scenes/Home/Home.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { replace } from 'react-router-redux';
+
+import auth from '../../utils/auth';
+
+import SlackAuthLink from '../../components/SlackAuthLink';
+
+import styles from './Home.scss';
+
+class Home extends React.Component {
+  static propTypes = {
+    replace: React.PropTypes.func.isRequired,
+  }
+
+  componentDidMount = () => {
+    if (auth.loggedIn()) {
+      this.props.replace('/dashboard');
+    }
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.content }>
+          <div className={ styles.intro }>
+            <p>
+              Hi there,
+            </p>
+            <p>
+              We're building the best place for engineers, designers and teams to
+              share ideas, tell stories and build knowledge.
+            </p>
+            <p>
+              <strong>**Atlas**</strong> can start as a wiki, but it's really
+              up to you what you want to make of it:
+            </p>
+            <p>
+              - Write documentation in <i>_markdown_</i><br/>
+              - Build a blog around the API<br/>
+              - Hack the frontend for your needs (coming!)<br/>
+            </p>
+            <p>
+              We're just getting started.
+            </p>
+          </div>
+          <div className={ styles.action }>
+            <SlackAuthLink />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({ replace }, dispatch)
+}
+
+export default connect(
+  null, mapDispatchToProps
+)(Home);

src/scenes/Home/Home.scss

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+}
+
+.content {
+  margin: 40px;
+  max-width: 640px;
+}
+
+.intro {
+  font-family: "Atlas Typewriter", Monaco, monospace;
+  font-size: 1.4em;
+  line-height: 1.6em;
+  margin-bottom: 40px;
+}

src/scenes/Home/animation.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Frame } from 'react-keyframes';
+
+let frames = [];
+const p = (node) => frames.push(node);
+const E = (props) => {
+  return (<Frame duration={props.duration || 300} component='div'>{ props.children }</Frame>);
+};
+
+const line1 = (<p>Hi there,</p>);
+const line2 = (<p>We're excited to share what we’re building.</p>);
+const line3 = (<p>We <strong>**love**</strong> Markdown,</p>);
+const line4 = (<p>but we also get that it's not for everyone.</p>);
+const line5 = (<p>Together with you,</p>);
+const line6 = (<p>we want to build the best place to</p>);
+const line7 = (<p>share ideas,</p>);
+const line8 = (<p>tell stories,</p>);
+const line9 = (<p>and build knowledge.</p>);
+const line10 = (<p>We're just getting started.</p>);
+const line11 = (<p>Welcome to Beautiful Atlas.</p>);
+
+p(<E>{line1}{line2}{line3}{line4}{line5}{line6}{line7}{line8}{line9}{line10}{line11}</E>);
+
+// Hmms leaving this here for now, would be nice to something
+
+export default frames;

src/scenes/Home/index.js

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

src/scenes/SlackAuth/SlackAuth.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { slackAuthAsync } from '../../actions/SlackAuthAction';
+
+import { client } from '../../utils/ApiClient';
+
+class SlackAuth extends React.Component {
+  componentDidMount = () => {
+    const { query } = this.props.location
+
+    // Validate OAuth2 state param
+    if (localStorage.oauthState != query.state) {
+      return;
+    }
+
+    this.props.slackAuthAsync(query.code);
+  }
+
+  render() {
+    return (
+      <div>Loading...</div>
+    );
+  }
+}
+
+const mapDispactcToProps = (dispatch) => {
+  return bindActionCreators({ slackAuthAsync }, dispatch);
+};
+
+export default connect(
+  null,
+  mapDispactcToProps
+)(SlackAuth);

src/scenes/SlackAuth/index.js

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