Refactor

src/components/Button/index.js

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

src/components/Editor/Editor.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import MarkdownEditor from '../../components/MarkdownEditor';
+
+import {
+  updateText,
+  replaceText,
+} from '../../actions';
+
+import constants from '../../constants';
+
+import styles from './Editor.scss';
+
+class Editor extends Component {
+  static propTypes = {
+    editMarkdown: React.PropTypes.func.isRequired,
+    text: React.PropTypes.string,
+    replaceText: React.PropTypes.func.isRequired,
+    showHistorySidebar: React.PropTypes.bool.isRequired,
+  }
+
+  render() {
+    return (
+      <div className={styles.container}>
+        <div className={ styles.markdown }>
+          <MarkdownEditor
+            onChange={this.props.editMarkdown}
+            text={this.props.text}
+            replaceText={this.props.replaceText}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    text: state.text.text,
+    editor: state.editor,
+    showHistorySidebar: state.historySidebar.visible,
+    revisions: state.text.revisions,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    editMarkdown: (text) => {
+      dispatch(updateText(text, 'markdown'));
+    },
+  };
+};
+
+Editor = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Editor);
+
+export default Editor;

src/components/Editor/Editor.scss

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  padding-top: 48px;
+}
+
+.panel {
+  width: 50%;
+}
+
+.fullscreen {
+  width: 100%;
+}
+
+.markdown {
+  background-color: #ffffff;
+}

src/components/Editor/index.js

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

src/components/Layout/Layout.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import styles from './Layout.scss';
+
+class Layout extends React.Component {
+  static propTypes = {
+
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.header }>
+          <div className={ styles.teamName }>Coinbase</div>
+          <div className={ styles.user }>
+            <img src={ this.props.avatarUrl } />
+          </div>
+        </div>
+        <div className={ styles.content }>
+          { this.props.children }
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    avatarUrl: state.user ? state.user.avatarUrl : null,
+  }
+};
+
+export default connect(mapStateToProps)(Layout);

src/components/Layout/Layout.scss

@@ -0,0 +1,35 @@
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+
+  height: 42px;
+  border-bottom: 1px solid #eee;
+}
+
+.teamName {
+  font-family: 'Atlas Grotesk';
+  font-weight: bold;
+}
+
+.user {
+
+  img {
+    height: 24px;
+    width: 24px;
+    border-radius: 12px;
+  }
+}
+
+.content {
+  flex: 1;
+}

src/components/Layout/index.js

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

src/components/MarkdownEditor/codemirror.scss

@@ -0,0 +1,66 @@
+/*
+
+    Name:       Base16 Default Light
+    Author:     Chris Kempson (http://chriskempson.com)
+
+    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
+    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+
+:global {
+  /* Custom styling */
+  .cm-s-atlas.CodeMirror {
+    background: #ffffff;
+    color: #202020;
+    font-family: 'Atlas Typewriter', 'Cousine', 'Monaco', monospace;
+    font-weight: 300;
+    height: auto;
+  }
+  .cm-s-atlas div.CodeMirror-selected {
+    background: #90CAF9;
+  }
+
+  /* Disable ondrag cursor for file uploads */
+  .cm-s-atlas div.CodeMirror-dragcursors {
+    visibility: hidden;
+  }
+
+  .cm-s-atlas .CodeMirror-line::selection,
+  .cm-s-atlas .CodeMirror-line > span::selection,
+  .cm-s-atlas .CodeMirror-line > span > span::selection {
+    background: #90CAF9;
+  }
+
+  .cm-s-atlas .CodeMirror-line::-moz-selection, .cm-s-atlas .CodeMirror-line > span::-moz-selection, .cm-s-atlas .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
+  .cm-s-atlas .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; }
+  .cm-s-atlas .CodeMirror-guttermarker { color: #ac4142; }
+  .cm-s-atlas .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
+  .cm-s-atlas .CodeMirror-linenumber { color: #b0b0b0; }
+  .cm-s-atlas .CodeMirror-cursor {
+    border-left: 2px solid #2196F3;
+  }
+
+  .cm-s-atlas span.cm-quote {
+    font-style: italic;
+  }
+  .cm-s-atlas span.cm-comment { color: #8f5536; }
+  .cm-s-atlas span.cm-atom { color: #aa759f; }
+  .cm-s-atlas span.cm-number { color: #aa759f; }
+
+  .cm-s-atlas span.cm-property, .cm-s-atlas span.cm-attribute { color: #90a959; }
+  .cm-s-atlas span.cm-keyword { color: #ac4142; }
+  .cm-s-atlas span.cm-string { color: #f4bf75; }
+
+  .cm-s-atlas span.cm-variable { color: #90a959; }
+  .cm-s-atlas span.cm-variable-2 { color: #788696; }
+  .cm-s-atlas span.cm-def { color: #d28445; }
+  .cm-s-atlas span.cm-bracket { color: #202020; }
+  .cm-s-atlas span.cm-tag { color: #ac4142; }
+  .cm-s-atlas span.cm-link { color: #aa759f; }
+  .cm-s-atlas span.cm-error { background: #ac4142; color: #505050; }
+
+  .cm-s-atlas .CodeMirror-activeline-background { background: #DDDCDC; }
+  .cm-s-atlas .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
+  .cm-s-atlas .CodeMirror-placeholder { color: rgba(0, 0, 0, 0.5); font-weight: bold; }
+}

src/components/Preview/index.js

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

src/components/SlackAuthLink/SlackAuthLink.js

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import styles from './SlackAuthLink.scss';
+
+export default class SlackAuthLink extends React.Component {
+  static propTypes = {
+    scopes: React.PropTypes.arrayOf(React.PropTypes.string),
+  }
+
+  state = {
+    oauthState: Math.random().toString(36).substring(7),
+  }
+
+  static defaultProps = {
+    scopes: ['identify']
+  }
+
+  componentDidMount = () => {
+    localStorage.oauthState = this.state.oauthState;
+  }
+
+  slackUrl = () => {
+    const baseUrl = 'https://slack.com/oauth/authorize';
+    const params = {
+      client_id: '30086650419.30130733398',
+      scope: this.props.scopes.join(" "),
+      redirect_uri: 'http://localhost:3000/auth/slack/',
+      state: this.state.oauthState,
+    };
+
+    const urlParams = Object.keys(params).map(function(key) {
+        return key + '=' + encodeURIComponent(params[key]);
+    }).join('&');
+
+    return `${baseUrl}?${urlParams}`;
+  }
+
+  render() {
+    return (
+      <a href={ this.slackUrl() } className={ styles.link }>Authorize /w Slack</a>
+    )
+  }
+}

src/components/SlackAuthLink/SlackAuthLink.scss

@@ -0,0 +1,6 @@
+.link {
+  text-decoration: none;
+  background: no-repeat left/10% url(./assets/slack_icon.svg);
+  padding: 5px 0 4px 36px;
+  font-size: 1.4em;
+}

src/components/SlackAuthLink/assets/slack_icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="148px" height="147px" viewBox="0 0 148 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path d="M12.997,77.78 C7.503,77.822 2.849,74.548 1.133,69.438 C1.067,69.24 1.01,69.048 0.955,68.855 C-0.915,62.311 2.711,55.465 9.21,53.273 L113.45,18.35 C114.717,17.987 115.993,17.802 117.257,17.794 C122.897,17.75 127.679,21.096 129.437,26.314 L129.593,26.818 C131.543,33.634 126.698,39.718 120.893,41.668 C120.889,41.671 119.833,42.028 17.231,77.059 C15.844,77.53 14.421,77.768 12.997,77.78 L12.997,77.78 L12.997,77.78 Z" fill="#70CADB"></path>
+                    <path d="M30.372,129.045 C24.835,129.085 20.165,125.857 18.469,120.82 C18.405,120.628 18.344,120.435 18.289,120.241 C16.393,113.619 20.015,106.701 26.536,104.506 L130.78,69.263 C132.127,68.813 133.518,68.583 134.917,68.57 C140.469,68.528 145.347,71.92 147.068,77.014 L147.228,77.544 C148.235,81.065 147.64,85.022 145.638,88.145 C144.146,90.467 139.44,92.511 139.44,92.511 L34.8,128.29 C33.342,128.777 31.855,129.034 30.372,129.047 L30.372,129.045 L30.372,129.045 Z" fill="#E01765"></path>
+                    <path d="M117.148,129.268 C111.588,129.311 106.665,125.803 104.893,120.545 L70.103,17.205 L69.929,16.625 C68.044,10.035 71.669,3.161 78.166,0.971 C79.466,0.534 80.81,0.306 82.163,0.294 C84.173,0.279 86.118,0.732 87.95,1.637 C91.013,3.162 93.304,5.787 94.399,9.029 L129.186,112.36 L129.287,112.692 C131.241,119.534 127.624,126.412 121.127,128.602 C119.84,129.031 118.5,129.256 117.148,129.268 L117.148,129.268 L117.148,129.268 Z" fill="#E8A723"></path>
+                    <path d="M65.435,146.674 C59.875,146.717 54.948,143.209 53.175,137.944 L18.394,34.608 C18.334,34.418 18.274,34.228 18.216,34.033 C16.336,27.445 19.95,20.57 26.445,18.378 C27.74,17.948 29.079,17.721 30.43,17.71 C35.991,17.666 40.915,21.173 42.687,26.433 L77.469,129.773 C77.534,129.953 77.593,130.152 77.646,130.342 C79.53,136.935 75.914,143.814 69.409,146.006 C68.117,146.437 66.78,146.662 65.431,146.673 L65.435,146.673 L65.435,146.674 Z" fill="#3EB890"></path>
+                    <path d="M99.997,105.996 L124.255,97.702 L116.325,74.152 L92.039,82.359 L99.997,105.996 L99.997,105.996 Z" fill="#CC2027"></path>
+                    <path d="M48.364,123.65 L72.62,115.357 L64.63,91.627 L40.35,99.837 L48.364,123.65 L48.364,123.65 Z" fill="#361238"></path>
+                    <path d="M82.727,54.7 L106.987,46.417 L99.15,23.142 L74.845,31.285 L82.727,54.7 L82.727,54.7 Z" fill="#65863A"></path>
+                    <path d="M31.088,72.33 L55.348,64.047 L47.415,40.475 L23.11,48.617 L31.088,72.33 L31.088,72.33 Z" fill="#1A937D"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/SlackAuthLink/index.js

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