sup
This commit is contained in:
parent
4a42f28583
commit
f6456a3817
|
@ -0,0 +1,9 @@
|
|||
[ignore]
|
||||
.*/dist/.*
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
|
||||
node_modules/*
|
||||
[options]
|
|
@ -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() {
|
||||
return { type: TOGGLE_HISTORY_SIDEBAR };
|
||||
export function addRevision(createdAt) {
|
||||
return { type: ADD_REVISION, createdAt };
|
||||
}
|
||||
|
|
|
@ -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
|
||||
onClick={toggleHistorySidebar}
|
||||
className={ showHistorySidebar ? styles.active : '' }
|
||||
>History</span>
|
||||
<span onClick={addRevision.bind(this, (new Date()).toISOString())}>Save</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Header.propTypes = {
|
||||
showHistorySidebar: React.PropTypes.bool.isRequired,
|
||||
toggleHistorySidebar: React.PropTypes.func.isRequired,
|
||||
}
|
||||
activeEditors: React.PropTypes.array.isRequired,
|
||||
toggleEditors: React.PropTypes.func.isRequired,
|
||||
addRevision: React.PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
|
@ -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;
|
|
@ -1,12 +0,0 @@
|
|||
.container {
|
||||
width: 200px;
|
||||
|
||||
background-color: #FBFBFB;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 10px;
|
||||
}
|
|
@ -1,2 +0,0 @@
|
|||
import HistorySidebar from './HistorySidebar';
|
||||
export default HistorySidebar;
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
toggleHistorySidebar: React.PropTypes.func.isRequired,
|
||||
addRevision: 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}
|
||||
toggleHistorySidebar={this.props.toggleHistorySidebar}
|
||||
addRevision={this.props.addRevision}
|
||||
/>
|
||||
<div className={ styles.content }>
|
||||
{ this.props.children }
|
||||
|
@ -71,9 +68,9 @@ const mapDispatchToProps = (dispatch) => {
|
|||
toggleEditors: (toggledEditor) => {
|
||||
dispatch(toggleEditors(toggledEditor));
|
||||
},
|
||||
toggleHistorySidebar: () => {
|
||||
dispatch(toggleHistorySidebar());
|
||||
}
|
||||
addRevision: () => {
|
||||
dispatch(addRevision());
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -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)
|
||||
.then((newState) => console.log('Loaded state:', newState))
|
||||
.catch(() => console.log('Failed to load previous state'));
|
||||
load(store);
|
||||
// .then((newState) => console.log('Loaded state:', newState));
|
||||
// .catch(() => console.log('Failed to load previous state'));
|
||||
|
||||
// React router
|
||||
|
||||
|
|
Reference in New Issue