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

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

2 files changed, 17 insertions, 7 deletions

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) {