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

New user store structure and updated packages

Browse Source
This commit is contained in:
Jori Lallo
2016-06-25 23:31:22 -07:00
parent 3bbdaecbf2
commit a2a642c16c
11 changed files with 167 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
package.json
View File

@@ -25,96 +25,96 @@
}, },
"homepage": "https://github.com/jorilallo/atlas#readme", "homepage": "https://github.com/jorilallo/atlas#readme",
"dependencies": { "dependencies": {
"babel-core": "^6.4.5", "babel-core": "6.10.4",
"babel-eslint": "^4.1.8", "babel-eslint": "6.1.0",
"babel-loader": "^6.2.1", "babel-loader": "6.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-polyfill": "^6.7.4", "babel-polyfill": "6.7.4",
"babel-preset-es2015": "^6.3.13", "babel-preset-es2015": "6.3.13",
"babel-preset-react": "^6.3.13", "babel-preset-react": "6.3.13",
"babel-preset-react-hmre": "^1.0.1", "babel-preset-react-hmre": "1.0.1",
"babel-preset-stage-0": "^6.5.0", "babel-preset-stage-0": "6.5.0",
"classnames": "^2.2.3", "classnames": "2.2.3",
"codemirror": "^5.11.0", "codemirror": "5.16.0",
"cross-env": "^1.0.7", "cross-env": "1.0.7",
"crypto": "0.0.3", "crypto": "0.0.3",
"css-loader": "^0.23.1", "css-loader": "0.23.1",
"debug": "^2.2.0", "debug": "2.2.0",
"dotenv": "^2.0.0", "dotenv": "2.0.0",
"emoji-name-map": "^1.1.1", "emoji-name-map": "1.1.2",
"eslint": "^1.10.3", "eslint": "2.13.1",
"eslint-config-airbnb": "^5.0.0", "eslint-config-airbnb": "9.0.1",
"eslint-plugin-react": "^3.16.1", "eslint-plugin-react": "5.2.2",
"exports-loader": "^0.6.3", "exports-loader": "0.6.3",
"extract-text-webpack-plugin": "^1.0.1", "extract-text-webpack-plugin": "1.0.1",
"file-loader": "^0.8.5", "file-loader": "0.9.0",
"highlight.js": "^9.4.0", "highlight.js": "9.4.0",
"history": "^1.17.0", "history": "3.0.0",
"html-webpack-plugin": "^2.17.0", "html-webpack-plugin": "2.17.0",
"http-errors": "^1.4.0", "http-errors": "1.4.0",
"imports-loader": "^0.6.5", "imports-loader": "0.6.5",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "2.2.1",
"js-tree": "^1.1.0", "js-tree": "1.1.0",
"json-loader": "^0.5.4", "json-loader": "0.5.4",
"jsonwebtoken": "^5.7.0", "jsonwebtoken": "7.0.1",
"koa": "^2.0.0", "koa": "2.0.0",
"koa-bodyparser": "^2.0.1", "koa-bodyparser": "2.0.1",
"koa-compress": "^2.0.0", "koa-compress": "2.0.0",
"koa-connect": "^1.0.0", "koa-connect": "1.0.0",
"koa-convert": "^1.2.0", "koa-convert": "1.2.0",
"koa-helmet": "^1.0.0", "koa-helmet": "1.0.0",
"koa-jwt": "^1.2.0", "koa-jwt": "1.2.0",
"koa-logger": "^2.0.0", "koa-logger": "2.0.0",
"koa-mount": "^2.0.0", "koa-mount": "2.0.0",
"koa-router": "^7.0.1", "koa-router": "7.0.1",
"koa-sendfile": "^2.0.0", "koa-sendfile": "2.0.0",
"koa-webpack-dev-middleware": "^1.2.0", "koa-webpack-dev-middleware": "1.2.0",
"koa-webpack-hot-middleware": "^1.0.3", "koa-webpack-hot-middleware": "1.0.3",
"localenv": "^0.2.2", "localenv": "0.2.2",
"localforage": "^1.4.2", "localforage": "1.4.2",
"lodash": "^4.13.1", "lodash": "4.13.1",
"lodash.orderby": "^4.4.0", "lodash.orderby": "4.4.0",
"marked": "^0.3.5", "marked": "0.3.5",
"mobx": "^2.2.2", "mobx": "2.3.3",
"mobx-react": "^3.3.0", "mobx-react": "3.4.0",
"mobx-react-devtools": "^4.2.0", "mobx-react-devtools": "4.2.0",
"moment": "^2.13.0", "moment": "2.13.0",
"node-dev": "^3.1.0", "node-dev": "3.1.0",
"node-sass": "^3.4.2", "node-sass": "3.4.2",
"nodemon": "^1.9.1", "nodemon": "1.9.1",
"normalize.css": "^3.0.3", "normalize.css": "4.1.1",
"normalizr": "^2.0.1", "normalizr": "2.0.1",
"pg": "^4.5.3", "pg": "6.0.1",
"pg-hstore": "^2.3.2", "pg-hstore": "2.3.2",
"querystring": "^0.2.0", "querystring": "0.2.0",
"randomstring": "^1.1.5", "randomstring": "1.1.5",
"react": "^0.14.7", "react": "15.1.0",
"react-codemirror": "^0.2.5", "react-codemirror": "0.2.5",
"react-dom": "^0.14.7", "react-dom": "15.1.0",
"react-dropzone": "^3.3.2", "react-dropzone": "3.3.2",
"react-helmet": "^3.1.0", "react-helmet": "3.1.0",
"react-router": "^2.0.0", "react-router": "2.5.1",
"rebass": "^0.2.6", "rebass": "0.2.6",
"safestart": "^0.8.0", "safestart": "0.8.0",
"sass-loader": "^3.2.0", "sass-loader": "3.2.1",
"sequelize": "^3.21.0", "sequelize": "3.23.4",
"sequelize-cli": "^2.4.0", "sequelize-cli": "2.4.0",
"sequelize-encrypted": "^0.1.0", "sequelize-encrypted": "0.1.0",
"slug": "^0.9.1", "slug": "0.9.1",
"style-loader": "^0.13.0", "style-loader": "0.13.0",
"truncate-html": "0.0.6", "truncate-html": "0.0.6",
"url-loader": "^0.5.7", "url-loader": "0.5.7",
"uuid": "^2.0.2", "uuid": "2.0.2",
"validator": "^5.2.0", "validator": "5.2.0",
"webpack": "^1.12.12" "webpack": "1.12.12"
}, },
"devDependencies": { "devDependencies": {
"babel-regenerator-runtime": "^6.5.0", "babel-regenerator-runtime": "6.5.0",
"fsevents": "^1.0.11", "fsevents": "1.0.11",
"ignore-loader": "^0.1.1", "ignore-loader": "0.1.1",
"koa-webpack-dev-middleware": "^1.2.0", "koa-webpack-dev-middleware": "1.2.0",
"koa-webpack-hot-middleware": "^1.0.3", "koa-webpack-hot-middleware": "1.0.3",
"node-dev": "^3.1.0", "node-dev": "3.1.0",
"nodemon": "^1.9.1" "nodemon": "1.9.1"
} }
} }

14
src/components/Layout/Layout.js
View File

@@ -1,9 +1,7 @@
import React from 'react'; import React from 'react';
import Link from 'react-router/lib/Link'; import Link from 'react-router/lib/Link';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { observe } from 'mobx'; import { observer } from 'mobx-react';
import store from 'stores/UserStore';
import DropdownMenu, { MenuItem } from 'components/DropdownMenu'; import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
import Flex from 'components/Flex'; import Flex from 'components/Flex';
@@ -14,6 +12,7 @@ import styles from './Layout.scss';
import classNames from 'classnames/bind'; import classNames from 'classnames/bind';
const cx = classNames.bind(styles); const cx = classNames.bind(styles);
@observer(['user'])
class Layout extends React.Component { class Layout extends React.Component {
static propTypes = { static propTypes = {
actions: React.PropTypes.node, actions: React.PropTypes.node,
@@ -21,9 +20,12 @@ class Layout extends React.Component {
titleText: React.PropTypes.node, titleText: React.PropTypes.node,
fixed: React.PropTypes.bool, fixed: React.PropTypes.bool,
loading: React.PropTypes.bool, loading: React.PropTypes.bool,
user: React.PropTypes.object.isRequired,
} }
render() { render() {
const user = this.props.user;
return ( return (
<div className={ styles.container }> <div className={ styles.container }>
<Helmet <Helmet
@@ -39,7 +41,7 @@ class Layout extends React.Component {
) : null } ) : null }
<div className={ cx(styles.header, { fixed: this.props.fixed }) }> <div className={ cx(styles.header, { fixed: this.props.fixed }) }>
<div className={ styles.headerLeft }> <div className={ styles.headerLeft }>
<Link to="/" className={ styles.team }>{ store.team.name }</Link> <Link to="/" className={ styles.team }>{ user.team.name }</Link>
<span className={ styles.title }> <span className={ styles.title }>
{ this.props.title && (<span>&nbsp;/&nbsp;</span>) }{ this.props.title } { this.props.title && (<span>&nbsp;/&nbsp;</span>) }{ this.props.title }
</span> </span>
@@ -53,10 +55,10 @@ class Layout extends React.Component {
<Avatar <Avatar
circle circle
size={24} size={24}
src={ store.user.avatarUrl } src={ user.user.avatarUrl }
/> />
}> }>
<MenuItem onClick={ store.logout }>Logout</MenuItem> <MenuItem onClick={ user.logout }>Logout</MenuItem>
</DropdownMenu> </DropdownMenu>
</Flex> </Flex>
</div> </div>

7
src/components/SlackAuthLink/SlackAuthLink.js
View File

@@ -1,12 +1,13 @@
import React from 'react'; import React from 'react';
import { observe } from 'mobx' import { observer } from 'mobx-react';
import store from 'stores/UserStore';
import styles from './SlackAuthLink.scss'; import styles from './SlackAuthLink.scss';
@observer(['user'])
class SlackAuthLink extends React.Component { class SlackAuthLink extends React.Component {
static propTypes = { static propTypes = {
scopes: React.PropTypes.arrayOf(React.PropTypes.string), scopes: React.PropTypes.arrayOf(React.PropTypes.string),
user: React.PropTypes.object.isRequired,
} }
static defaultProps = { static defaultProps = {
@@ -26,7 +27,7 @@ class SlackAuthLink extends React.Component {
redirect_uri: __DEV__ ? redirect_uri: __DEV__ ?
'http://localhost:3000/auth/slack/' : 'http://localhost:3000/auth/slack/' :
'https://www.beautifulatlas.com/auth/slack/', 'https://www.beautifulatlas.com/auth/slack/',
state: store.getOauthState(), state: this.props.user.getOauthState(),
}; };
const urlParams = Object.keys(params).map(function(key) { const urlParams = Object.keys(params).map(function(key) {

8
src/index.js
View File

@@ -1,11 +1,13 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import Router from 'react-router/lib/Router'; import Router from 'react-router/lib/Router';
import Route from 'react-router/lib/Route'; import Route from 'react-router/lib/Route';
import IndexRoute from 'react-router/lib/IndexRoute'; import IndexRoute from 'react-router/lib/IndexRoute';
import History from 'utils/History'; import History from 'utils/History';
import userStore from 'stores/UserStore'; import stores from 'stores';
window.stores = stores;
import 'normalize.css/normalize.css'; import 'normalize.css/normalize.css';
import 'utils/base-styles.scss'; import 'utils/base-styles.scss';
@@ -28,7 +30,7 @@ if (__DEV__) {
} }
function requireAuth(nextState, replace) { function requireAuth(nextState, replace) {
if (!userStore.authenticated) { if (!stores.user.authenticated) {
replace({ replace({
pathname: '/', pathname: '/',
state: { nextPathname: nextState.location.pathname }, state: { nextPathname: nextState.location.pathname },
@@ -38,6 +40,7 @@ function requireAuth(nextState, replace) {
render(( render((
<div style={{ display: 'flex', flex: 1, }}> <div style={{ display: 'flex', flex: 1, }}>
<Provider user={ stores.user }>
<Router history={History}> <Router history={History}>
<Route path="/" component={ Application }> <Route path="/" component={ Application }>
<IndexRoute component={Home} /> <IndexRoute component={Home} />
@@ -52,6 +55,7 @@ render((
<Route path="/auth/slack" component={SlackAuth} /> <Route path="/auth/slack" component={SlackAuth} />
</Route> </Route>
</Router> </Router>
</Provider>
{ __DEV__ ? <DevTools position={{ bottom: 0, right: 0 }} /> : null } { __DEV__ ? <DevTools position={{ bottom: 0, right: 0 }} /> : null }
</div> </div>
), document.getElementById('root')); ), document.getElementById('root'));

5
src/scenes/Application.js
View File

@@ -1,7 +1,8 @@
import React from "react"; import React from "react";
import { observer } from 'mobx-react';
import Helmet from "react-helmet"; import Helmet from "react-helmet";
const Application = (props) => { const Application = observer((props) => {
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<Helmet <Helmet
@@ -13,7 +14,7 @@ const Application = (props) => {
{ props.children } { props.children }
</div> </div>
); );
}; });
Application.propTypes = { Application.propTypes = {
children: React.PropTypes.node.isRequired, children: React.PropTypes.node.isRequired,

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

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import userStore from 'stores/UserStore';
import store from './DashboardStore'; import store from './DashboardStore';
import Flex from 'components/Flex'; import Flex from 'components/Flex';
@@ -14,10 +13,14 @@ import FullscreenField from 'components/FullscreenField';
import styles from './Dashboard.scss'; import styles from './Dashboard.scss';
@observer @observer(['user'])
class Dashboard extends React.Component { class Dashboard extends React.Component {
static propTypes = {
user: React.PropTypes.object.isRequired,
}
componentDidMount = () => { componentDidMount = () => {
store.fetchAtlases(userStore.team.id); store.fetchAtlases(this.props.user.team.id);
} }
state = { state = {

9
src/scenes/Home/Home.js
View File

@@ -1,14 +1,19 @@
import React from 'react'; import React from 'react';
import store from 'stores/UserStore'; import { observer } from 'mobx-react';
import { browserHistory } from 'react-router' import { browserHistory } from 'react-router'
import SlackAuthLink from 'components/SlackAuthLink'; import SlackAuthLink from 'components/SlackAuthLink';
import styles from './Home.scss'; import styles from './Home.scss';
@observer(['user'])
export default class Home extends React.Component { export default class Home extends React.Component {
static propTypes = {
user: React.PropTypes.object.isRequired,
}
componentDidMount = () => { componentDidMount = () => {
if (store.authenticated) { if (this.props.user.authenticated) {
browserHistory.replace('/dashboard'); browserHistory.replace('/dashboard');
} }
} }

13
src/scenes/SlackAuth/SlackAuth.js
View File

@@ -1,10 +1,15 @@
import React from 'react'; import React from 'react';
import store from 'stores/UserStore'; import { observer } from 'mobx-react';
@observer(['user'])
class SlackAuth extends React.Component {
static propTypes = {
user: React.PropTypes.object.isRequired,
}
export default class SlackAuth extends React.Component {
componentDidMount = () => { componentDidMount = () => {
const { code, state } = this.props.location.query; const { code, state } = this.props.location.query;
store.authWithSlack(code, state); this.props.user.authWithSlack(code, state);
} }
render() { render() {
@@ -13,3 +18,5 @@ export default class SlackAuth extends React.Component {
); );
} }
} }
export default SlackAuth;

18
src/stores/UserStore.js
View File

@@ -1,11 +1,10 @@
import { observable, action, computed, autorun } from 'mobx'; import { observable, action, computed } from 'mobx';
import { browserHistory } from 'react-router'; import { browserHistory } from 'react-router';
import { client } from 'utils/ApiClient'; import { client } from 'utils/ApiClient';
import localforage from 'localforage';
const USER_STORE = 'USER_STORE'; const USER_STORE = 'USER_STORE';
const store = new class UserStore { class UserStore {
@observable user; @observable user;
@observable team; @observable team;
@@ -71,12 +70,9 @@ const store = new class UserStore {
this.token = data.token; this.token = data.token;
this.oauthState = data.oauthState; this.oauthState = data.oauthState;
} }
}(); };
// Persist store to localStorage export default UserStore;
autorun(() => { export {
localStorage.setItem(USER_STORE, store.asJson); USER_STORE,
}); };
export default store;

13
src/stores/index.js Normal file
View File

@@ -0,0 +1,13 @@
import UserStore, { USER_STORE } from './UserStore';
import { autorun } from 'mobx';
const stores = {
user: new UserStore(),
};
// Persist store to localStorage
autorun(() => {
localStorage.setItem(USER_STORE, stores.user.asJson);
});
export default stores;

8
src/utils/ApiClient.js
View File

@@ -1,5 +1,5 @@
import _map from 'lodash/map'; import _map from 'lodash/map';
import store from 'stores/UserStore'; import stores from 'stores';
import constants from '../constants'; import constants from '../constants';
@@ -25,8 +25,8 @@ class ApiClient {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'User-Agent': this.userAgent, 'User-Agent': this.userAgent,
}); });
if (store.authenticated) { if (stores.user.authenticated) {
headers.set('Authorization', `Bearer ${store.token}`); headers.set('Authorization', `Bearer ${stores.user.token}`);
} }
// Construct request // Construct request
@@ -48,7 +48,7 @@ class ApiClient {
// Handle 401, log out user // Handle 401, log out user
if (response.status === 401) { if (response.status === 401) {
store.logout(); stores.user.logout();
} }
// Handle failed responses // Handle failed responses