yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Eradicated Redux for MobX

Browse Source
This commit is contained in:
Jori Lallo
2016-06-04 18:28:14 -07:00
parent 19712a41f9
commit c2f1ea22b9
20 changed files with 177 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/scenes/Atlas/Atlas.js
View File

@@ -1,12 +1,8 @@
import React from 'react';
import { observer } from 'mobx-react';
import Link from 'react-router/lib/Link';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { replace } from 'react-router-redux';
import { fetchAtlasAsync } from 'actions/AtlasActions';
// Temp
import { client } from 'utils/ApiClient';
import store from './AtlasStore';
import Layout, { Title, HeaderAction } from 'components/Layout';
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@@ -16,25 +12,20 @@ import Divider from 'components/Divider';
import styles from './Atlas.scss';
@observer
class Atlas extends React.Component {
static propTypes = {
isLoading: React.PropTypes.bool,
atlas: React.PropTypes.object,
}
componentDidMount = () => {
const { id } = this.props.params;
this.props.fetchAtlasAsync(id);
store.fetchAtlas(id);
}
render() {
const atlas = this.props.atlas;
const atlas = store.atlas;
let actions;
let title;
if (!this.props.isLoading) {
if (atlas) {
actions = <HeaderAction>
<Link to={ `/atlas/${atlas.id}/new` }>New document</Link>
</HeaderAction>;
@@ -47,7 +38,7 @@ class Atlas extends React.Component {
title={ title }
>
<CenteredContent>
{ this.props.isLoading ? (
{ store.isFetching ? (
<AtlasPreviewLoading />
) : (
<div className={ styles.container }>
@@ -68,24 +59,4 @@ class Atlas extends React.Component {
);
}
}
const mapStateToProps = (state, currentProps) => {
const id = currentProps.params.id;
return {
isLoading: state.atlases.isLoading,
atlas: state.atlases.entities ? state.atlases.entities.atlases[id] : null, // reselect
}
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
replace,
fetchAtlasAsync,
}, dispatch)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Atlas);
export default Atlas;

25
src/scenes/Atlas/AtlasStore.js Normal file
View File

@@ -0,0 +1,25 @@
import { observable, action } from 'mobx';
import { client } from 'utils/ApiClient';
const store = new class AtlasStore {
@observable atlas;
@observable isFetching;
/* Actions */
@action fetchAtlas = async (id) => {
this.isFetching = true;
try {
const res = await client.post('/atlases.info', { id: id });
const { data } = res;
this.atlas = data;
} catch (e) {
console.error("Something went wrong");
}
this.isFetching = false;
}
}();
export default store;

38
src/scenes/Dashboard/Dashboard.js
View File

@@ -1,7 +1,8 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchAtlasesAsync } from 'actions/AtlasActions';
import { observer } from 'mobx-react';
import userStore from 'stores/UserStore';
import store from './DashboardStore';
import Flex from 'components/Flex';
import Layout from 'components/Layout';
@@ -11,12 +12,10 @@ import CenteredContent from 'components/CenteredContent';
import styles from './Dashboard.scss';
@observer
class Dashboard extends React.Component {
static propTypes = {
}
componentDidMount = () => {
this.props.fetchAtlasesAsync(this.props.teamId);
store.fetchAtlases(userStore.team.id);
}
render() {
@@ -24,10 +23,10 @@ class Dashboard extends React.Component {
<Layout>
<CenteredContent>
<Flex direction="column" flex={ true }>
{ this.props.isLoading ? (
{ store.isFetching ? (
<AtlasPreviewLoading />
) : this.props.items.map((item) => {
return (<AtlasPreview key={ item.id } data={ item } />);
) : store.atlases.map((atlas) => {
return (<AtlasPreview key={ atlas.id } data={ atlas } />);
}) }
</Flex>
</CenteredContent>
@@ -36,21 +35,4 @@ class Dashboard extends React.Component {
}
}
const mapStateToProps = (state) => {
return {
teamId: state.team ? state.team.id : null,
isLoading: state.atlases.isLoading,
items: Array.isArray(state.atlases.result) ? state.atlases.result.map((id) => state.atlases.entities.atlases[id]) : [], // reselect
}
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
fetchAtlasesAsync,
}, dispatch)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Dashboard);
export default Dashboard;

27
src/scenes/Dashboard/DashboardStore.js Normal file
View File

@@ -0,0 +1,27 @@
import { observable, action } from 'mobx';
import { client } from 'utils/ApiClient';
const store = new class DashboardStore {
@observable atlases;
@observable pagination;
@observable isFetching;
/* Actions */
@action fetchAtlases = async (teamId) => {
this.isFetching = true;
try {
const res = await client.post('/atlases.list', { id: teamId });
const { data, pagination } = res;
this.atlases = data;
this.pagination = pagination;
} catch (e) {
console.error("Something went wrong");
}
this.isFetching = false;
}
}();
export default store;

59
src/scenes/DocumentScene/DocumentScene.js
View File

@@ -1,11 +1,8 @@
import React from 'react';
import { connect } from 'react-redux';
import Link from 'react-router/lib/Link';
import { bindActionCreators } from 'redux';
import {
fetchDocumentAsync,
deleteDocument,
} from 'actions/DocumentActions';
import { Link } from 'react-router';
import { observer } from 'mobx-react';
import store from './DocumentSceneStore';
import Layout, { HeaderAction } from 'components/Layout';
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@@ -15,25 +12,26 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
import styles from './DocumentScene.scss';
@observer
class DocumentScene extends React.Component {
state = {
didScroll: false,
}
componentDidMount = () => {
const documentId = this.props.routeParams.id;
this.props.fetchDocumentAsync(documentId);
const { id } = this.props.routeParams;
store.fetchDocument(id);
}
componentWillReceiveProps = (nextProps) => {
// Scroll to anchor after loading, and only once
const hash = this.props.location.hash;
const { hash } = this.props.location;
if (nextProps.document && hash && !this.state.didScroll) {
if (nextProps.doc && hash && !this.state.didScroll) {
const name = hash.split('#')[1];
setTimeout(() => {
this.setState({ didScroll: true });
const element = document.getElementsByName(name)[0];
const element = doc.getElementsByName(name)[0];
if (element) element.scrollIntoView()
}, 0);
}
@@ -41,29 +39,26 @@ class DocumentScene extends React.Component {
onDelete = () => {
if (confirm("Are you sure you want to delete this document?")) {
this.props.deleteDocument(
this.props.document.id,
`/atlas/${ this.props.document.atlas.id }`,
);
store.deleteDocument();
};
}
render() {
const document = this.props.document;
const doc = store.document;
let title;
let actions;
if (document) {
if (doc) {
actions = (
<div className={ styles.actions }>
<HeaderAction>
<Link to={ `/documents/${document.id}/edit` }>Edit</Link>
<Link to={ `/documents/${doc.id}/edit` }>Edit</Link>
</HeaderAction>
<DropdownMenu label="More">
<MenuItem onClick={ this.onDelete }>Delete</MenuItem>
</DropdownMenu>
</div>
);
title = `${document.atlas.name} - ${document.title}`;
title = `${doc.atlas.name} - ${doc.title}`;
}
return (
@@ -72,10 +67,10 @@ class DocumentScene extends React.Component {
actions={ actions }
>
<CenteredContent>
{ this.props.isLoading || !document ? (
{ store.isFetching ? (
<AtlasPreviewLoading />
) : (
<Document document={ document } />
<Document document={ doc } />
) }
</CenteredContent>
</Layout>
@@ -83,22 +78,4 @@ class DocumentScene extends React.Component {
}
};
const mapStateToProps = (state) => {
return {
isLoading: state.document.isLoading,
document: state.document.data,
}
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
fetchDocumentAsync,
deleteDocument,
}, dispatch)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(DocumentScene);
export default DocumentScene;

39
src/scenes/DocumentScene/DocumentSceneStore.js Normal file
View File

@@ -0,0 +1,39 @@
import { observable, action } from 'mobx';
import { client } from 'utils/ApiClient';
import { browserHistory } from 'react-router';
const store = new class DocumentSceneStore {
@observable document;
@observable isFetching = true;
@observable isDeleting;
/* Actions */
@action fetchDocument = async (id) => {
this.isFetching = true;
try {
const res = await client.post('/documents.info', { id: id });
const { data } = res;
this.document = data;
} catch (e) {
console.error("Something went wrong");
}
this.isFetching = false;
}
@action deleteDocument = async () => {
this.isFetching = true;
try {
const res = await client.post('/documents.delete', { id: this.document.id });
browserHistory.push(`/atlas/${this.document.atlas.id}`);
} catch (e) {
console.error("Something went wrong");
}
this.isFetching = false;
}
}();
export default store;

51
src/scenes/Editor/Editor.js
View File

@@ -2,14 +2,14 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
resetEditor,
updateText,
replaceText,
} from 'actions/EditorActions';
import {
saveDocumentAsync,
} from 'actions/DocumentActions';
// import {
// resetEditor,
// updateText,
// replaceText,
// } from 'actions/EditorActions';
// import {
// saveDocumentAsync,
// } from 'actions/DocumentActions';
import Layout, { Title, HeaderAction } from 'components/Layout';
import Flex from 'components/Flex';
@@ -81,26 +81,21 @@ class Editor extends Component {
}
}
const mapStateToProps = (state) => {
return {
text: state.editor.text,
title: state.editor.title,
isSaving: state.document.isSaving,
};
};
// const mapStateToProps = (state) => {
// return {
// text: state.editor.text,
// title: state.editor.title,
// isSaving: state.document.isSaving,
// };
// };
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
resetEditor,
updateText,
replaceText,
saveDocumentAsync,
}, dispatch)
};
Editor = connect(
mapStateToProps,
mapDispatchToProps,
)(Editor);
// const mapDispatchToProps = (dispatch) => {
// return bindActionCreators({
// resetEditor,
// updateText,
// replaceText,
// saveDocumentAsync,
// }, dispatch)
// };
export default Editor;