Update to latest versions of React, Material-UI (#68)

* Bump all dependencies

* Update version

* Update grid properties

* Remove material lab package

* Remove duplicate copy of react from docs

* Cast available assets

* Capture and print React errors

* Fix newline wrapping of circular progress with container div

* Remove three and material UI as dependencies of docs

Author: Abbondanzo

docs/package-lock.json

@@ -14,22 +14,16 @@
   ],
   "author": "Saltie",
   "license": "MIT",
-  "dependencies": {
-    "@material-ui/core": "^3.9.3",
-    "@material-ui/lab": "^3.0.0-alpha.30",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "three": "^0.108.0"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@types/react-dom": "^16.8.4",
+    "@types/react-dom": "^16.9.4",
     "autodll-webpack-plugin": "^0.4.2",
     "awesome-typescript-loader": "^5.2.1",
-    "file-loader": "^3.0.1",
+    "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
-    "typescript": "^3.4.5",
-    "webpack": "^4.30.0",
-    "webpack-dev-server": "^3.3.1"
+    "typescript": "^3.7.2",
+    "webpack": "^4.41.2",
+    "webpack-dev-server": "^3.9.0"
   },
   "browserslist": [
     ">0.2%",

docs/package.json

@@ -31,7 +31,7 @@ class CompactViewer extends Component<Props, State> {
     }
 
     return (
-      <Grid container direction="column" justify="center" spacing={24}>
+      <Grid container direction="column" justify="center" spacing={3}>
         <Grid item style={{ minHeight: 0, maxWidth: 900, width: "100%" }}>
           <ReplayViewer gameManager={gameManager}>
             <CompactPlayControls />

docs/src/components/CompactViewer.tsx

@@ -1,12 +1,6 @@
-import React, { Component } from "react"
-
-import {
-  FPSClock,
-  GameBuilderOptions,
-  loadReplay,
-  ReplayData,
-  ReplayMetadata,
-} from "../../../src"
+import React, { Component, ErrorInfo } from "react"
+
+import { FPSClock, GameBuilderOptions, loadReplay } from "../../../src"
 import CompactViewer from "./CompactViewer"
 import Viewer from "./Viewer"
 
@@ -16,6 +10,8 @@ interface Props {
 
 interface State {
   options?: GameBuilderOptions
+  error?: Error
+  errorInfo?: ErrorInfo
 }
 
 class Main extends Component<Props, State> {
@@ -38,12 +34,19 @@ class Main extends Component<Props, State> {
     })
   }
 
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ error, errorInfo })
+  }
+
   render() {
-    const { options } = this.state
+    const { options, error, errorInfo } = this.state
 
     if (!options) {
       return "Loading..."
+    } else if (error || errorInfo) {
+      return JSON.stringify(error)
     }
+
     return this.props.compact ? (
       <CompactViewer options={options} />
     ) : (

docs/src/components/Main.tsx

@@ -41,7 +41,7 @@ class Viewer extends Component<Props, State> {
         className={root}
         direction="column"
         justify="center"
-        spacing={24}
+        spacing={3}
       >
         <Grid item style={{ minHeight: 0, maxWidth: 900, width: "100%" }}>
           <ReplayViewer gameManager={gameManager} autoplay />
@@ -51,7 +51,7 @@ class Viewer extends Component<Props, State> {
             container
             justify="space-between"
             alignItems="center"
-            spacing={24}
+            spacing={3}
           >
             <Grid item>
               <PlayControls />