Upgraded dependencies

2017-04-26 22:18:36 -07:00 · 2017-04-26 22:18:36 -07:00 · b34d80717b
parent c0a8d71bb9
commit b34d80717b
8 changed files with 825 additions and 798 deletions
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@ -1,7 +1,7 @@
 import React from 'react';
 import { browserHistory, Link } from 'react-router';
 import Helmet from 'react-helmet';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import { injectOffline } from 'components/Offline';
 import keydown from 'react-keydown';
 import _ from 'lodash';
@ -16,7 +16,8 @@ import styles from './Layout.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);

-@observer(['user'])
+@inject('user')
+@observer
@injectOffline
 class Layout extends React.Component {
  static propTypes = {
@ -29,11 +30,11 @@ class Layout extends React.Component {
    search: React.PropTypes.bool,
    offline: React.PropTypes.bool,
    notifications: React.PropTypes.node,
-  }
+  };

  static defaultProps = {
    search: true,
-  }
+  };

  @keydown(['/', 't'])
  search() {
@ -51,72 +52,68 @@ class Layout extends React.Component {
    const user = this.props.user;

    return (
-      <div className={ styles.container }>
+      <div className={styles.container}>
        <Helmet
-          title={ this.props.titleText
-              ? `${this.props.titleText} - Atlas`
-              : 'Atlas' }
+          title={
+            this.props.titleText ? `${this.props.titleText} - Atlas` : 'Atlas'
+          }
        />

-        { this.props.loading && (
-          <LoadingIndicator />
-        ) }
+        {this.props.loading && <LoadingIndicator />}

-        { this.props.offline && (
+        {this.props.offline &&
          <Alert offline>
            It looks like you're offline. Reconnect to restore access to all of your documents 📚
-          </Alert>
-        ) }
+          </Alert>}

-        { this.props.notifications }
+        {this.props.notifications}

-        <div className={ cx(styles.header) }>
-          <div className={ styles.headerLeft }>
-            <Link to="/" className={ styles.team }>Atlas</Link>
-            <span className={ styles.title }>
-              { this.props.title }
+        <div className={cx(styles.header)}>
+          <div className={styles.headerLeft}>
+            <Link to="/" className={styles.team}>Atlas</Link>
+            <span className={styles.title}>
+              {this.props.title}
            </span>
          </div>
-          <Flex className={ styles.headerRight }>
+          <Flex className={styles.headerRight}>
            <Flex>
-              <Flex align="center" className={ styles.actions }>
-                { this.props.actions }
+              <Flex align="center" className={styles.actions}>
+                {this.props.actions}
              </Flex>
-              { user.user && (
+              {user.user &&
                <Flex>
-                  { this.props.search && (
+                  {this.props.search &&
                    <Flex>
                      <div
-                        onClick={ this.search }
-                        className={ styles.search }
+                        onClick={this.search}
+                        className={styles.search}
                        title="Search (/)"
                      >
-                        <img src={ require('assets/icons/search.svg') } alt="Search" />
+                        <img
+                          src={require('assets/icons/search.svg')}
+                          alt="Search"
+                        />
                      </div>
-                    </Flex>
-                  ) }
+                    </Flex>}
                  <DropdownMenu
-                    label={ <Avatar
-                      circle
-                      size={ 24 }
-                      src={ user.user.avatarUrl }
-                    /> }
+                    label={
+                      <Avatar circle size={24} src={user.user.avatarUrl} />
+                    }
                  >
                    <MenuItem to="/settings">Settings</MenuItem>
-                    <MenuItem to="/keyboard-shortcuts">Keyboard shortcuts</MenuItem>
+                    <MenuItem to="/keyboard-shortcuts">
+                      Keyboard shortcuts
+                    </MenuItem>
                    <MenuItem to="/developers">API</MenuItem>
-                    <MenuItem onClick={ user.logout }>Logout</MenuItem>
+                    <MenuItem onClick={user.logout}>Logout</MenuItem>
                  </DropdownMenu>
-                </Flex>
-              ) }
+                </Flex>}
            </Flex>
          </Flex>
        </div>

-        <div
-          className={ cx(styles.content) }
-        >
-          { this.props.children }
+        <div className={cx(styles.content)}>
+          {this.props.children}
        </div>
      </div>
    );
--- a/frontend/components/SlackAuthLink/SlackAuthLink.js
+++ b/frontend/components/SlackAuthLink/SlackAuthLink.js
@ -1,14 +1,15 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';

-@observer(['user'])
+@inject('user')
+@observer
 class SlackAuthLink extends React.Component {
  static propTypes = {
    children: React.PropTypes.node.isRequired,
    scopes: React.PropTypes.arrayOf(React.PropTypes.string),
    user: React.PropTypes.object.isRequired,
    redirectUri: React.PropTypes.string,
-  }
+  };

  static defaultProps = {
    scopes: [
@ -17,7 +18,7 @@ class SlackAuthLink extends React.Component {
      'identity.avatar',
      'identity.team',
    ],
-  }
+  };

  slackUrl = () => {
    const baseUrl = 'https://slack.com/oauth/authorize';
@ -28,17 +29,17 @@ class SlackAuthLink extends React.Component {
      state: this.props.user.getOauthState(),
    };

-    const urlParams = Object.keys(params).map((key) => {
-      return `${key}=${encodeURIComponent(params[key])}`;
-    }).join('&');
+    const urlParams = Object.keys(params)
+      .map(key => {
+        return `${key}=${encodeURIComponent(params[key])}`;
+      })
+      .join('&');

    return `${baseUrl}?${urlParams}`;
-  }
+  };

  render() {
-    return (
-      <a href={ this.slackUrl() }>{ this.props.children }</a>
-    );
+    return <a href={this.slackUrl()}>{this.props.children}</a>;
  }
 }

--- a/frontend/scenes/Dashboard/Dashboard.js
+++ b/frontend/scenes/Dashboard/Dashboard.js
@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import { withRouter } from 'react-router';

 import DashboardStore from './DashboardStore';
@ -11,12 +11,13 @@ import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';

@withRouter
-@observer(['user'])
+@inject('user')
+@observer
 class Dashboard extends React.Component {
  static propTypes = {
    user: React.PropTypes.object.isRequired,
    router: React.PropTypes.object.isRequired,
-  }
+  };

  constructor(props) {
    super(props);
@ -33,13 +34,14 @@ class Dashboard extends React.Component {
        <Layout>
          <CenteredContent>
            <Flex column auto>
-              { this.store.isFetching ? (
-                <AtlasPreviewLoading />
-              ) : (
-                this.store.collections && this.store.collections.map((collection) => {
-                  return (<AtlasPreview key={ collection.id } data={ collection } />);
-                })
-              ) }
+              {this.store.isFetching
+                ? <AtlasPreviewLoading />
+                : this.store.collections &&
+                    this.store.collections.map(collection => {
+                      return (
+                        <AtlasPreview key={collection.id} data={collection} />
+                      );
+                    })}
            </Flex>
          </CenteredContent>
        </Layout>
--- a/frontend/scenes/DocumentScene/DocumentScene.js
+++ b/frontend/scenes/DocumentScene/DocumentScene.js
@ -1,13 +1,11 @@
 import React, { PropTypes } from 'react';
 import { Link, browserHistory } from 'react-router';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import { toJS } from 'mobx';
 import keydown from 'react-keydown';
 import _ from 'lodash';

-import DocumentSceneStore, {
-  DOCUMENT_PREFERENCES,
-} from './DocumentSceneStore';
+import DocumentSceneStore, { DOCUMENT_PREFERENCES } from './DocumentSceneStore';

 import Layout from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@ -22,7 +20,8 @@ import styles from './DocumentScene.scss';
 // const cx = classNames.bind(styles);

@keydown(['cmd+/', 'ctrl+/', 'c', 'e'])
-@observer(['ui', 'cache'])
+@inject('ui', 'cache')
+@observer
 class DocumentScene extends React.Component {
  static propTypes = {
    ui: PropTypes.object.isRequired,
@ -30,7 +29,7 @@ class DocumentScene extends React.Component {
    routeParams: PropTypes.object,
    params: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
-  }
+  };

  constructor(props) {
    super(props);
@ -44,7 +43,7 @@ class DocumentScene extends React.Component {

  state = {
    didScroll: false,
-  }
+  };

  componentDidMount = async () => {
    const { id } = this.props.routeParams;
@ -52,9 +51,9 @@ class DocumentScene extends React.Component {
      replaceUrl: !this.props.location.hash,
    });
    this.scrollTohash();
-  }
+  };

-  componentWillReceiveProps = async (nextProps) => {
+  componentWillReceiveProps = async nextProps => {
    const key = nextProps.keydown.event;
    if (key) {
      if (key.key === '/' && (key.metaKey || key.ctrl.Key)) {
@ -81,25 +80,26 @@ class DocumentScene extends React.Component {
    }

    this.scrollTohash();
-  }
+  };

  onEdit = () => {
    const url = `${this.store.document.url}/edit`;
    browserHistory.push(url);
-  }
+  };

  onCreateDocument = () => {
    browserHistory.push(`${this.store.collectionTree.url}/new`);
-  }
+  };

  onCreateChild = () => {
    browserHistory.push(`${this.store.document.url}/new`);
-  }
+  };

  onDelete = () => {
    let msg;
    if (this.store.document.collection.type === 'atlas') {
-      msg = 'Are you sure you want to delete this document and all it\'s child documents (if any)?';
+      msg =
+        "Are you sure you want to delete this document and all it's child documents (if any)?";
    } else {
      msg = 'Are you sure you want to delete this document?';
    }
@ -107,7 +107,7 @@ class DocumentScene extends React.Component {
    if (confirm(msg)) {
      this.store.deleteDocument();
    }
-  }
+  };

  onExport = () => {
    const doc = this.store.document;
@ -116,7 +116,7 @@ class DocumentScene extends React.Component {
    a.download = `${doc.title}.md`;
    a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(doc.text)}`;
    a.click();
-  }
+  };

  scrollTohash = () => {
    // Scroll to anchor after loading, and only once
@ -128,40 +128,41 @@ class DocumentScene extends React.Component {
      const element = window.document.getElementsByName(name)[0];
      if (element) element.scrollIntoView();
    }
-  }
+  };

  render() {
-    const {
-      sidebar,
-    } = this.props.ui;
+    const { sidebar } = this.props.ui;

    const doc = this.store.document;
-    const allowDelete = doc && doc.collection.type === 'atlas' &&
+    const allowDelete =
+      doc &&
+      doc.collection.type === 'atlas' &&
      doc.id !== doc.collection.navigationTree.id;
    let title;
    let titleText;
    let actions;
    if (doc) {
      actions = (
-        <div className={ styles.actions }>
-          <DropdownMenu label={ <MoreIcon /> }>
-            { this.store.isCollection && (
-              <div className={ styles.menuGroup }>
-                <MenuItem onClick={ this.onCreateDocument }>New document</MenuItem>
-                <MenuItem onClick={ this.onCreateChild }>New child</MenuItem>
-              </div>
-            ) }
-            <MenuItem onClick={ this.onEdit }>Edit</MenuItem>
-            <MenuItem onClick={ this.onExport }>Export</MenuItem>
-            { allowDelete && <MenuItem onClick={ this.onDelete }>Delete</MenuItem> }
+        <div className={styles.actions}>
+          <DropdownMenu label={<MoreIcon />}>
+            {this.store.isCollection &&
+              <div className={styles.menuGroup}>
+                <MenuItem onClick={this.onCreateDocument}>
+                  New document
+                </MenuItem>
+                <MenuItem onClick={this.onCreateChild}>New child</MenuItem>
+              </div>}
+            <MenuItem onClick={this.onEdit}>Edit</MenuItem>
+            <MenuItem onClick={this.onExport}>Export</MenuItem>
+            {allowDelete && <MenuItem onClick={this.onDelete}>Delete</MenuItem>}
          </DropdownMenu>
        </div>
      );
      title = (
        <span>
          &nbsp;/&nbsp;
-          <Link to={ doc.collection.url }>{ doc.collection.name }</Link>
-          { ` / ${doc.title}` }
+          <Link to={doc.collection.url}>{doc.collection.name}</Link>
+          {` / ${doc.title}`}
        </span>
      );
      titleText = `${doc.collection.name} - ${doc.title}`;
@ -169,33 +170,30 @@ class DocumentScene extends React.Component {

    return (
      <Layout
-        title={ title }
-        titleText={ titleText }
-        actions={ doc && actions }
-        loading={ this.store.updatingStructure }
+        title={title}
+        titleText={titleText}
+        actions={doc && actions}
+        loading={this.store.updatingStructure}
      >
-        { this.store.isFetching ? (
-          <CenteredContent>
-            <AtlasPreviewLoading />
-          </CenteredContent>
-        ) : (
-          <Flex auto>
-            { this.store.isCollection && (
-              <Sidebar
-                open={ sidebar }
-                onToggle={ this.props.ui.toggleSidebar }
-                navigationTree={ toJS(this.store.collectionTree) }
-                onNavigationUpdate={ this.store.updateNavigationTree }
-                onNodeCollapse={ this.store.onNodeCollapse }
-              />
-            ) }
-            <Flex auto justify="center" className={ styles.content }>
-              <CenteredContent>
-                <Document document={ doc } />
-              </CenteredContent>
-            </Flex>
-          </Flex>
-        ) }
+        {this.store.isFetching
+          ? <CenteredContent>
+              <AtlasPreviewLoading />
+            </CenteredContent>
+          : <Flex auto>
+              {this.store.isCollection &&
+                <Sidebar
+                  open={sidebar}
+                  onToggle={this.props.ui.toggleSidebar}
+                  navigationTree={toJS(this.store.collectionTree)}
+                  onNavigationUpdate={this.store.updateNavigationTree}
+                  onNodeCollapse={this.store.onNodeCollapse}
+                />}
+              <Flex auto justify="center" className={styles.content}>
+                <CenteredContent>
+                  <Document document={doc} />
+                </CenteredContent>
+              </Flex>
+            </Flex>}
      </Layout>
    );
  }
--- a/frontend/scenes/Home/Home.js
+++ b/frontend/scenes/Home/Home.js
@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import { browserHistory } from 'react-router';

 import { Flex } from 'reflexbox';
@ -10,18 +10,19 @@ import Alert from 'components/Alert';

 import styles from './Home.scss';

-@observer(['user'])
+@inject('user')
+@observer
 export default class Home extends React.Component {
  static propTypes = {
    user: React.PropTypes.object.isRequired,
    location: React.PropTypes.object.isRequired,
-  }
+  };

  componentDidMount = () => {
    if (this.props.user.authenticated) {
      browserHistory.replace('/dashboard');
    }
-  }
+  };

  get notifications() {
    const notifications = [];
@ -30,7 +31,9 @@ export default class Home extends React.Component {
    if (state && state.nextPathname) {
      sessionStorage.removeItem('redirectTo');
      sessionStorage.setItem('redirectTo', state.nextPathname);
-      notifications.push(<Alert key="login" info>Please login to continue</Alert>);
+      notifications.push(
+        <Alert key="login" info>Please login to continue</Alert>
+      );
    }

    return notifications;
@ -41,18 +44,17 @@ export default class Home extends React.Component {

    return (
      <Flex auto>
-        <Layout
-          notifications={ this.notifications }
-        >
+        <Layout notifications={this.notifications}>
          <CenteredContent>
-            { showLandingPageCopy && (
-              <div className={ styles.intro }>
-                <h1 className={ styles.title }>Simple, fast, markdown.</h1>
-                <p className={ styles.copy }>We're building a modern wiki for engineering teams.</p>
-              </div>
-            ) }
-            <div className={ styles.action }>
-              <SlackAuthLink redirectUri={ `${URL}/auth/slack` }>
+            {showLandingPageCopy &&
+              <div className={styles.intro}>
+                <h1 className={styles.title}>Simple, fast, markdown.</h1>
+                <p className={styles.copy}>
+                  We're building a modern wiki for engineering teams.
+                </p>
+              </div>}
+            <div className={styles.action}>
+              <SlackAuthLink redirectUri={`${URL}/auth/slack`}>
                <img
                  alt="Sign in with Slack"
                  height="40"
--- a/frontend/scenes/SlackAuth/SlackAuth.js
+++ b/frontend/scenes/SlackAuth/SlackAuth.js
@ -1,22 +1,19 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import { browserHistory } from 'react-router';
 import { client } from 'utils/ApiClient';

-@observer(['user'])
+@inject('user')
+@observer
 class SlackAuth extends React.Component {
  static propTypes = {
    user: React.PropTypes.object.isRequired,
    location: React.PropTypes.object.isRequired,
    route: React.PropTypes.object.isRequired,
-  }
+  };

  componentDidMount = async () => {
-    const {
-      error,
-      code,
-      state,
-    } = this.props.location.query;
+    const { error, code, state } = this.props.location.query;

    if (error) {
      if (error === 'access_denied') {
@ -43,12 +40,10 @@ class SlackAuth extends React.Component {

      this.props.user.authWithSlack(code, state, redirectTo);
    }
-  }
+  };

  render() {
-    return (
-      <div></div>
-    );
+    return <div />;
  }
 }

--- a/package.json
+++ b/package.json
@ -58,32 +58,32 @@
    "url": "git+ssh://git@github.com/jorilallo/atlas.git"
  },
  "dependencies": {
-    "babel-core": "6.13.2",
-    "babel-eslint": "6.1.2",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
    "babel-loader": "6.2.5",
-    "babel-plugin-lodash": "^3.2.6",
+    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-polyfill": "^6.13.0",
-    "babel-preset-es2015": "6.13.2",
+    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "6.11.1",
    "babel-preset-react-hmre": "1.1.1",
-    "babel-preset-stage-0": "6.5.0",
+    "babel-preset-stage-0": "^6.24.1",
    "babel-regenerator-runtime": "6.5.0",
    "bcrypt": "^0.8.7",
    "bugsnag": "^1.7.0",
    "classnames": "2.2.3",
-    "codemirror": "5.16.0",
+    "codemirror": "^5.25.2",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "debug": "2.2.0",
-    "dotenv": "2.0.0",
+    "dotenv": "^4.0.0",
    "emoji-name-map": "1.1.2",
-    "eslint": "2.13.1",
-    "eslint-config-airbnb": "9.0.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^14.1.0",
    "eslint-import-resolver-webpack": "^0.3.1",
-    "eslint-plugin-import": "^1.9.2",
-    "eslint-plugin-jsx-a11y": "^1.5.3",
-    "eslint-plugin-react": "5.2.2",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.3",
    "exports-loader": "0.6.3",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
@ -110,22 +110,22 @@
    "koa-webpack-dev-middleware": "1.2.0",
    "koa-webpack-hot-middleware": "1.0.3",
    "localenv": "0.2.2",
-    "lodash": "4.13.1",
+    "lodash": "^4.17.4",
    "lodash.orderby": "4.4.0",
    "marked": "0.3.6",
    "marked-sanitized": "^0.1.1",
-    "mobx": "2.5.1",
-    "mobx-react": "3.5.5",
-    "mobx-react-devtools": "4.2.4",
+    "mobx": "^3.1.9",
+    "mobx-react": "^4.1.8",
+    "mobx-react-devtools": "^4.2.11",
    "moment": "2.13.0",
    "node-dev": "3.1.0",
    "node-sass": "3.8.0",
-    "nodemon": "1.9.1",
+    "nodemon": "^1.11.0",
    "normalize.css": "4.1.1",
    "normalizr": "2.0.1",
-    "pg": "6.1.0",
+    "pg": "^6.1.5",
    "pg-hstore": "2.3.2",
-    "query-string": "^4.2.2",
+    "query-string": "^4.3.4",
    "randomstring": "1.1.5",
    "raw-loader": "^0.5.1",
    "react": "15.3.2",
@ -136,10 +136,10 @@
    "react-helmet": "3.1.0",
    "react-keydown": "^1.6.1",
    "react-router": "2.8.0",
-    "rebass": "0.3.3",
+    "rebass": "^0.3.4",
    "redis": "^2.6.2",
    "redis-lock": "^0.1.0",
-    "reflexbox": "^2.0.0",
+    "reflexbox": "^2.2.3",
    "rimraf": "^2.5.4",
    "safestart": "0.8.0",
    "sass-loader": "4.0.0",
--- a/yarn.lock
+++ b/yarn.lock