sup

.flowconfig

@@ -0,0 +1,9 @@
+[ignore]
+.*/dist/.*
+
+[include]
+
+[libs]
+
+node_modules/*
+[options]

src/Actions/index.js

@@ -6,7 +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';
+export const ADD_REVISION = 'ADD_REVISION';
 
 /*
  * Other Constants
@@ -29,6 +29,6 @@ export function toggleEditors(toggledEditor) {
   return { type: TOGGLE_EDITORS, toggledEditor };
 }
 
-export function toggleHistorySidebar() {
+export function addRevision(createdAt) {
-  return { type: TOGGLE_HISTORY_SIDEBAR };
+  return { type: ADD_REVISION, createdAt };
 }

src/Components/Header/Header.js

@@ -4,7 +4,11 @@ import styles from './Header.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
 
-const Header = ({ activeEditors, toggleEditors, showHistorySidebar, toggleHistorySidebar }) => {
+const Header = ({
+                activeEditors,
+                toggleEditors,
+                addRevision,
+              }) => {
   return (
     <div className={ styles.header }>
       <div className={ styles.headerItem }><i>Beautiful</i> Atlas</div>
@@ -19,18 +23,16 @@ const Header = ({ activeEditors, toggleEditors, showHistorySidebar, toggleHistor
         >Text</span>
       </div>
       <div className={ cx('headerItem', 'sidebar') }>
-        <span
+        <span onClick={addRevision.bind(this, (new Date()).toISOString())}>Save</span>
-          onClick={toggleHistorySidebar}
-          className={ showHistorySidebar ? styles.active : '' }
-        >History</span>
       </div>
     </div>
   );
 };
 
 Header.propTypes = {
-  showHistorySidebar: React.PropTypes.bool.isRequired,
+  activeEditors: React.PropTypes.array.isRequired,
-  toggleHistorySidebar: React.PropTypes.func.isRequired,
+  toggleEditors: React.PropTypes.func.isRequired,
-}
+  addRevision: React.PropTypes.func.isRequired,
+};
 
 export default Header;

src/Components/HistorySidebar/HistorySidebar.js

@@ -1,17 +0,0 @@
-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

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

src/Components/HistorySidebar/index.js

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

src/Reducers/index.js

@@ -5,6 +5,7 @@ import {
   UPDATE_TEXT,
   TOGGLE_EDITORS,
   TOGGLE_HISTORY_SIDEBAR,
+  ADD_REVISION,
   ActiveEditors,
 } from '../Actions';
 
@@ -21,7 +22,7 @@ const activeEditors = (state = [ActiveEditors.MARKDOWN, ActiveEditors.TEXT], act
     default:
       return state;
   }
-}
+};
 
 const historySidebar = (state = { visible: false }, action) => {
   switch (action.type) {
@@ -34,16 +35,39 @@ const historySidebar = (state = { visible: false }, action) => {
     default:
       return state;
   }
-}
+};
 
-const text = (state = '', action) => {
+const text = (state = { text: '', revisions: [] }, action) => {
   switch (action.type) {
     case UPDATE_TEXT:
-      return action.text;
+      return {
+        ...state,
+        text: action.text,
+      };
+    case ADD_REVISION: {
+      const lastRevision = _.last(state.revisions);
+      // Create new revision if it differs from the previous one
+      if (!lastRevision || lastRevision.text !== state.text) {
+        const lastId = lastRevision ? lastRevision.id : 0;
+        return {
+          ...state,
+          revisions: [
+            ...state.revisions,
+            {
+              id: lastId + 1,
+              text: state.text,
+              created_at: action.createdAt,
+            },
+          ],
+        };
+      } else {
+        return state;
+      }
+    }
     default:
       return state;
   }
-}
+};
 
 export default combineReducers({
   activeEditors,

src/Utils/Markdown.js

@@ -30,13 +30,11 @@ const ulConverter = {
 };
 
 export function toMarkdown(html) {
-  console.log(html);
   const markdown = toMd(
     html, {
       gfm: true,
       converters: [ liConverter, ulConverter ],
     },
   );
-  console.log(markdown);
   return markdown;
 }

src/Views/App/App.js

@@ -6,7 +6,7 @@ import styles from './App.scss';
 
 import {
   toggleEditors,
-  toggleHistorySidebar,
+  addRevision,
  } from '../../Actions';
 
 import Header from '../../Components/Header';
@@ -18,8 +18,7 @@ class App extends Component {
     children: React.PropTypes.element,
     activeEditors: React.PropTypes.array.isRequired,
     toggleEditors: React.PropTypes.func.isRequired,
-    showHistorySidebar: React.PropTypes.bool.isRequired,
+    addRevision: React.PropTypes.func.isRequired,
-    toggleHistorySidebar: React.PropTypes.func.isRequired,
   }
 
   state = {
@@ -27,7 +26,6 @@ class App extends Component {
   }
 
   componentWillMount = () => {
-    console.log(this.props);
     Auth.onChange = this.updateAuth;
   }
 
@@ -48,8 +46,7 @@ class App extends Component {
         <Header
           activeEditors={this.props.activeEditors}
           toggleEditors={this.props.toggleEditors}
-          showHistorySidebar={this.props.showHistorySidebar}
+          addRevision={this.props.addRevision}
-          toggleHistorySidebar={this.props.toggleHistorySidebar}
         />
         <div className={ styles.content }>
           { this.props.children }
@@ -71,9 +68,9 @@ const mapDispatchToProps = (dispatch) => {
     toggleEditors: (toggledEditor) => {
       dispatch(toggleEditors(toggledEditor));
     },
-    toggleHistorySidebar: () => {
+    addRevision: () => {
-      dispatch(toggleHistorySidebar());
+      dispatch(addRevision());
-    }
+    },
   };
 };
 

src/Views/Dashboard/Dashboard.js

@@ -3,7 +3,6 @@ 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';
@@ -27,7 +26,6 @@ class Dashboard extends Component {
   // }
 
   render() {
-    console.log(this.props.showHistorySidebar);
     const activeEditors = this.props.activeEditors;
 
     return (
@@ -50,13 +48,6 @@ class Dashboard extends Component {
             </div>
           ) : null
         }
-        {
-          this.props.showHistorySidebar ?
-            <div className={styles.sidebar}>
-              <HistorySidebar />
-            </div>
-            : null
-        }
       </div>
     );
   }
@@ -64,10 +55,11 @@ class Dashboard extends Component {
 
 const mapStateToProps = (state) => {
   return {
-    text: state.text,
+    text: state.text.text,
     editor: state.editor,
     activeEditors: state.activeEditors,
     showHistorySidebar: state.historySidebar.visible,
+    revisions: state.text.revisions,
   };
 };
 

src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router, Route } from 'react-router';
-import { createStore, applyMiddleware, compose } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 import * as storage from 'redux-storage';
 import createEngine from 'redux-storage-engine-localstorage';
 import History from './Utils/History';
@@ -25,9 +25,9 @@ const createStoreWithMiddleware = applyMiddleware(storageMiddleware)(createStore
 const store = createStoreWithMiddleware(reducer);
 
 const load = storage.createLoader(engine);
-load(store)
+load(store);
-  .then((newState) => console.log('Loaded state:', newState))
+// .then((newState) => console.log('Loaded state:', newState));
-  .catch(() => console.log('Failed to load previous state'));
+// .catch(() => console.log('Failed to load previous state'));
 
 // React router