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

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

3 files changed, 18 insertions, 11 deletions

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 66dc8af41..502f87225 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { observable, reaction } from 'mobx';
+import { makeObservable, observable, reaction } from 'mobx';
 import ElectronWebView from 'react-electron-web-view';
 import { join } from 'path';
 
@@ -22,6 +22,8 @@ class ServiceWebview extends Component {
   constructor(props) {
     super(props);
 
+    makeObservable(this);
+
     reaction(
       () => this.webview,
       () => {
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.jsx
index b38b0e3c3..da700b5b1 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import Confetti from 'react-confetti';
 import ms from 'ms';
@@ -50,6 +50,7 @@ class Services extends Component {
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
     userHasCompletedSignup: PropTypes.bool.isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
     classes: PropTypes.object.isRequired,
     isSpellcheckerEnabled: PropTypes.bool.isRequired,
   };
@@ -58,12 +59,16 @@ class Services extends Component {
     services: [],
   };
 
-  state = {
-    showConfetti: true,
-  };
-
   _confettiTimeout = null;
 
+  constructor() {
+    super();
+
+    this.state = {
+      showConfetti: true,
+    };
+  }
+
   componentDidMount() {
     this._confettiTimeout = window.setTimeout(() => {
       this.setState({
@@ -117,10 +122,7 @@ class Services extends Component {
                 style={{ maxHeight: '50vh' }}
               />
               <Appear timeout={300} transitionName="slideUp">
-                <Link
-                  to='/settings/recipes'
-                  className="button"
-                >
+                <Link to="/settings/recipes" className="button">
                   {intl.formatMessage(messages.getStarted)}
                 </Link>
               </Appear>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 9d2b6b333..a996990b5 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -8,7 +8,7 @@ import { SortableElement } from 'react-sortable-hoc';
 import injectSheet from 'react-jss';
 import ms from 'ms';
 
-import { observable, autorun, reaction } from 'mobx';
+import { observable, autorun, reaction, makeObservable } from 'mobx';
 import { mdiExclamation } from '@mdi/js';
 import ServiceModel from '../../../models/Service';
 import { cmdOrCtrlShortcutKey, shiftKey, altKey } from '../../../environment';
@@ -144,6 +144,9 @@ class TabItem extends Component {
 
   constructor(props) {
     super(props);
+
+    makeObservable(this);
+
     this.state = {
       showShortcutIndex: false,
     };