fix(examples): Update mobx example (#17479)

* fix(example): dependencies updated and devtools removed

Updated the dependencies for the example. Removed mobx-react-devtools as it's deprecated

* added examples and edited the issue text

* destructure the component and lint correction

Author: jonniebigodes

examples/using-mobx/package.json

@@ -3,40 +3,36 @@
   "version": "1.0.0",
   "private": true,
   "description": "Gatsby example site that shows use of mobx",
+  "author": "jonniebigodes",
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
-    "lint": "eslint **/*.{js,jsx} --quiet -o linterrors.txt --ignore-path .gitignore",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "deploy": "gh-pages -b gh-pages -d public",
-    "pre-deploy": "gatsby build --prefix-paths"
+    "format": "prettier --write \"src/**/*.js\"",
+    "lint": "eslint **/*.{js,jsx} --quiet -o linterrors.txt --ignore-path .gitignore"
   },
-  "main": "n/a",
+  
   "keywords": [
     "gatsby",
     "mobx"
   ],
-  "author": "jonniebigodes <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "gatsby": "^2.0.21",
-    "mobx": "^5.1.0",
-    "mobx-react": "^5.2.8",
-    "mobx-react-devtools": "^6.0.3",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0"
+    "gatsby": "^2.15.9",
+    "mobx": "^5.13.0",
+    "mobx-react": "^6.1.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   },
   "devDependencies": {
-    "babel-eslint": "^9.0.0",
-    "eslint": "^5.5.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.0.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^2.6.2",
-    "eslint-plugin-react": "^7.11.1",
-    "gh-pages": "^1.2.0",
-    "prettier": "^1.14.2"
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.3.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.3",
+    "prettier": "^1.18.2"
   }
 }

examples/using-mobx/readme.md

@@ -9,10 +9,15 @@ Gatsby example site that shows use of mobx.
 To use mobx in a Gatsby site you'll need to hook in to two of Gatsby's extension points.
 
 Once in wrapRootElement which runs during Gatsby's server rendering process, and once in wrapRootElement which is part of Gatsby's browser APIs.
-Check out [./gatsby-ssr.js](./gatsby-ssr.js) and [./gatsby-browser.js](./gatsby-browser.js) to see how this is implemented in this example
 
-## More Information on MobX
+Check out [./gatsby-ssr.js](./gatsby-ssr.js) and [./gatsby-browser.js](./gatsby-browser.js) to see how this is implemented in this example.
 
-[Docs](https://mobx.js.org/)
+## More information
 
-[Examples](https://github.com/mobxjs/mobx-examples)
+[mobx-react-devtools](https://github.com/mobxjs/mobx-react-devtools) package is now deprecated and was removed. As it could generate the error [Cannot read property 'on' of undefined](https://github.com/mobxjs/mobx-react-devtools/issues/117).
+
+To allow access to some form of development tools, install the plugin for your browser of choice like mentioned [here](https://github.com/mobxjs/mobx-devtools).
+
+[Official Documentation](https://mobx.js.org/)
+
+[Mobx Examples](https://github.com/mobxjs/mobx-examples)

examples/using-mobx/src/components/layout.js

@@ -1,32 +1,30 @@
-import React, { Component } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { Link } from "gatsby"
 import Counter from "./Counter"
 
-import DevTools from "mobx-react-devtools"
+const DefaultLayout = ({ children }) => (
+  <div>
+    <Link to="/">
+      <h3>MobX example</h3>
+    </Link>
+    <Counter />
 
-class DefaultLayout extends Component {
-  render() {
-    return (
-      <div>
-        <Link to="/">
-          <h3>MobX example</h3>
-        </Link>
-        <DevTools />
-        <Counter />
-        <ul>
-          <li>
-            <Link to="/a/">a</Link>
-          </li>
-          <li>
-            <Link to="/b/">b</Link>
-          </li>
-          <li>
-            <Link to="/c/">c</Link>
-          </li>
-        </ul>
-        {this.props.children}
-      </div>
-    )
-  }
+    <ul>
+      <li>
+        <Link to="/a/">a</Link>
+      </li>
+      <li>
+        <Link to="/b/">b</Link>
+      </li>
+      <li>
+        <Link to="/c/">c</Link>
+      </li>
+    </ul>
+    {children}
+  </div>
+)
+DefaultLayout.propTypes = {
+  children: PropTypes.object.isRequired,
 }
 export default DefaultLayout