From cbbc3e7c57e61f8f769eff771e33c77a80a87d68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eckhart=20W=C3=B6rner?= <ewoerner@users.noreply.github.com>
Date: Sun, 22 Sep 2024 15:07:05 +0200
Subject: [PATCH] Refactor LoadingOverlay to functional component

---
 .../loading-overlay/LoadingOverlay.tsx        | 129 ++++--------------
 .../login/private-route/PrivateRoute.tsx      |   9 +-
 .../recent-banners/RecentBanners.tsx          |   7 +-
 .../search-mission-list/SearchMissionList.tsx |   7 +-
 .../verify-account/VerifyAccount.tsx          |   7 +-
 src/pages/banner-info/BannerInfo.tsx          |   9 +-
 src/pages/browser/Browser.tsx                 |   9 +-
 src/pages/create-banner/CreateBanner.tsx      |   2 -
 src/pages/preview-banner/PreviewBanner.tsx    |   2 -
 9 files changed, 36 insertions(+), 145 deletions(-)

diff --git a/src/components/loading-overlay/LoadingOverlay.tsx b/src/components/loading-overlay/LoadingOverlay.tsx
index 8448c7ac..9544a8dc 100644
--- a/src/components/loading-overlay/LoadingOverlay.tsx
+++ b/src/components/loading-overlay/LoadingOverlay.tsx
@@ -1,115 +1,46 @@
 /* eslint-disable i18next/no-literal-string */
-import React, { Component, RefObject } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
 import Spinner from './Spinner'
-// import STYLES from './styles'
 import './loading-overlay.less'
 
-class LoadingOverlay extends Component<
-  LoadingOverlayProps,
-  LoadingOverlayState
-> {
-  private wrapper: RefObject<HTMLDivElement>
-
-  constructor(props: LoadingOverlayProps) {
-    super(props)
-    this.wrapper = React.createRef()
-  }
-
-  // componentDidMount() {
-  //   if (this.wrapper.current) {
-  //     const wrapperStyle = window.getComputedStyle(this.wrapper.current)
-  //     const overflowCSS = ['overflow', 'overflowX', 'overflowY'].reduce(
-  //       (m, i) => {
-  //         if (wrapperStyle[i] !== 'visible') m[i] = 'hidden'
-  //         return m
-  //       },
-  //       {}
-  //     )
-  //     this.setState({ overflowCSS })
-  //   }
-  // }
-
-  componentDidUpdate() {
-    const { active } = this.props
-    if (active && this.wrapper.current) this.wrapper.current.scrollTop = 0
-  }
-
-  /**
-   * Return an emotion css object for a given element key
-   * If a custom style was provided via props, run it with
-   * the base css obj.
-   */
-  // getStyles = (key, providedState) => {
-  //   const base = STYLES[key](providedState, this.props)
-  //   const custom = this.props.styles[key]
-  //   if (!custom) return base
-  //   return typeof custom === 'function' ? custom(base, this.props) : custom
-  // }
-
-  /**
-   * Convenience cx wrapper to add prefix classes to each of the child
-   * elements for styling purposes.
-   */
-  // cx = (names, ...args) => {
-  //   const arr = Array.isArray(names) ? names : [names]
-  //   return cx(
-  //     ...arr.map((name) =>
-  //       name ? `${this.props.classNamePrefix}${name}` : ''
-  //     ),
-  //     ...args
-  //   )
-  // }
-
-  render() {
-    const { children, className, active, fadeSpeed, spinner, text } = this.props
-
-    return (
-      <div
-        data-testid="wrapper"
-        ref={this.wrapper}
-        className={`loading-overlay ${className} ${active && 'active'}`}
+export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
+  active,
+  text,
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (active && ref.current) ref.current.scrollTop = 0
+  }, [active, ref])
+  return (
+    <div
+      data-testid="wrapper"
+      ref={ref}
+      className={`loading-overlay ${active && 'active'}`}
+    >
+      <CSSTransition
+        in={active}
+        classNames="_loading-overlay-transition"
+        timeout={500}
+        unmountOnExit
       >
-        <CSSTransition
-          in={active}
-          classNames="_loading-overlay-transition"
-          timeout={fadeSpeed}
-          unmountOnExit
-        >
-          <div data-testid="overlay" className="overlay">
-            <div className="content">
-              <>
-                {spinner &&
-                  (typeof spinner === 'boolean' ? <Spinner /> : spinner)}
-                {text}
-              </>
-            </div>
+        <div data-testid="overlay" className="overlay">
+          <div className="content">
+            <>
+              <Spinner />
+              {text}
+            </>
           </div>
-        </CSSTransition>
-        {children}
-      </div>
-    )
-  }
+        </div>
+      </CSSTransition>
+    </div>
+  )
 }
 
 export interface LoadingOverlayProps {
   active: boolean
-  fadeSpeed: number
-  className?: string
-  classNamePrefix?: string
-  spinner: boolean | React.Component
   text: React.Component | string
-  styles?: CSSStyleDeclaration
-  children?: React.ReactNode
 }
 
-interface LoadingOverlayState {}
-
-// LoadingOverlayWrapper.defaultProps = {
-//   classNamePrefix: '_loading_overlay_',
-//   fadeSpeed: 500,
-//   styles: {},
-// }
-
 export default LoadingOverlay
diff --git a/src/components/login/private-route/PrivateRoute.tsx b/src/components/login/private-route/PrivateRoute.tsx
index 25dbe242..4971ff1a 100644
--- a/src/components/login/private-route/PrivateRoute.tsx
+++ b/src/components/login/private-route/PrivateRoute.tsx
@@ -20,14 +20,7 @@ export const PrivateRoute: React.FC<PrivateRouteProps> = ({
       {...rest}
       render={(props) => {
         if (!initialized) {
-          return (
-            <LoadingOverlay
-              active
-              spinner
-              text={t('login.checking')}
-              fadeSpeed={500}
-            />
-          )
+          return <LoadingOverlay active text={t('login.checking')} />
         }
         if (authenticated) {
           return <Component {...props} admin={admin} />
diff --git a/src/components/recent-banners/RecentBanners.tsx b/src/components/recent-banners/RecentBanners.tsx
index dabd1d9e..a77f847f 100644
--- a/src/components/recent-banners/RecentBanners.tsx
+++ b/src/components/recent-banners/RecentBanners.tsx
@@ -45,12 +45,7 @@ export const RecentBanners: FC<RecentBannersProps> = ({
 
   return (
     <div className="recent-banners">
-      <LoadingOverlay
-        active={loading}
-        spinner
-        fadeSpeed={500}
-        text={t('loadingRecent')}
-      />
+      <LoadingOverlay active={loading} text={t('loadingRecent')} />
       <div className="recent-banners-title">
         <h1>{titleList}</h1>
       </div>
diff --git a/src/components/search-mission-list/SearchMissionList.tsx b/src/components/search-mission-list/SearchMissionList.tsx
index c6bf9040..b08e4e63 100644
--- a/src/components/search-mission-list/SearchMissionList.tsx
+++ b/src/components/search-mission-list/SearchMissionList.tsx
@@ -57,12 +57,7 @@ const SearchMissionList: FC<SearchMissionListProps> = ({
     <Fragment>
       {hasMoreMissions && !initial && (
         <Col>
-          <LoadingOverlay
-            active
-            spinner
-            fadeSpeed={500}
-            text={t('missions.searching')}
-          />
+          <LoadingOverlay active text={t('missions.searching')} />
         </Col>
       )}
     </Fragment>
diff --git a/src/components/verify-account/VerifyAccount.tsx b/src/components/verify-account/VerifyAccount.tsx
index b1c90843..08bc31e9 100644
--- a/src/components/verify-account/VerifyAccount.tsx
+++ b/src/components/verify-account/VerifyAccount.tsx
@@ -290,12 +290,7 @@ const VerifyAccount: React.FC<VerifyAccountProps> = ({
 
   return (
     <div className="account-linking">
-      <LoadingOverlay
-        active={loading}
-        fadeSpeed={300}
-        spinner
-        text={t('account.loading')}
-      />
+      <LoadingOverlay active={loading} text={t('account.loading')} />
       <div>
         <h3>{t('account.linking.title')}</h3>
         {!isAccountLinked(currentUser) && <p>{t('account.linking.none')}</p>}
diff --git a/src/pages/banner-info/BannerInfo.tsx b/src/pages/banner-info/BannerInfo.tsx
index 164fe531..af7e9ddd 100644
--- a/src/pages/banner-info/BannerInfo.tsx
+++ b/src/pages/banner-info/BannerInfo.tsx
@@ -66,14 +66,7 @@ class BannerInfo extends React.Component<BannerInfoProps, BannerInfoState> {
       )
     }
     if (status !== 'error') {
-      return (
-        <LoadingOverlay
-          active
-          spinner
-          text={i18n!.t('loading')}
-          fadeSpeed={500}
-        />
-      )
+      return <LoadingOverlay active text={i18n!.t('loading')} />
     }
     return (
       <Trans i18nKey="banners.noneWithId">No banners found with that id</Trans>
diff --git a/src/pages/browser/Browser.tsx b/src/pages/browser/Browser.tsx
index 8a8ca49a..07917aa2 100644
--- a/src/pages/browser/Browser.tsx
+++ b/src/pages/browser/Browser.tsx
@@ -178,14 +178,7 @@ class Browser extends React.Component<BrowserProps, BrowserState> {
     const { filter, selectedPlaceId, status } = this.state
 
     if (status === 'initial') {
-      return (
-        <LoadingOverlay
-          text={i18n!.t('loading')}
-          fadeSpeed={500}
-          active
-          spinner={true}
-        />
-      )
+      return <LoadingOverlay text={i18n!.t('loading')} active />
     }
 
     let administrativeAreas: Array<Place> | null = null
diff --git a/src/pages/create-banner/CreateBanner.tsx b/src/pages/create-banner/CreateBanner.tsx
index 4a6c1179..001a3f47 100644
--- a/src/pages/create-banner/CreateBanner.tsx
+++ b/src/pages/create-banner/CreateBanner.tsx
@@ -802,8 +802,6 @@ class CreateBanner extends React.Component<
         <LoadingOverlay
           active={status === 'loading'}
           text={i18n!.t('banners.creation.preview.generating')}
-          spinner
-          fadeSpeed={500}
         />
         <h1>{title}</h1>
 
diff --git a/src/pages/preview-banner/PreviewBanner.tsx b/src/pages/preview-banner/PreviewBanner.tsx
index eb0fa3b2..711aa0d9 100644
--- a/src/pages/preview-banner/PreviewBanner.tsx
+++ b/src/pages/preview-banner/PreviewBanner.tsx
@@ -90,8 +90,6 @@ class PreviewBanner extends React.Component<
           <LoadingOverlay
             active={status === 'loading'}
             text={i18n!.t('banners.review.saving')}
-            spinner
-            fadeSpeed={500}
           />
           <BannerInfoWithMap
             banner={banner}