Fixed linting errors and warnings

frontend/components/Document/Document.js

@@ -2,11 +2,13 @@
 import React from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
-import type { Document as DocumentType } from 'types';
+
 import PublishingInfo from '../PublishingInfo';
 import styles from './Document.scss';
 import DocumentHtml from './components/DocumentHtml';
 
+import type { Document as DocumentType } from 'types';
+
 @observer class Document extends React.Component {
   props: {
     document: DocumentType,

frontend/components/DocumentPreview/DocumentPreview.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { toJS } from 'mobx';
-
 import { Link } from 'react-router';
 
-import PublishingInfo from 'components/PublishingInfo';
-
 import styles from './DocumentPreview.scss';
 
+import PublishingInfo from 'components/PublishingInfo';
+
 class Document extends React.Component {
   static propTypes = {
     document: React.PropTypes.object.isRequired,

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js

@@ -2,8 +2,14 @@ import React from 'react';
 
 import styles from './MoreIcon.scss';
 
-const MoreIcon = props => {
+const MoreIcon = () => {
-  return <img src={require('./assets/more.svg')} className={styles.icon} />;
+  return (
+    <img
+      alt="More"
+      src={require('./assets/more.svg')}
+      className={styles.icon}
+    />
+  );
 };
 
 export default MoreIcon;

frontend/components/Layout/Layout.js

@@ -5,11 +5,11 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import _ from 'lodash';
+import { Flex } from 'reflexbox';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
-import { Flex } from 'reflexbox';
+
 import LoadingIndicator from 'components/LoadingIndicator';
-import Alert from 'components/Alert';
 
 import styles from './Layout.scss';
 import classNames from 'classnames/bind';

frontend/components/Layout/components/Title/Title.js

@@ -1,16 +1,16 @@
+// @flow
 import React from 'react';
 import _ from 'lodash';
+import styled from 'styled-components';
 
-import styles from './Title.scss';
+type Props = {
-import classNames from 'classnames/bind';
+  children: string,
-const cx = classNames.bind(styles);
+  truncate?: number,
+  placeholder: string,
+};
 
 class Title extends React.Component {
-  static propTypes = {
+  props: Props;
-    children: React.PropTypes.string,
-    truncate: React.PropTypes.number,
-    placeholder: React.PropTypes.string,
-  };
 
   render() {
     let title;
@@ -29,15 +29,16 @@ class Title extends React.Component {
     return (
       <span>
         {title && <span>&nbsp;/&nbsp;</span>}
-        <span
+        <TitleText title={this.props.children} untitled={usePlaceholder}>
-          title={this.props.children}
-          className={cx(styles.title, { untitled: usePlaceholder })}
-        >
           {title}
-        </span>
+        </TitleText>
       </span>
     );
   }
 }
 
+const TitleText = styled.span`
+  opacity: ${props => (props.untitled ? 0.5 : 1)};
+`;
+
 export default Title;

frontend/components/Layout/components/Title/Title.scss

@@ -1,7 +0,0 @@
-.title {
-
-}
-
-.untitled {
-  color: #ccc;
-}

frontend/components/Layout/components/Title/index.js

@@ -1,2 +1,3 @@
+// @flow
 import Title from './Title';
 export default Title;

frontend/components/Tree/Node.js

@@ -25,7 +25,7 @@ class Node extends React.Component {
           }}
           onClick={this.handleCollapse}
         >
-          <img src={require('./assets/chevron.svg')} />
+          <img alt="Expand" src={require('./assets/chevron.svg')} />
         </span>
       );
     }
@@ -82,7 +82,6 @@ class Node extends React.Component {
   };
 
   render() {
-    const tree = this.props.tree;
     const index = this.props.index;
     const dragging = this.props.dragging;
     const node = index.node;

frontend/components/Tree/UiTree.js

@@ -4,7 +4,7 @@ const Node = require('./Node');
 
 import styles from './Tree.scss';
 
-module.exports = React.createClass({
+export default React.createClass({
   displayName: 'UITree',
 
   propTypes: {
@@ -175,14 +175,14 @@ module.exports = React.createClass({
     } else if (diffY > dragging.h) {
       // down
       if (index.next) {
-        var below = tree.getIndex(index.next);
+        let below = tree.getIndex(index.next);
         if (below.children && below.children.length && !below.node.collapsed) {
           newIndex = tree.move(index.id, index.next, 'prepend');
         } else {
           newIndex = tree.move(index.id, index.next, 'after');
         }
       } else {
-        var below = tree.getNodeByTop(index.top + index.height);
+        let below = tree.getNodeByTop(index.top + index.height);
         if (below && below.parent !== index.id) {
           if (below.children && below.children.length) {
             newIndex = tree.move(index.id, below.id, 'prepend');

frontend/scenes/DocumentScene/DocumentSceneStore.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { browserHistory } from 'react-router';
 import {
   observable,
   action,
@@ -8,7 +9,6 @@ import {
   autorunAsync,
 } from 'mobx';
 import { client } from 'utils/ApiClient';
-import { browserHistory } from 'react-router';
 
 const DOCUMENT_PREFERENCES = 'DOCUMENT_PREFERENCES';
 

frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js

@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
 
 import { Flex } from 'reflexbox';
 import Tree from 'components/Tree';

frontend/scenes/Home/animation.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Frame } from 'react-keyframes';
-
-const frames = [];
-const p = node => frames.push(node);
-const E = props => {
-  return (
-    <Frame duration={props.duration || 300} component="div">
-      {props.children}
-    </Frame>
-  );
-};
-
-const line1 = <p>Hi there,</p>;
-const line2 = <p>We're excited to share what we’re building.</p>;
-const line3 = <p>We <strong>**love**</strong> Markdown,</p>;
-const line4 = <p>but we also get that it's not for everyone.</p>;
-const line5 = <p>Together with you,</p>;
-const line6 = <p>we want to build the best place to</p>;
-const line7 = <p>share ideas,</p>;
-const line8 = <p>tell stories,</p>;
-const line9 = <p>and build knowledge.</p>;
-const line10 = <p>We're just getting started.</p>;
-const line11 = <p>Welcome to Atlas.</p>;
-
-p(
-  <E>
-    {line1}
-    {line2}
-    {line3}
-    {line4}
-    {line5}
-    {line6}
-    {line7}
-    {line8}
-    {line9}
-    {line10}
-    {line11}
-  </E>
-);
-
-// Hmms leaving this here for now, would be nice to something
-
-export default frames;

frontend/scenes/Search/Search.js

@@ -1,17 +1,16 @@
 import React, { PropTypes } from 'react';
 import { observer } from 'mobx-react';
 import _ from 'lodash';
-
 import { Flex } from 'reflexbox';
+
+import SearchField from './components/SearchField';
+import styles from './Search.scss';
+import SearchStore from './SearchStore';
+
 import Layout, { Title } from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
-import SearchField from './components/SearchField';
 import DocumentPreview from 'components/DocumentPreview';
 
-import styles from './Search.scss';
-
-import SearchStore from './SearchStore';
-
 @observer class Search extends React.Component {
   static propTypes = {
     route: PropTypes.object.isRequired,

frontend/scenes/Settings/SettingsStore.js

@@ -1,4 +1,4 @@
-import { observable, action, runInAction, toJS } from 'mobx';
+import { observable, action, runInAction } from 'mobx';
 import { client } from 'utils/ApiClient';
 
 class SearchStore {

frontend/utils/emojify.js

@@ -1,9 +1,8 @@
 import emojiMapping from './emoji-mapping.json';
 
-const EMOJI_REGEX = /:([A-Za-z0-9_\-\+]+?):/gm;
+const EMOJI_REGEX = /:([A-Za-z0-9_\-+]+?):/gm;
 
 const emojify = (text = '') => {
-  const emojis = text.match(EMOJI_REGEX) || [];
   let emojifiedText = text;
 
   emojifiedText = text.replace(EMOJI_REGEX, (match, p1, offset, string) => {