From f06c7da3e09afbbe757101677b4c8f32d051e471 Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Thu, 14 Oct 2021 08:48:08 +0200
Subject: chore: convert class components to functional (#2065)

---
 src/components/ui/AppLoader/styles.js     | 22 ---------------
 src/components/ui/AppLoader/styles.ts     | 22 +++++++++++++++
 src/components/ui/WebviewLoader/styles.js |  9 ------
 src/components/ui/WebviewLoader/styles.ts |  9 ++++++
 src/components/ui/effects/Appear.js       | 47 -------------------------------
 src/components/ui/effects/Appear.tsx      | 39 +++++++++++++++++++++++++
 6 files changed, 70 insertions(+), 78 deletions(-)
 delete mode 100644 src/components/ui/AppLoader/styles.js
 create mode 100644 src/components/ui/AppLoader/styles.ts
 delete mode 100644 src/components/ui/WebviewLoader/styles.js
 create mode 100644 src/components/ui/WebviewLoader/styles.ts
 delete mode 100644 src/components/ui/effects/Appear.js
 create mode 100644 src/components/ui/effects/Appear.tsx

(limited to 'src/components/ui')

diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
deleted file mode 100644
index 9891e0387..000000000
--- a/src/components/ui/AppLoader/styles.js
+++ /dev/null
@@ -1,22 +0,0 @@
-let sloganTransition = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
-  sloganTransition = 'opacity 1s ease';
-}
-
-export default {
-  component: {
-    color: '#FFF',
-  },
-  slogan: {
-    display: 'block',
-    opacity: 0,
-    transition: sloganTransition,
-    position: 'absolute',
-    textAlign: 'center',
-    width: '100%',
-  },
-  visible: {
-    opacity: 1,
-  },
-};
diff --git a/src/components/ui/AppLoader/styles.ts b/src/components/ui/AppLoader/styles.ts
new file mode 100644
index 000000000..9891e0387
--- /dev/null
+++ b/src/components/ui/AppLoader/styles.ts
@@ -0,0 +1,22 @@
+let sloganTransition = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  sloganTransition = 'opacity 1s ease';
+}
+
+export default {
+  component: {
+    color: '#FFF',
+  },
+  slogan: {
+    display: 'block',
+    opacity: 0,
+    transition: sloganTransition,
+    position: 'absolute',
+    textAlign: 'center',
+    width: '100%',
+  },
+  visible: {
+    opacity: 1,
+  },
+};
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js
deleted file mode 100644
index 5d58011fe..000000000
--- a/src/components/ui/WebviewLoader/styles.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default (theme) => ({
-  component: {
-    background: theme.colorWebviewLoaderBackground,
-    padding: 20,
-    width: 'auto',
-    margin: [0, 'auto'],
-    borderRadius: 6,
-  },
-});
diff --git a/src/components/ui/WebviewLoader/styles.ts b/src/components/ui/WebviewLoader/styles.ts
new file mode 100644
index 000000000..5d58011fe
--- /dev/null
+++ b/src/components/ui/WebviewLoader/styles.ts
@@ -0,0 +1,9 @@
+export default (theme) => ({
+  component: {
+    background: theme.colorWebviewLoaderBackground,
+    padding: 20,
+    width: 'auto',
+    margin: [0, 'auto'],
+    borderRadius: 6,
+  },
+});
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;
-- 
cgit v1.2.3-70-g09d2