chore: convert class components to functional (#2065)

4 files changed, 39 insertions, 47 deletions

diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.ts
index 9891e0387..9891e0387 100644
--- a/src/components/ui/AppLoader/styles.js
+++ b/src/components/ui/AppLoader/styles.ts
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.ts
index 5d58011fe..5d58011fe 100644
--- a/src/components/ui/WebviewLoader/styles.js
+++ b/src/components/ui/WebviewLoader/styles.ts
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js
deleted file mode 100644
index fc319fe28..000000000
--- a/src/components/ui/effects/Appear.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
-
-export default class Appear extends Component {
-  static propTypes = {
-    // eslint-disable-next-line react/forbid-prop-types
-    children: PropTypes.any.isRequired,
-    transitionName: PropTypes.string,
-    className: PropTypes.string,
-  };
-
-  static defaultProps = {
-    transitionName: 'fadeIn',
-    className: '',
-  };
-
-  state = {
-    mounted: false,
-  };
-
-  componentDidMount() {
-    this.setState({ mounted: true });
-  }
-
-  render() {
-    const { children, transitionName, className } = this.props;
-
-    if (!this.state.mounted) {
-      return null;
-    }
-
-    return (
-      <ReactCSSTransitionGroup
-        transitionName={transitionName}
-        transitionAppear
-        transitionLeave
-        transitionAppearTimeout={1500}
-        transitionEnterTimeout={1500}
-        transitionLeaveTimeout={1500}
-        className={className}
-      >
-        {children}
-      </ReactCSSTransitionGroup>
-    );
-  }
-}
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
new file mode 100644
index 000000000..117c02f97
--- /dev/null
+++ b/src/components/ui/effects/Appear.tsx
@@ -0,0 +1,39 @@
+import { ReactChildren, useEffect, useState } from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+type Props = {
+  children: ReactChildren;
+  transitionName: string;
+  className: string;
+};
+const Appear = ({
+  children,
+  transitionName = 'fadeIn',
+  className = '',
+}: Props) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <ReactCSSTransitionGroup
+      transitionName={transitionName}
+      transitionAppear
+      transitionLeave
+      transitionAppearTimeout={1500}
+      transitionEnterTimeout={1500}
+      transitionLeaveTimeout={1500}
+      className={className}
+    >
+      {children}
+    </ReactCSSTransitionGroup>
+  );
+};
+
+export default Appear;