chore(examples): use mobx v6 in using-mobx example

examples/using-mobx/package.json

@@ -7,8 +7,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write \"src/**/*.js\"",
-    "lint": "eslint **/*.{js,jsx} --quiet -o linterrors.txt --ignore-path .gitignore"
+    "format": "prettier --write \"src/**/*.js\""
   },
   "keywords": [
     "gatsby",
@@ -17,21 +16,13 @@
   "license": "MIT",
   "dependencies": {
     "gatsby": "next",
-    "mobx": "^5.15.7",
-    "mobx-react": "^6.3.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "mobx": "^6.3.10",
+    "mobx-react": "^7.2.1",
+    "prop-types": "^15.8.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
     "prettier": "2.1.1"
   }
 }

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

@@ -1,16 +1,17 @@
-import React, { Fragment } from "react"
-import { observer, inject } from "mobx-react"
+import React, { useContext } from "react"
+import { MobXProviderContext, observer } from "mobx-react"
 
-const Counter = inject(`store`)(
-  observer(({ store }) => (
-    <Fragment>
+const Counter = observer(() => {
+  const store = useContext(MobXProviderContext)
+  return (
+    <>
       <div>Counted to: {store.Count}</div>
       <div>
         <button onClick={() => store.Increment()}>Add</button>
         <button onClick={() => store.Decrement()}>Subtract</button>
       </div>
-    </Fragment>
-  ))
-)
+    </>
+  )
+})
 
 export default Counter

examples/using-mobx/src/models/CounterModel.js

@@ -1,8 +1,16 @@
-import { observable, action, decorate } from "mobx"
+import { observable, action, makeObservable } from "mobx"
 
 class CounterModel {
   Count = 0
 
+  constructor() {
+    makeObservable(this, {
+      Count: observable,
+      Increment: action.bound,
+      Decrement: action.bound,
+    })
+  }
+
   Increment() {
     this.Count += 1
   }
@@ -11,10 +19,6 @@ class CounterModel {
     this.Count -= 1
   }
 }
-decorate(CounterModel, {
-  Count: observable,
-  Increment: action,
-  Decrement: action,
-})
+
 const CounterStore = new CounterModel()
 export default CounterStore

examples/using-mobx/wrap-with-provider.js

@@ -1,8 +1,12 @@
 import React from "react"
-import { Provider } from "mobx-react"
+import { enableStaticRendering, MobXProviderContext } from "mobx-react"
 import CounterStore from "./src/models/CounterModel"
 
-// eslint-disable-next-line react/display-name,react/prop-types
-export default ({ element }) => (
-  <Provider store={CounterStore}>{element}</Provider>
+// https://mobx.js.org/react-integration.html#static-rendering
+enableStaticRendering(true)
+
+const App =({ element }) => (
+  <MobXProviderContext.Provider value={CounterStore}>{element}</MobXProviderContext.Provider>
 )
+
+export default App;