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

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

9 files changed, 33 insertions, 28 deletions

diff --git a/src/features/communityRecipes/store.ts b/src/features/communityRecipes/store.ts
index 34e6cd92c..d3b3318fa 100644
--- a/src/features/communityRecipes/store.ts
+++ b/src/features/communityRecipes/store.ts
@@ -1,7 +1,9 @@
 import { computed } from 'mobx';
 import FeatureStore from '../utils/FeatureStore';
 
-const debug = require('../../preload-safe-debug')('Ferdium:feature:communityRecipes:store');
+const debug = require('../../preload-safe-debug')(
+  'Ferdium:feature:communityRecipes:store',
+);
 
 export class CommunityRecipesStore extends FeatureStore {
   stores: any;
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 1a3d6c1e7..0f195f10d 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -1,4 +1,4 @@
-import { computed, action, observable } from 'mobx';
+import { computed, action, observable, makeObservable } from 'mobx';
 import localStorage from 'mobx-localstorage';
 
 import { ThemeType } from '../../themes';
@@ -33,6 +33,12 @@ export default class TodoStore extends FeatureStore {
 
   isInitialized = false;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @computed get width() {
     const width = this.settings.width || DEFAULT_TODOS_WIDTH;
 
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index 3dac6997c..e5567eec5 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
-import { autorun, observable } from 'mobx';
+import { autorun, makeObservable, observable } from 'mobx';
 import WebControls from '../components/WebControls';
 import ServicesStore from '../../../stores/ServicesStore';
 import Service from '../../../models/Service';
@@ -27,6 +27,12 @@ class WebControlsScreen extends Component {
 
   autorunDisposer = null;
 
+  constructor(props) {
+    super(props);
+
+    makeObservable(this);
+  }
+
   componentDidMount() {
     const { service } = this.props;
 
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 3c7c36a3d..7e8541c44 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import injectSheet from 'react-jss';
 
 import Infobox from '../../../components/ui/infobox/index';
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.jsx
index 3454fdbe9..b0b0e639a 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.jsx
@@ -12,9 +12,7 @@ import Icon from '../../../components/ui/icon';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import workspaceActions from '../actions';
 import { workspaceStore } from '../index';
-import {
-  getUserWorkspacesRequest,
-} from '../api';
+import { getUserWorkspacesRequest } from '../api';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.tsx b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
index f0c7e4574..0b66db0d0 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.tsx
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
@@ -1,23 +1,14 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 
+import { StoresProps } from '../../../@types/ferdium-components.types';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
 import Workspace from '../models/Workspace';
 import { workspaceStore } from '../index';
 import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api';
-import { ServicesStore, WorkspacesStore } from '../../../@types/stores.types';
 
-type Props = {
-  actions: {
-    workspaces: WorkspacesStore;
-  };
-  stores: {
-    services: ServicesStore;
-  };
-};
-
-class EditWorkspaceScreen extends Component<Props> {
+class EditWorkspaceScreen extends Component<StoresProps> {
   // @ts-expect-error Not all code paths return a value.
   onDelete = () => {
     const { workspaceBeingEdited } = workspaceStore;
diff --git a/src/features/workspaces/containers/WorkspacesScreen.tsx b/src/features/workspaces/containers/WorkspacesScreen.tsx
index 5b153fb50..d43dc5efa 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.tsx
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
+import { StoresProps } from '../../../@types/ferdium-components.types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { workspaceStore } from '../index';
@@ -9,15 +10,8 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
-import { WorkspacesStore } from '../../../@types/stores.types';
 
-type Props = {
-  actions: {
-    workspaces: WorkspacesStore;
-  };
-};
-
-class WorkspacesScreen extends Component<Props> {
+class WorkspacesScreen extends Component<StoresProps> {
   render() {
     const { actions } = this.props;
     return (
diff --git a/src/features/workspaces/models/Workspace.ts b/src/features/workspaces/models/Workspace.ts
index bc636011d..98086289f 100644
--- a/src/features/workspaces/models/Workspace.ts
+++ b/src/features/workspaces/models/Workspace.ts
@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 
 import { KEEP_WS_LOADED_USID } from '../../../config';
 
@@ -18,6 +18,8 @@ export default class Workspace {
       throw new Error('Workspace requires Id');
     }
 
+    makeObservable(this);
+
     this.id = data.id;
     this.name = data.name;
     this.order = data.order;
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 9b4c4e928..e8c5d0590 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -1,4 +1,4 @@
-import { computed, observable, action } from 'mobx';
+import { computed, observable, action, makeObservable } from 'mobx';
 import localStorage from 'mobx-localstorage';
 import matchRoute from '../../helpers/routing-helpers';
 import workspaceActions from './actions';
@@ -32,6 +32,12 @@ export default class WorkspacesStore extends FeatureStore {
 
   @observable isSettingsRouteActive = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @computed get workspaces() {
     if (!this.isFeatureActive) return [];
     return getUserWorkspacesRequest.result || [];