second commit :S

package.json

@@ -34,6 +34,7 @@
     "babel-preset-react-hmre": "^1.0.1",
     "babel-preset-stage-0": "^6.5.0",
     "body-parser": "^1.15.0",
+    "classnames": "^2.2.3",
     "codemirror": "^5.11.0",
     "cross-env": "^1.0.7",
     "css-loader": "^0.23.1",
@@ -56,8 +57,11 @@
     "react-redux": "^4.4.0",
     "react-router": "^2.0.0",
     "redux": "^3.3.1",
+    "redux-storage": "^3.0.0",
+    "redux-storage-engine-localstorage": "^1.0.0",
     "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
+    "sw-toolbox": "^3.1.1",
     "to-markdown": "^2.0.1",
     "webpack": "^1.12.12",
     "webpack-dev-middleware": "^1.5.1",

src/Actions/index.js

@@ -6,6 +6,7 @@ import keyMirror from 'fbjs/lib/keyMirror';
 
 export const UPDATE_TEXT = 'UPDATE_TEXT';
 export const TOGGLE_EDITORS = 'TOGGLE_EDITORS';
+export const TOGGLE_HISTORY_SIDEBAR = 'TOGGLE_HISTORY_SIDEBAR';
 
 /*
  * Other Constants
@@ -27,3 +28,7 @@ export function updateText(text, editor) {
 export function toggleEditors(toggledEditor) {
   return { type: TOGGLE_EDITORS, toggledEditor };
 }
+
+export function toggleHistorySidebar() {
+  return { type: TOGGLE_HISTORY_SIDEBAR };
+}

src/Components/Header/Header.js

@@ -1,12 +1,14 @@
 import React from 'react';
 
 import styles from './Header.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
 
-const Header = ({ activeEditors, toggleEditors }) => {
+const Header = ({ activeEditors, toggleEditors, showHistorySidebar, toggleHistorySidebar }) => {
   return (
     <div className={ styles.header }>
       <div className={ styles.headerItem }><i>Beautiful</i> Atlas</div>
-      <div className={ `${styles.headerItem} ${styles.editorToggle}` }>
+      <div className={ cx('headerItem', 'editorToggle') }>
         <span
           onClick={toggleEditors.bind(this, 'MARKDOWN')}
           className={ activeEditors.includes('MARKDOWN') ? styles.active : '' }
@@ -16,9 +18,19 @@ const Header = ({ activeEditors, toggleEditors }) => {
           className={ activeEditors.includes('TEXT') ? styles.active : '' }
         >Text</span>
       </div>
-      <div className={ styles.headerItem }>Versions</div>
+      <div className={ cx('headerItem', 'sidebar') }>
+        <span
+          onClick={toggleHistorySidebar}
+          className={ showHistorySidebar ? styles.active : '' }
+        >History</span>
+      </div>
     </div>
   );
 };
 
+Header.propTypes = {
+  showHistorySidebar: React.PropTypes.bool.isRequired,
+  toggleHistorySidebar: React.PropTypes.func.isRequired,
+}
+
 export default Header;

src/Components/Header/Header.scss

@@ -40,6 +40,13 @@
     }
   }
 
+  .sidebar {
+    span {
+      margin-right: 12px;
+      cursor: pointer;
+    }
+  }
+
   .active {
     text-decoration: underline;
     text-decoration-color: #fff;

src/Components/HistorySidebar/HistorySidebar.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './HistorySidebar.scss';
+
+class HistorySidebar extends React.Component {
+  render() {
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.header }>
+          Revisions
+        </div>
+      </div>
+    );
+  }
+};
+
+export default HistorySidebar;

src/Components/HistorySidebar/HistorySidebar.scss

@@ -0,0 +1,12 @@
+.container {
+  width: 200px;
+
+  background-color: #FBFBFB;
+  border-left: 1px solid #f0f0f0;
+
+  font-size: 12px;
+}
+
+.header {
+  padding: 20px 10px;
+}

src/Components/HistorySidebar/index.js

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

src/Reducers/index.js

@@ -4,10 +4,11 @@ import { combineReducers } from 'redux';
 import {
   UPDATE_TEXT,
   TOGGLE_EDITORS,
+  TOGGLE_HISTORY_SIDEBAR,
   ActiveEditors,
 } from '../Actions';
 
-function activeEditors(state = [ActiveEditors.MARKDOWN, ActiveEditors.TEXT], action) {
+const activeEditors = (state = [ActiveEditors.MARKDOWN, ActiveEditors.TEXT], action) => {
   switch (action.type) {
     case TOGGLE_EDITORS: {
       const newState = _.xor(state, [action.toggledEditor]);
@@ -22,7 +23,20 @@ function activeEditors(state = [ActiveEditors.MARKDOWN, ActiveEditors.TEXT], act
   }
 }
 
-function text(state = '', action) {
+const historySidebar = (state = { visible: false }, action) => {
+  switch (action.type) {
+    case TOGGLE_HISTORY_SIDEBAR: {
+      return {
+        ...state,
+        visible: !state.visible,
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+const text = (state = '', action) => {
   switch (action.type) {
     case UPDATE_TEXT:
       return action.text;
@@ -31,9 +45,8 @@ function text(state = '', action) {
   }
 }
 
-const application = combineReducers({
+export default combineReducers({
   activeEditors,
+  historySidebar,
   text,
 });
-
-export default application;

src/Views/App/App.js

@@ -4,7 +4,10 @@ import { connect } from 'react-redux';
 import 'normalize.css/normalize.css';
 import styles from './App.scss';
 
-import { toggleEditors } from '../../Actions';
+import {
+  toggleEditors,
+  toggleHistorySidebar,
+ } from '../../Actions';
 
 import Header from '../../Components/Header';
 
@@ -13,17 +16,18 @@ import Auth from '../../Utils/Auth';
 class App extends Component {
   static propTypes = {
     children: React.PropTypes.element,
-    activeEditors: React.PropTypes.isRequired,
+    activeEditors: React.PropTypes.array.isRequired,
     toggleEditors: React.PropTypes.func.isRequired,
+    showHistorySidebar: React.PropTypes.bool.isRequired,
+    toggleHistorySidebar: React.PropTypes.func.isRequired,
   }
 
-  static defaultProps = {}
-
   state = {
     loggedIn: Auth.loggedIn(),
   }
 
   componentWillMount = () => {
+    console.log(this.props);
     Auth.onChange = this.updateAuth;
   }
 
@@ -44,6 +48,8 @@ class App extends Component {
         <Header
           activeEditors={this.props.activeEditors}
           toggleEditors={this.props.toggleEditors}
+          showHistorySidebar={this.props.showHistorySidebar}
+          toggleHistorySidebar={this.props.toggleHistorySidebar}
         />
         <div className={ styles.content }>
           { this.props.children }
@@ -56,6 +62,7 @@ class App extends Component {
 const mapStateToProps = (state) => {
   return {
     activeEditors: state.activeEditors,
+    showHistorySidebar: state.historySidebar.visible,
   };
 };
 
@@ -64,6 +71,9 @@ const mapDispatchToProps = (dispatch) => {
     toggleEditors: (toggledEditor) => {
       dispatch(toggleEditors(toggledEditor));
     },
+    toggleHistorySidebar: () => {
+      dispatch(toggleHistorySidebar());
+    }
   };
 };
 

src/Views/Dashboard/Dashboard.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import MarkdownEditor from '../../Components/MarkdownEditor';
 import TextEditor from '../../Components/TextEditor';
+import HistorySidebar from '../../Components/HistorySidebar';
 
 import { toMarkdown } from '../../Utils/Markdown';
 import { updateText } from '../../Actions';
@@ -14,7 +15,8 @@ class Dashboard extends Component {
     editMarkdown: React.PropTypes.func.isRequired,
     editText: React.PropTypes.func.isRequired,
     text: React.PropTypes.string,
-    activeEditors: React.PropTypes.array,
+    activeEditors: React.PropTypes.arrayOf(React.PropTypes.string),
+    showHistorySidebar: React.PropTypes.bool.isRequired,
   }
 
   // componentDidMount = () => {
@@ -25,6 +27,7 @@ class Dashboard extends Component {
   // }
 
   render() {
+    console.log(this.props.showHistorySidebar);
     const activeEditors = this.props.activeEditors;
 
     return (
@@ -47,6 +50,13 @@ class Dashboard extends Component {
             </div>
           ) : null
         }
+        {
+          this.props.showHistorySidebar ?
+            <div className={styles.sidebar}>
+              <HistorySidebar />
+            </div>
+            : null
+        }
       </div>
     );
   }
@@ -57,6 +67,7 @@ const mapStateToProps = (state) => {
     text: state.text,
     editor: state.editor,
     activeEditors: state.activeEditors,
+    showHistorySidebar: state.historySidebar.visible,
   };
 };
 

src/index.js

@@ -2,7 +2,9 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router, Route } from 'react-router';
-import { createStore, compose } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
+import * as storage from 'redux-storage';
+import createEngine from 'redux-storage-engine-localstorage';
 import History from './Utils/History';
 
 import Auth from './Utils/Auth';
@@ -13,12 +15,17 @@ import App from './Views/App';
 import Login from './Views/Login';
 import Dashboard from './Views/Dashboard';
 
-const store = createStore(
-  reducers,
-  compose(
-    window.devToolsExtension ? window.devToolsExtension() : f => f
-  )
-);
+const reducer = storage.reducer(reducers);
+const engine = createEngine('atlas-store');
+const storageMiddleware = storage.createMiddleware(engine);
+
+const createStoreWithMiddleware = applyMiddleware(storageMiddleware)(createStore);
+const store = createStoreWithMiddleware(reducer);
+
+const load = storage.createLoader(engine);
+load(store)
+  .then((newState) => console.log('Loaded state:', newState))
+  .catch(() => console.log('Failed to load previous state'));
 
 function requireAuth(nextState, replace) {
   if (!Auth.loggedIn()) {