chore: Mobx & React-Router upgrade (#406)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

13 files changed, 71 insertions, 23 deletions

diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts
index 0ecfdb7c0..ed6d0e263 100644
--- a/src/stores/AppStore.ts
+++ b/src/stores/AppStore.ts
@@ -7,7 +7,7 @@ import {
   getCurrentWindow,
   process as remoteProcess,
 } from '@electron/remote';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import moment from 'moment';
 import AutoLaunch from 'auto-launch';
 import ms from 'ms';
@@ -105,6 +105,8 @@ export default class AppStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.app.notify.listen(this._notify.bind(this));
     this.actions.app.setBadge.listen(this._setBadge.bind(this));
@@ -510,7 +512,7 @@ export default class AppStore extends TypedStore {
   }
 
   _setLocale() {
-    if (this.stores.user.isLoggedIn && this.stores.user.data.locale) {
+    if (this.stores.user?.isLoggedIn && this.stores.user?.data.locale) {
       this.locale = this.stores.user.data.locale;
     } else if (!this.locale) {
       this.locale = this._getDefaultLocale();
diff --git a/src/stores/FeaturesStore.ts b/src/stores/FeaturesStore.ts
index b63c252df..ed0c6c17b 100644
--- a/src/stores/FeaturesStore.ts
+++ b/src/stores/FeaturesStore.ts
@@ -1,5 +1,14 @@
-import { computed, observable, runInAction } from 'mobx';
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
 
+import { Stores } from '../@types/stores.types';
+import { ApiInterface } from '../api';
+import { Actions } from '../actions/lib/actions';
 import CachedRequest from './lib/CachedRequest';
 import serviceProxy from '../features/serviceProxy';
 import basicAuth from '../features/basicAuth';
@@ -24,6 +33,12 @@ export default class FeaturesStore extends TypedStore {
 
   @observable features = {};
 
+  constructor(stores: Stores, api: ApiInterface, actions: Actions) {
+    super(stores, api, actions);
+
+    makeObservable(this);
+  }
+
   async setup(): Promise<void> {
     this.registerReactions([
       this._updateFeatures,
@@ -49,9 +64,11 @@ export default class FeaturesStore extends TypedStore {
       }
       Object.assign(features, requestResult);
     }
-    runInAction('FeaturesStore::_updateFeatures', () => {
-      this.features = features;
-    });
+    runInAction(
+      action('FeaturesStore::_updateFeatures', () => {
+        this.features = features;
+      }),
+    );
   };
 
   _monitorLoginStatus(): void {
diff --git a/src/stores/GlobalErrorStore.ts b/src/stores/GlobalErrorStore.ts
index 8c6317c91..c42e9a4af 100644
--- a/src/stores/GlobalErrorStore.ts
+++ b/src/stores/GlobalErrorStore.ts
@@ -1,4 +1,4 @@
-import { observable, action } from 'mobx';
+import { observable, action, makeObservable } from 'mobx';
 import { Actions } from '../actions/lib/actions';
 import { ApiInterface } from '../api';
 import { Stores } from '../@types/stores.types';
@@ -34,6 +34,8 @@ export default class GlobalErrorStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     window.addEventListener('error', (...errorArgs: any[]): void => {
       // @ts-ignore ts-message: Expected 5 arguments, but got 2.
       this._handleConsoleError.call(this, ['error', ...errorArgs]);
diff --git a/src/stores/RecipePreviewsStore.ts b/src/stores/RecipePreviewsStore.ts
index b1d50c8b8..1c95e6b54 100644
--- a/src/stores/RecipePreviewsStore.ts
+++ b/src/stores/RecipePreviewsStore.ts
@@ -1,4 +1,5 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
+
 import { Actions } from '../actions/lib/actions';
 import { ApiInterface } from '../api';
 import Recipe from '../models/Recipe';
@@ -28,6 +29,8 @@ export default class RecipePreviewsStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.recipePreview.search.listen(this._search.bind(this));
   }
diff --git a/src/stores/RecipesStore.ts b/src/stores/RecipesStore.ts
index 364d56dd2..25304e97c 100644
--- a/src/stores/RecipesStore.ts
+++ b/src/stores/RecipesStore.ts
@@ -1,4 +1,4 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { readJSONSync } from 'fs-extra';
 import semver from 'semver';
 
@@ -24,6 +24,8 @@ export default class RecipesStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.recipe.install.listen(this._install.bind(this));
     this.actions.recipe.update.listen(this._update.bind(this));
diff --git a/src/stores/RequestStore.ts b/src/stores/RequestStore.ts
index e5df1292d..a964c5d12 100644
--- a/src/stores/RequestStore.ts
+++ b/src/stores/RequestStore.ts
@@ -1,5 +1,5 @@
 import { ipcRenderer } from 'electron';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import ms from 'ms';
 
 import { Actions } from '../actions/lib/actions';
@@ -28,6 +28,8 @@ export default class RequestStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     this.actions.requests.retryRequiredRequests.listen(
       this._retryRequiredRequests.bind(this),
     );
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 4c1b4116c..7812d5aee 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -1,5 +1,5 @@
 import { shell } from 'electron';
-import { action, reaction, computed, observable } from 'mobx';
+import { action, reaction, computed, observable, makeObservable } from 'mobx';
 import { debounce, remove } from 'lodash';
 import ms from 'ms';
 import { ensureFileSync, pathExistsSync, writeFileSync } from 'fs-extra';
@@ -67,6 +67,8 @@ export default class ServicesStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.service.setActive.listen(this._setActive.bind(this));
     this.actions.service.blurActive.listen(this._blurActive.bind(this));
diff --git a/src/stores/SettingsStore.ts b/src/stores/SettingsStore.ts
index 0296ba0e7..a03d3c188 100644
--- a/src/stores/SettingsStore.ts
+++ b/src/stores/SettingsStore.ts
@@ -1,6 +1,7 @@
+
 import { ipcRenderer } from 'electron';
 import { getCurrentWindow } from '@electron/remote';
-import { action, computed, observable, reaction } from 'mobx';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import localStorage from 'mobx-localstorage';
 import { Stores } from '../@types/stores.types';
 import { ApiInterface } from '../api';
@@ -22,7 +23,7 @@ export default class SettingsStore extends TypedStore {
     'updateAppSettings',
   );
 
-  loaded = false;
+  @observable loaded: boolean = false;
 
   fileSystemSettingsTypes = FILE_SYSTEM_SETTINGS_TYPES;
 
@@ -34,6 +35,8 @@ export default class SettingsStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.settings.update.listen(this._update.bind(this));
     this.actions.settings.remove.listen(this._remove.bind(this));
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index c43c6d8c7..e0589729f 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -1,4 +1,4 @@
-import { action, observable, computed, reaction } from 'mobx';
+import { action, observable, computed, reaction, makeObservable } from 'mobx';
 import { nativeTheme } from '@electron/remote';
 
 import { Stores } from '../@types/stores.types';
@@ -14,6 +14,9 @@ export default class UIStore extends TypedStore {
 
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
+
+    makeObservable(this);
+
     // Register action handlers
     this.actions.ui.openSettings.listen(this._openSettings.bind(this));
     this.actions.ui.closeSettings.listen(this._closeSettings.bind(this));
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index b9c3c7576..c5e67c966 100644
--- a/src/stores/UserStore.ts
+++ b/src/stores/UserStore.ts
@@ -1,4 +1,4 @@
-import { observable, computed, action } from 'mobx';
+import { observable, computed, action, makeObservable } from 'mobx';
 import moment from 'moment';
 import jwt from 'jsonwebtoken';
 import localStorage from 'mobx-localstorage';
@@ -93,6 +93,8 @@ export default class UserStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.user.login.listen(this._login.bind(this));
     this.actions.user.retrievePassword.listen(
diff --git a/src/stores/index.ts b/src/stores/index.ts
index d31f2c933..8836f2892 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,4 +1,4 @@
-import { RouterStore } from 'mobx-react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
 import { ApiInterface } from '../api';
 import { Actions } from '../actions/lib/actions';
 import AppStore from './AppStore';
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js
index 0ac36a218..e58341790 100644
--- a/src/stores/lib/Request.js
+++ b/src/stores/lib/Request.js
@@ -1,4 +1,4 @@
-import { observable, action, computed } from 'mobx';
+import { observable, action, computed, makeObservable } from 'mobx';
 import { isEqual } from 'lodash/fp';
 
 export default class Request {
@@ -29,6 +29,8 @@ export default class Request {
   _currentApiCall = null;
 
   constructor(api, method) {
+    makeObservable(this);
+
     this._api = api;
     this._method = method;
   }
diff --git a/src/stores/lib/TypedStore.ts b/src/stores/lib/TypedStore.ts
index c97ae1aa5..e44eadd32 100644
--- a/src/stores/lib/TypedStore.ts
+++ b/src/stores/lib/TypedStore.ts
@@ -1,4 +1,4 @@
-import { computed, IReactionPublic, observable } from 'mobx';
+import { computed, IReactionPublic, makeObservable, observable } from 'mobx';
 import { Actions } from '../../actions/lib/actions';
 import { ApiInterface } from '../../api';
 import { Stores } from '../../@types/stores.types';
@@ -9,6 +9,12 @@ export default abstract class TypedStore {
 
   @observable _status: any = null;
 
+  stores: Stores;
+
+  api: ApiInterface;
+
+  actions: Actions;
+
   @computed get actionStatus() {
     return this._status || [];
   }
@@ -17,11 +23,13 @@ export default abstract class TypedStore {
     this._status = status;
   }
 
-  constructor(
-    public readonly stores: Stores,
-    public readonly api: ApiInterface,
-    public readonly actions: Actions,
-  ) {}
+  constructor(stores: Stores, api: ApiInterface, actions: Actions) {
+    makeObservable(this);
+
+    this.stores = stores;
+    this.api = api;
+    this.actions = actions;
+  }
 
   registerReactions(reactions: { (r: IReactionPublic): void }[]): void {
     for (const reaction of reactions) {