Upgrades MobX to 4.1 and mobx-react to 5.0

Updates usage of the API to match the new changes.
CityOfBoston · Mar 20, 2018 · 8b463d2 · 8b463d2
1 parent 9ab3bfb
commit 8b463d2
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 43 deletions.
diff --git a/client/app.js b/client/app.js
@@ -1,7 +1,7 @@
 // @flow
 /* global Stripe */
 
-import { useStrict } from 'mobx';
+import { configure as mobxConfigure } from 'mobx';
 import Router from 'next/router';
 
 import type { Context as NextContext } from 'next';
@@ -49,7 +49,7 @@ export function initBrowser() {
 
   browserInited = true;
 
-  useStrict(true);
+  mobxConfigure({ enforceActions: true });
 
   accessibility.attach();
   siteAnalytics.attach(window.ga);

diff --git a/client/dao/CheckoutDao.js b/client/dao/CheckoutDao.js
@@ -48,19 +48,16 @@ export default class CheckoutDao {
       });
 
       if (tokenResult.error) {
-        runInAction(
-          'CheckoutDao > tokenizeCard > createToken error result',
-          () => {
-            order.processingError = tokenResult.error.message;
-          }
-        );
+        runInAction(() => {
+          order.processingError = tokenResult.error.message;
+        });
 
         return false;
       } else {
         const { token } = tokenResult;
         const { card } = token;
 
-        runInAction('CheckoutDao > tokenizeCard > createToken success', () => {
+        runInAction(() => {
           order.cardToken = token.id;
           order.cardFunding = card.funding;
           order.info.cardLast4 = card.last4;
@@ -69,7 +66,7 @@ export default class CheckoutDao {
         return true;
       }
     } catch (err) {
-      runInAction('CheckoutDao > tokenizeCard > catch block', () => {
+      runInAction(() => {
         order.processingError =
           err.message || `Unexpected error submitting order: ${err}`;
       });
@@ -81,7 +78,7 @@ export default class CheckoutDao {
 
       return false;
     } finally {
-      runInAction('CheckoutDao > tokenizeCard > finally', () => {
+      runInAction(() => {
         order.processing = false;
       });
     }
@@ -102,7 +99,7 @@ export default class CheckoutDao {
 
       return orderId;
     } catch (err) {
-      runInAction('CheckoutDao > submit > catch block', () => {
+      runInAction(() => {
         order.processingError =
           err.message || `Unexpected error submitting order: ${err}`;
       });
@@ -114,7 +111,7 @@ export default class CheckoutDao {
 
       return null;
     } finally {
-      runInAction('CheckoutDao > submit > finally', () => {
+      runInAction(() => {
         order.processing = false;
       });
     }

diff --git a/client/death/checkout/CheckoutPage.js b/client/death/checkout/CheckoutPage.js
@@ -239,7 +239,7 @@ export default class CheckoutPageController extends React.Component<Props> {
       });
       siteAnalytics.sendEvent('UX', 'click', 'submit order');
 
-      runInAction('CheckoutPage > submitOrder > success', () => {
+      runInAction(() => {
         cart.clear();
         this.order = new Order();
       });

diff --git a/client/store/Accessibility.js b/client/store/Accessibility.js
@@ -13,15 +13,20 @@ export default class Accessibility {
   attach() {
     this.el = document.getElementById('ariaLive');
 
-    this.messageListenerDisposer = autorun('a11y message listener', () => {
-      if (this.el) {
-        this.el.innerText = this.message;
-        this.el.setAttribute(
-          'aria-live',
-          this.interrupt ? 'assertive' : 'polite'
-        );
+    this.messageListenerDisposer = autorun(
+      () => {
+        if (this.el) {
+          this.el.innerText = this.message;
+          this.el.setAttribute(
+            'aria-live',
+            this.interrupt ? 'assertive' : 'polite'
+          );
+        }
+      },
+      {
+        name: 'a11y message listener',
       }
-    });
+    );
   }
 
   detatch() {

diff --git a/client/store/Cart.js b/client/store/Cart.js
@@ -72,17 +72,22 @@ export default class Cart {
         localStorage.removeItem('cart');
       }
 
-      this.localStorageDisposer = autorun('save cart to local storage', () => {
-        localStorage.setItem(
-          'cart',
-          JSON.stringify(
-            this.entries.map(({ id, quantity }): LocalStorageEntry => ({
-              id,
-              quantity,
-            }))
-          )
-        );
-      });
+      this.localStorageDisposer = autorun(
+        () => {
+          localStorage.setItem(
+            'cart',
+            JSON.stringify(
+              this.entries.map(({ id, quantity }): LocalStorageEntry => ({
+                id,
+                quantity,
+              }))
+            )
+          );
+        },
+        {
+          name: 'save cart to local storage',
+        }
+      );
     }
   }
 

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -72,8 +72,8 @@
     "inert": "^4.2.0",
     "isomorphic-fetch": "^2.2.1",
     "mjml": "^4.0.0",
-    "mobx": "^3.3.0",
-    "mobx-react": "^4.3.2",
+    "mobx": "^4.1.0",
+    "mobx-react": "^5.0.0",
     "moment": "^2.20.1",
     "moment-timezone": "^0.5.14",
     "mssql": "^4.0.4",