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

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

6 files changed, 24 insertions, 25 deletions

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