Upgrade Dependencies (#873)

* Loading placeholder

* Upgrade dependencies, reduce warnings

* 👕

* Remove more unused deps

* Bump RME

.eslintrc

@@ -30,6 +30,12 @@
     ]
   },
   "settings": {
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect",
+      "flowVersion": "0.86" 
+    },
     "import/resolver": {
       "node": {
         "paths": ["app", "."]

app/components/Editor/Embed.js

@@ -9,7 +9,7 @@ export default class Embed extends React.Component<*> {
     return this.props.node.data.get('href');
   }
 
-  get matches(): ?{ component: *, matches: string[] } {
+  getMatchResults(): ?{ component: *, matches: string[] } {
     const keys = Object.keys(embeds);
 
     for (const key of keys) {
@@ -23,7 +23,7 @@ export default class Embed extends React.Component<*> {
   }
 
   render() {
-    const result = this.matches;
+    const result = this.getMatchResults();
     if (!result) return null;
 
     const { attributes, isSelected, children } = this.props;

app/scenes/Collection.js

@@ -181,6 +181,7 @@ class CollectionScene extends React.Component<Props> {
 
                 {collection.description && (
                   <RichMarkdownEditor
+                    id={collection.id}
                     key={collection.description}
                     defaultValue={collection.description}
                     readOnly

app/scenes/CollectionEdit.js

@@ -78,6 +78,7 @@ class CollectionEdit extends React.Component<Props> {
             autoFocus
           />
           <InputRich
+            id={this.props.collection.id}
             label="Description"
             onChange={this.handleDescriptionChange}
             defaultValue={this.description || ''}

app/scenes/Document/Document.js

@@ -357,6 +357,7 @@ class DocumentScene extends React.Component<Props> {
             )}
             <MaxWidth column auto>
               <Editor
+                id={document.id}
                 key={embedsDisabled ? 'embeds-disabled' : 'embeds-enabled'}
                 defaultValue={revision ? revision.text : document.text}
                 pretitle={document.emoji}

package.json

@@ -51,7 +51,6 @@
       "app"
     ],
     "setupFiles": [
-      "raf/polyfill",
       "<rootDir>/setupJest.js",
       "<rootDir>/__mocks__/window.js"
     ]
@@ -100,7 +99,6 @@
     "flow-typed": "^2.4.0",
     "fs-extra": "^4.0.2",
     "google-auth-library": "^1.5.0",
-    "history": "3.0.0",
     "html-webpack-plugin": "2.17.0",
     "http-errors": "1.4.0",
     "immutable": "^3.8.2",
@@ -130,10 +128,7 @@
     "mobx": "4.6.0",
     "mobx-react": "^5.4.2",
     "natural-sort": "^1.0.0",
-    "node-dev": "3.1.0",
     "nodemailer": "^4.4.0",
-    "normalize.css": "^7.0.0",
-    "normalizr": "2.0.1",
     "outline-icons": "^1.6.0",
     "oy-vey": "^0.10.0",
     "pg": "^6.1.5",
@@ -150,26 +145,24 @@
     "react-helmet": "^5.2.0",
     "react-keydown": "^1.7.3",
     "react-markdown": "^3.0.2",
-    "react-medium-image-zoom": "^3.0.10",
     "react-modal": "^3.1.2",
     "react-portal": "^4.0.0",
-    "react-router-dom": "^4.2.0",
+    "react-router-dom": "^4.3.1",
     "react-waypoint": "^7.3.1",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
-    "rich-markdown-editor": "^8.0.2",
+    "rich-markdown-editor": "^8.1.3",
     "safestart": "1.1.0",
     "sequelize": "4.28.6",
     "sequelize-cli": "^2.7.0",
     "sequelize-encrypted": "0.1.0",
     "slug": "0.9.1",
-    "string-hash": "^1.1.0",
     "string-replace-to-array": "^1.0.3",
     "style-loader": "^0.18.2",
     "styled-components": "^4.1.3",
-    "styled-components-breakpoint": "^1.0.1",
-    "styled-components-grid": "^2.2.0",
-    "styled-normalize": "^2.2.1",
+    "styled-components-breakpoint": "^2.1.1",
+    "styled-components-grid": "^2.2.1",
+    "styled-normalize": "^8.0.4",
     "tmp": "0.0.33",
     "uglifyjs-webpack-plugin": "1.2.5",
     "url-loader": "^0.6.2",
@@ -179,17 +172,15 @@
     "webpack-manifest-plugin": "^1.3.2"
   },
   "devDependencies": {
-    "babel-eslint": "^8.1.2",
+    "babel-eslint": "^9.0.0",
     "babel-jest": "22",
-    "enzyme": "2.8.2",
-    "enzyme-to-json": "^1.5.1",
-    "eslint": "^4.14.0",
-    "eslint-config-react-app": "^2.0.1",
+    "eslint": "^5.12.1",
+    "eslint-config-react-app": "^3.0.6",
     "eslint-plugin-flowtype": "^2.40.1",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^2.4.0",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-react": "^7.12.4",
     "fetch-test-server": "^1.1.0",
     "flow-bin": "0.86.0",
     "identity-obj-proxy": "^3.0.0",
@@ -200,8 +191,6 @@
     "mobx-react-devtools": "^6.0.3",
     "nodemon": "1.11.0",
     "prettier": "1.8.2",
-    "raf": "^3.4.0",
-    "react-test-renderer": "^16.1.0",
     "rimraf": "^2.5.4"
   },
   "version": "0.17.0"

server/static/dev.html

@@ -3,28 +3,38 @@
   <head>
     <title>Outline</title>
     <link href="/static/styles.css" rel="stylesheet">
-  </head>
-  <style>
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-    }
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+      }
 
-    body {
-      display: flex;
-      width: 100%;
-      height: 100%;
-    }
+      body {
+        display: flex;
+        width: 100%;
+        height: 100%;
+      }
 
-    #root {
-      flex: 1;
-      min-height: 100vh;
-    }
-  </style>
+      #root {
+        flex: 1;
+        min-height: 100vh;
+      }
+
+      #sidebar-placeholder {
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          width: 280px;
+          background: #F4F7FA;
+        }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div id="sidebar-placeholder"></div>
+    </div>
     <script src="/static/bundle.js"></script>
   </body>
 </html>

server/static/index.html

@@ -21,10 +21,21 @@
         flex: 1;
         min-height: 100vh;
       }
+
+      #sidebar-placeholder {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 280px;
+        background: #F4F7FA;
+      }
     </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div id="sidebar-placeholder"></div>
+    </div>
     <script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js" data-apikey="<%= BUGSNAG_KEY %>"></script>
   </body>
 </html>

setupJest.js

@@ -1,13 +1,4 @@
 /* eslint-disable */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
 import localStorage from './__mocks__/localStorage';
 
-const snap = children => {
-  const wrapper = shallow(children);
-  expect(toJson(wrapper)).toMatchSnapshot();
-};
-
 global.localStorage = localStorage;
-global.snap = snap;