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

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

23 files changed, 163 insertions, 130 deletions

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index e43be07a8..41b887974 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 
 import Form from '../../lib/Form';
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 8e1ab514e..9eca924cd 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -2,7 +2,7 @@ import { Component, Fragment } 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 classnames from 'classnames';
 
 import Infobox from '../ui/Infobox';
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 3de576ca6..eb184f1ee 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -178,7 +178,7 @@ class Login extends Component {
           <Link to={signupRoute}>
             {intl.formatMessage(messages.signupLink)}
           </Link>
-          <Link 
+          <Link
             // to={passwordRoute} // TODO: Uncomment this line after fixing password recovery in-app
             to={`${serverBase()}/user/forgot`} // TODO: Remove this line after fixing password recovery in-app
             target='_blank' // TODO: Remove this line after fixing password recovery in-app
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.jsx
index c9d592a88..c784b75c3 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.jsx
@@ -25,7 +25,7 @@ const messages = defineMessages({
   },
   changeServer: {
     id: 'login.changeServer',
-    defaultMessage: 'Change here!'
+    defaultMessage: 'Change here!',
   },
   serverless: {
     id: 'services.serverless',
@@ -65,7 +65,6 @@ class Welcome extends Component {
             className="welcome__logo"
             alt=""
           />
-          {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
         </div>
         <div className="welcome__text">
           <H1>Ferdium</H1>
@@ -82,9 +81,7 @@ class Welcome extends Component {
               {intl.formatMessage(messages.changeServerMessage, { serverNameParse })}
             </span>
             <Link to={changeServerRoute} className="button__change-server">
-                <span>
-                  {intl.formatMessage(messages.changeServer)}
-                </span>
+              <span>{intl.formatMessage(messages.changeServer)}</span>
             </Link>
           </div>
           <br />
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index e22d4eb50..f7860afc6 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -7,6 +7,7 @@ import injectSheet from 'react-jss';
 import { ipcRenderer } from 'electron';
 
 import { mdiFlash, mdiPowerPlug } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
 import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as QuickSwitch } from '../../features/quickSwitch';
@@ -83,7 +84,6 @@ class AppLayout extends Component {
     sidebar: PropTypes.element.isRequired,
     workspacesDrawer: PropTypes.element.isRequired,
     services: PropTypes.element.isRequired,
-    children: PropTypes.element,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     authRequestFailed: PropTypes.bool.isRequired,
@@ -99,10 +99,6 @@ class AppLayout extends Component {
     shouldShowServicesUpdatedInfoBar: true,
   };
 
-  static defaultProps = {
-    children: [],
-  };
-
   render() {
     const {
       classes,
@@ -110,7 +106,6 @@ class AppLayout extends Component {
       workspacesDrawer,
       sidebar,
       services,
-      children,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
       authRequestFailed,
@@ -205,7 +200,7 @@ class AppLayout extends Component {
               <QuickSwitch />
               <PublishDebugInfo />
               {services}
-              {children}
+              <Outlet />
             </div>
             <Todos />
           </div>
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,
     };
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.jsx
index d70f471d5..dea4bb387 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.jsx
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
 import ErrorBoundary from '../util/ErrorBoundary';
-import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
 
@@ -19,7 +19,6 @@ const messages = defineMessages({
 class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
-    children: oneOrManyChildElements.isRequired,
     closeSettings: PropTypes.func.isRequired,
   };
 
@@ -44,7 +43,7 @@ class SettingsLayout extends Component {
   }
 
   render() {
-    const { navigation, children, closeSettings } = this.props;
+    const { navigation, closeSettings } = this.props;
 
     const { intl } = this.props;
 
@@ -60,7 +59,8 @@ class SettingsLayout extends Component {
             />
             <div className="settings franz-form">
               {navigation}
-              {children}
+
+              <Outlet />
               <button
                 type="button"
                 className="settings__close"
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.jsx
index ad1cef1e4..bbbe8d888 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.jsx
@@ -2,10 +2,10 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
 
+import { NavLink } from 'react-router-dom';
 import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config';
-import Link from '../../ui/Link';
 import UIStore from '../../../stores/UIStore';
 import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
@@ -90,70 +90,94 @@ class SettingsNavigation extends Component {
 
     return (
       <div className="settings-navigation">
-        <Link
+        <NavLink
           to="/settings/recipes"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.availableServices)}
-        </Link>
-        <Link
+        </NavLink>
+        <NavLink
           to="/settings/services"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.yourServices)}{' '}
           <span className="badge">{serviceCount}</span>
-        </Link>
-        <Link
+        </NavLink>
+        <NavLink
           to="/settings/workspaces"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.yourWorkspaces)}{' '}
           <span className="badge">{workspaceCount}</span>
-        </Link>
+        </NavLink>
         {!isUsingWithoutAccount && (
-          <Link
+          <NavLink
             to="/settings/user"
-            className="settings-navigation__link"
-            activeClassName="is-active"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
           >
             {intl.formatMessage(messages.account)}
-          </Link>
+          </NavLink>
         )}
         {isUsingFranzServer && (
-          <Link
+          <NavLink
             to="/settings/team"
-            className="settings-navigation__link"
-            activeClassName="is-active"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
           >
             {intl.formatMessage(messages.team)}
-          </Link>
+          </NavLink>
         )}
-        <Link
+        <NavLink
           to="/settings/app"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(globalMessages.settings)}
-          {stores.settings.app.automaticUpdates && (stores.ui.showServicesUpdatedInfoBar ||
-            (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE ||
-              stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED)) && (
-            <span className="update-available">•</span>
-          )}
-        </Link>
-        <Link
+          {stores.settings.app.automaticUpdates &&
+            (stores.ui.showServicesUpdatedInfoBar ||
+              stores.app.updateStatus ===
+                stores.app.updateStatusTypes.AVAILABLE ||
+              stores.app.updateStatus ===
+                stores.app.updateStatusTypes.DOWNLOADED) && (
+              <span className="update-available">•</span>
+            )}
+        </NavLink>
+        <NavLink
           to="/settings/support"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.supportFerdium)}
-        </Link>
+        </NavLink>
         <span className="settings-navigation__expander" />
         <button
           type="button"
-          to='/auth/logout'
+          to="/auth/logout"
           className="settings-navigation__link"
           onClick={this.handleLogout.bind(this)}
         >
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.jsx
index c05144117..589b97ecd 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.jsx
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 import injectSheet from 'react-jss';
 
@@ -179,30 +179,33 @@ class RecipesDashboard extends Component {
             throttle
           />
           <div className="recipes__navigation">
-            <Link
+            <NavLink
               to="/settings/recipes"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={() =>
+                recipeFilter === 'featured' ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.ferdiumPicksRecipes)}
-            </Link>
-            <Link
+            </NavLink>
+            <NavLink
               to="/settings/recipes/all"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={({ isActive }) =>
+                isActive && recipeFilter === 'all' ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.allRecipes)}
-            </Link>
-            <Link
+            </NavLink>
+            <NavLink
               to="/settings/recipes/dev"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={({ isActive }) =>
+                isActive && !searchNeedle ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.customRecipes)}
-            </Link>
+            </NavLink>
             <a
               href={FERDIUM_SERVICE_REQUEST}
               target="_blank"
@@ -257,24 +260,26 @@ class RecipesDashboard extends Component {
                   />
                 ))}
               </div>
-              {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && (
-                <div className="align-middle settings__empty-state">
-                  {customWebsiteRecipe && customWebsiteRecipe.id && (
-                    <RecipeItem
-                      key={customWebsiteRecipe.id}
-                      recipe={customWebsiteRecipe}
-                      onClick={() =>
-                        showAddServiceInterface({
-                          recipeId: customWebsiteRecipe.id,
-                        })
-                      }
-                    />
-                  )}
-                  <p className="settings__empty-state-text">
-                    {intl.formatMessage(messages.nothingFound)}
-                  </p>
-                </div>
-              )}
+              {hasLoadedRecipes &&
+                recipes.length === 0 &&
+                recipeFilter !== 'dev' && (
+                  <div className="align-middle settings__empty-state">
+                    {customWebsiteRecipe && customWebsiteRecipe.id && (
+                      <RecipeItem
+                        key={customWebsiteRecipe.id}
+                        recipe={customWebsiteRecipe}
+                        onClick={() =>
+                          showAddServiceInterface({
+                            recipeId: customWebsiteRecipe.id,
+                          })
+                        }
+                      />
+                    )}
+                    <p className="settings__empty-state-text">
+                      {intl.formatMessage(messages.nothingFound)}
+                    </p>
+                  </div>
+                )}
               {recipeFilter === 'dev' && devRecipes.length > 0 && (
                 <div className={classes.devRecipeList}>
                   <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index f69d86726..73136529a 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import normalizeUrl from 'normalize-url';
 
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 991817175..fdcdb54c9 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Infobox from '../../ui/Infobox';
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index c5bb1433c..ac1c30ecb 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import SearchInput from '../../ui/SearchInput';
@@ -27,8 +27,7 @@ const messages = defineMessages({
   },
   noServiceFound: {
     id: 'settings.services.nothingFound',
-    defaultMessage:
-      'Sorry, but no service matched your search term.',
+    defaultMessage: 'Sorry, but no service matched your search term.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index 436a6b76b..c2773a47d 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import Input from '../../ui/input/index';
 import Form from '../../../lib/Form';
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 5ab19bf74..714fc5a68 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
 import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../prop-types';
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 26fd6bcfe..a8bbfe730 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -169,20 +169,18 @@ class ButtonComponent extends Component<IProps> {
     busy: false,
   };
 
-  componentWillMount() {
-    this.setState({ busy: this.props.busy });
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      busy: props.busy || false,
+    };
   }
 
-  componentWillReceiveProps(nextProps: IProps) {
-    if (nextProps.busy !== this.props.busy) {
-      if (this.props.busy) {
-        setTimeout(() => {
-          this.setState({ busy: nextProps.busy });
-        }, 300);
-      } else {
-        this.setState({ busy: nextProps.busy });
-      }
-    }
+  static getDerivedStateFromProps(nextProps: IProps) {
+    return {
+      busy: nextProps.busy,
+    };
   }
 
   render() {
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index 976ed5bc4..d1d7ef6cd 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -199,6 +199,4 @@ class InfoboxComponent extends Component<IProps, IState> {
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(
-  InfoboxComponent,
-);
+export default injectStyle(styles, { injectTheme: true })(InfoboxComponent);
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index c3b5314e3..1ce6c674b 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -177,12 +177,16 @@ class SelectComponent extends Component<IProps> {
 
   private keyListener: any;
 
-  componentWillReceiveProps(nextProps: IProps) {
-    if (nextProps.value && nextProps.value !== this.props.value) {
-      this.setState({
+  static getDerivedStateFromProps(nextProps: IProps, prevState: IProps) {
+    if (nextProps.value && nextProps.value !== prevState.value) {
+      return {
         value: nextProps.value,
-      });
+      };
     }
+
+    return {
+      value: prevState.value,
+    };
   }
 
   componentDidUpdate() {
@@ -199,6 +203,7 @@ class SelectComponent extends Component<IProps> {
 
       if (data) {
         Object.keys(data).map(
+          // eslint-disable-next-line no-return-assign
           key => (this.inputRef.current!.dataset[key] = data[key]),
         );
       }
@@ -458,6 +463,6 @@ class SelectComponent extends Component<IProps> {
   }
 }
 
-export const Select = injectStyle(styles, { injectTheme: true })(
+export default injectStyle(styles, { injectTheme: true })(
   SelectComponent,
 );
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index e005767f8..6796ab83d 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -121,6 +121,6 @@ class TextareaComponent extends Component<IProps> {
   }
 }
 
-export const Textarea = injectSheet(styles, { injectTheme: true })(
+export default injectSheet(styles, { injectTheme: true })(
   TextareaComponent,
 );
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 0629d1a2c..d478cbba5 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -122,6 +122,4 @@ class ToggleComponent extends Component<IProps> {
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(
-  ToggleComponent,
-);
+export default injectStyle(styles, { injectTheme: true })(ToggleComponent);
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx
index 846d6dc3f..b042e62c8 100644
--- a/src/components/util/ErrorBoundary/index.tsx
+++ b/src/components/util/ErrorBoundary/index.tsx
@@ -32,8 +32,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps> {
   }
 
   render(): ReactNode {
-    const { classes } = this.props;
-    const { intl } = this.props;
+    const { classes, intl } = this.props;
 
     if (this.state.hasError) {
       return (
diff --git a/src/components/util/WithParams.tsx b/src/components/util/WithParams.tsx
new file mode 100644
index 000000000..6fc0957ff
--- /dev/null
+++ b/src/components/util/WithParams.tsx
@@ -0,0 +1,8 @@
+import { useParams } from 'react-router-dom';
+
+export default function withParams(Component: any) {
+  return (props: any) => {
+    const params = useParams();
+    return <Component {...props} params={params} />;
+  };
+}