PROD-2740 Update loading spinner -> dev

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 && (
                 <>

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -118,7 +118,7 @@ const CourseDetailsPage: FC<{}> = () => {
         <ContentLayout>
             {!ready && (
                 <div className={styles['wrap']}>
-                    <LoadingSpinner show />
+                    <LoadingSpinner />
                 </div>
             )}
             <Breadcrumb items={breadcrumb} />

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -328,7 +328,7 @@ const FreeCodeCamp: FC<{}> = () => {
 
     return (
         <>
-            {!ready && <LoadingSpinner show />}
+            <LoadingSpinner hide={ready} />
             <Breadcrumb items={breadcrumb} />
 
             {lesson && (

src-ts/tools/learn/learn-lib/course-outline/CourseOutline.tsx

@@ -34,7 +34,8 @@ const CourseOutline: FC<CourseOutlineProps> = (props: CourseOutlineProps) => {
 
     return (
         <div className={classNames(styles['wrap'], 'course-outline-wrap')}>
-            {props.ready === false && <LoadingSpinner show />}
+
+            <LoadingSpinner hide={props.ready !== false} />
 
             {props.course && (
                 <div className={classNames(styles['content'], 'content')}>

src-ts/tools/learn/learn-lib/user-certifications-provider/user-certifications.provider.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
 
-import { profileContext, ProfileContextData } from '../../../../lib'
+import { errorHandle, profileContext, ProfileContextData } from '../../../../lib'
 
 import { UserCertificationCompleted } from './user-certification-completed.model'
 import { UserCertificationInProgress } from './user-certification-in-progress.model'
@@ -64,6 +64,16 @@ export function useUserCertifications(): UserCertificationsProviderData {
                     ready: true,
                 }))
             })
+            .catch((err: any) => {
+                errorHandle(err, 'There was an error getting your course progress.')
+                setState((prevState) => ({
+                    ...prevState,
+                    completed: [],
+                    inProgress: [],
+                    loading: false,
+                    ready: true,
+                }))
+            })
 
         return () => {
             mounted = false

src-ts/tools/learn/welcome/WelcomePage.tsx

@@ -1,6 +1,8 @@
+import classNames from 'classnames'
 import { FC } from 'react'
 
 import { ContentLayout, LoadingSpinner, Portal } from '../../../lib'
+import '../../../lib/styles/index.scss'
 import {
     AllCertificationsProviderData,
     useAllCertifications,
@@ -22,7 +24,9 @@ const WelcomePage: FC<{}> = () => {
 
     return (
         <ContentLayout>
-            <div className={styles.wrap}>
+
+            <div className={classNames(styles.wrap, 'full-height-frame')}>
+
                 <Portal portalId='page-subheader-portal-el'>
                     <div className={styles['hero-wrap']}>
                         <WaveHero
@@ -47,11 +51,11 @@ const WelcomePage: FC<{}> = () => {
                     </div>
                 </Portal>
 
-                <div className={styles['courses-section']}>
+                <div className={classNames(styles['courses-section'], 'full-height-frame')}>
+
                     <h3 className='details'>Courses Available</h3>
-                    {!coursesReady && (
-                        <LoadingSpinner show />
-                    )}
+
+                    <LoadingSpinner hide={coursesReady} />
 
                     {coursesReady && (
                         <div className={styles['courses-list']}>

src-ts/tools/work/Work.tsx

@@ -37,7 +37,7 @@ const Work: FC<{}> = () => {
 
         // if the profile isn't initialized, wait with the spinner
         if (!initialized) {
-            return <LoadingSpinner show={true} />
+            return <LoadingSpinner />
         }
 
         // if the profile is initialized, go to the self-service login

src-ts/tools/work/work-lib/work-provider/work.provider.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, FC, ReactNode, SetStateAction, useContext, useEffect, useState } from 'react'
 
-import { profileContext, ProfileContextData, UserProfile } from '../../../../lib'
+import { logError, profileContext, ProfileContextData, UserProfile } from '../../../../lib'
 
 import { WorkContextData } from './work-context-data.model'
 import { Work, workGetAllAsync, } from './work-functions'
@@ -33,12 +33,12 @@ export const WorkProvider: FC<{ children: ReactNode }> = ({ children }: { childr
                 setWorkContextData(contextData)
 
             } catch (error: any) {
+                logError(error)
                 const contextData: WorkContextData = {
+                    ...defaultWorkContextData,
                     error: error.response?.data?.result?.content || error.message || error,
-                    hasWork: false,
                     initialized: true,
                     refresh: getAndSetWork,
-                    work: [],
                 }
                 setWorkContextData(contextData)
             }

src-ts/tools/work/work-not-logged-in/WorkNotLoggedIn.tsx

@@ -40,7 +40,7 @@ const WorkNotLoggedIn: FC<{}> = () => {
     }, [isLoggedIn, initialized, navigate])
 
     if (isLoading) {
-        return <LoadingSpinner show={true} />
+        return <LoadingSpinner />
     }
 
     function startWork(): void {

src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx

@@ -196,7 +196,7 @@ const Review: FC = () => {
 
     return (
         <div className={styles['review-container']}>
-            <LoadingSpinner show={isLoading} />
+            <LoadingSpinner hide={!isLoading} />
             {/* TODO: We need to not hard code the configs to that of BugHunt and instead
             use the challenge data to determine the WorkType */}
             <IntakeFormsBreadcrumb

src-ts/tools/work/work-table/WorkTable.tsx

@@ -11,6 +11,7 @@ import {
     TabsNavbar,
     TabsNavItem,
 } from '../../../lib'
+import '../../../lib/styles/index.scss'
 import {
     Work,
     WorkByStatus,
@@ -27,7 +28,6 @@ import { dashboardRoute, selfServiceStartRoute, workDetailRoute } from '../work.
 import { workDashboardTabs } from './work-nav.config'
 import { WorkNoResults } from './work-no-results'
 import { WorkListColumnField, workListColumns } from './work-table.config'
-import styles from './WorkTable.module.scss'
 
 const WorkTable: FC<{}> = () => {
 
@@ -131,7 +131,7 @@ const WorkTable: FC<{}> = () => {
         return (
             <>
                 {tabsElement}
-                <div className={styles.loader}>
+                <div className='full-height-frame'>
                     <LoadingSpinner />
                 </div>
             </>