Merge pull request #248 from topcoder-platform/PROD-2740_loading

PROD-2740 Update loading spinner -> dev

Author: brooketopcoder

src-ts/lib/functions/error-functions/error.functions.tsx

@@ -0,0 +1,29 @@
+import { Link } from 'react-router-dom'
+import { toast, ToastContent } from 'react-toastify'
+
+import { contactSupportPath } from '../../contact-support-form'
+import { logError } from '../logging-functions'
+
+export function handle(error: any, errString?: string): void {
+
+    logError(error)
+
+    const errorContent: ToastContent = (
+        <>
+            <p>
+                {errString ?? error.response?.data?.result?.content ?? error.message ?? error}
+                {' '}
+                Please try again later or
+                {' '}
+                <Link
+                    className='font-link-blue-dark'
+                    to={contactSupportPath}
+                >
+                    Contact Support
+                </Link>.
+            </p>
+        </>
+    )
+
+    toast.error(errorContent)
+}

src-ts/lib/functions/error-functions/index.ts

@@ -0,0 +1 @@
+export { handle as errorHandle } from './error.functions'

src-ts/lib/functions/index.ts

@@ -6,6 +6,7 @@ export {
     authUrlLogout,
     authUrlSignup,
 } from './authentication-functions'
+export * from './error-functions'
 export * from './file-functions'
 export * from './logging-functions'
 export * from './text-format-functions'

src-ts/lib/index.ts

@@ -10,9 +10,12 @@ export {
     authUrl,
     authUrlLogin,
     authUrlLogout,
+    authUrlSignup,
+    errorHandle,
     fileCreateFromCanvas,
     fileDownloadBlob,
     fileDownloadCanvasAsImage,
+    logError,
     logInfo,
     logInitialize,
     textFormatDateLocaleShortString,

src-ts/lib/loading-spinner/LoadingSpinner.tsx

@@ -11,12 +11,17 @@ import styles from './LoadingSpinner.module.scss'
 
 export interface LoadingSpinnerProps {
     className?: string
-    show?: boolean
+    hide?: boolean
 }
 
-const LoadingSpinner: FC<LoadingSpinnerProps> = ({ show = false, className }: LoadingSpinnerProps) => {
+const LoadingSpinner: FC<LoadingSpinnerProps> = ({ hide, className }: LoadingSpinnerProps) => {
+
+    if (!!hide) {
+        return <></>
+    }
+
     return (
-        <div className={classNames(styles['loading-spinner'], styles[show ? 'show' : 'hide'], className)}>
+        <div className={classNames(styles['loading-spinner'], styles.show, className)}>
             <PuffLoader color={'#2196f3'} loading={true} size={100} />
         </div>
     )

src-ts/lib/styles/_layout.scss

@@ -30,17 +30,27 @@ hr {
     display: none;
 }
 
+.full-height-frame {
+    position: relative;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+}
 
 .mobile-hide {
-    &.mobile-hide.mobile-hide { // increase specificity without using !important
+
+    // increase specificity without using !important
+    &.mobile-hide.mobile-hide {
         @include ltemd {
             display: none;
         }
     }
 }
 
 .desktop-hide {
-    &.desktop-hide.desktop-hide { // increase specificity without using !important
+
+    // increase specificity without using !important
+    &.desktop-hide.desktop-hide {
         @include gtelg {
             display: none;
         }

src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx

@@ -140,7 +140,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
 
     return (
         <>
-            {!ready && <LoadingSpinner show />}
+            <LoadingSpinner hide={ready} />
 
             {readyAndCompletedCertification && (
                 <div className={styles['wrap']}>

src-ts/tools/learn/course-certificate/my-certificate/MyCertificate.tsx

@@ -23,14 +23,14 @@ const MyCertificate: FC<{}> = () => {
     }, [coursePath, navigate])
 
     useEffect(() => {
-      if (profileReady && !profile) {
-        navigateToCourse()
-      }
+        if (profileReady && !profile) {
+            navigateToCourse()
+        }
     }, [profileReady, profile, navigateToCourse])
 
     return (
         <>
-            {!profileReady && <LoadingSpinner show />}
+            <LoadingSpinner hide={profileReady} />
 
             {profileReady && profile && (
                 <CertificateView

src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx

@@ -11,23 +11,25 @@ import CertificateView from '../certificate-view/CertificateView'
 import styles from './UserCertificate.module.scss'
 
 const UserCertificate: FC<{}> = () => {
+
     const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
     const routeParams: Params<string> = useParams()
     const [profile, setProfile]: [
-        UserProfile|undefined,
-        Dispatch<SetStateAction<UserProfile|undefined>>
+        UserProfile | undefined,
+        Dispatch<SetStateAction<UserProfile | undefined>>
     ] = useState()
-    const [profileReady, setProfileReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+    const [profileReady, setProfileReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     const providerParam: string = routeParams.provider ?? ''
     const certificationParam: string = routeParams.certification ?? ''
 
     useEffect(() => {
         if (routeParams.memberHandle) {
-            profileGetAsync(routeParams.memberHandle).then((userProfile) => {
-                setProfile(userProfile)
-                setProfileReady(true)
-            })
+            profileGetAsync(routeParams.memberHandle)
+                .then((userProfile) => {
+                    setProfile(userProfile)
+                    setProfileReady(true)
+                })
         }
     }, [routeParams.memberHandle, setProfileReady])
 
@@ -39,23 +41,23 @@ const UserCertificate: FC<{}> = () => {
 
         [].forEach.call(el.parentElement?.children ?? [], (c: HTMLElement) => {
             if (c !== el) {
-                Object.assign(c.style, {display: 'none'})
+                Object.assign(c.style, { display: 'none' })
             }
         })
         el.classList.add(styles['full-screen-cert'])
     })
 
     return (
         <>
-            {!profileReady && <LoadingSpinner show />}
+            <LoadingSpinner hide={profileReady} />
 
             {profileReady && profile && (
                 <div ref={wrapElRef}>
                     <CertificateView
                         certification={certificationParam}
                         profile={profile}
                         provider={providerParam}
-                        onCertificationNotCompleted={() => {}}
+                        onCertificationNotCompleted={() => { }}
                         hideActions
                     />
                 </div>

src-ts/tools/learn/course-completed/CourseCompletedPage.tsx

@@ -85,7 +85,7 @@ const CourseCompletedPage: FC<{}> = () => {
 
     return (
         <>
-            {!ready && <LoadingSpinner show />}
+            <LoadingSpinner hide={ready} />
 
             {ready && courseData && (
                 <>