Merge pull request #405 from topcoder-platform/TCA-586_page-load-improvements

TCA-586 Page load improvements Part 2 -> dev

Author: brooketopcoder

src-ts/declarations.d.ts

@@ -29,3 +29,8 @@ declare module '*.md' {
     const value: string
     export default value
 }
+
+declare module '*.txt' {
+    const value: string
+    export default value
+}

src-ts/lib/modals/base-modal/BaseModal.tsx

@@ -1,22 +1,47 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import Modal, { ModalProps } from 'react-responsive-modal'
 
+import { LoadingSpinner } from '../../loading-spinner'
 import { IconOutline } from '../../svgs'
 
 import styles from './BaseModal.module.scss'
+import { ModalContentResponse, useFetchModalContent } from './use-fetch-modal-content'
 
 export interface BaseModalProps extends ModalProps {
+    contentClassName?: string
+    contentUrl?: string
     size?: 'lg' | 'md'
     title: string
 }
 
 const BaseModal: FC<BaseModalProps> = ({
     children,
     title,
+    contentUrl,
+    contentClassName,
     ...props
 }: BaseModalProps) => {
 
+    const { content }: ModalContentResponse = useFetchModalContent(contentUrl, props.open)
+
+    const renterContent: () => ReactNode = () => {
+        if (children || !contentUrl) {
+            return
+        }
+
+        if (!content) {
+            return <LoadingSpinner />
+        }
+
+        return (
+            <div
+                className={contentClassName}
+                dangerouslySetInnerHTML={{__html: content}}
+            />
+        )
+    }
+
     return (
         <Modal
             {...props}
@@ -30,6 +55,7 @@ const BaseModal: FC<BaseModalProps> = ({
             <hr className={styles['spacer']} />
 
             <div className={classNames(styles['modal-body'], 'modal-body')}>
+                {renterContent()}
                 {children}
             </div>
         </Modal>

src-ts/lib/modals/base-modal/use-fetch-modal-content.tsx

@@ -0,0 +1,23 @@
+import {Dispatch, SetStateAction, useEffect, useState} from 'react'
+
+import { xhrGetAsync } from '../../functions'
+
+export interface ModalContentResponse {
+    content: string | undefined
+}
+
+export function useFetchModalContent(contentUrl?: string, enabled?: boolean): ModalContentResponse {
+    const [content, setContent]: [string|undefined, Dispatch<SetStateAction<string|undefined>>] = useState()
+
+    useEffect(() => {
+        if (!contentUrl || !enabled) {
+            return
+        }
+
+        if (!content) {
+            xhrGetAsync<string>(contentUrl).then(setContent)
+        }
+    }, [contentUrl, content, enabled])
+
+    return { content }
+}

src-ts/lib/modals/order-contract-modal/OrderContractModal.module.scss

@@ -13,13 +13,8 @@
     p {
         margin-bottom: 20px;
 
-        &.sm {
+        &:global(.sm) {
             font-size: 14px;
         }
     }
 }
-
-.topCoderLink {
-    text-decoration: underline;
-    color: $link-blue-light;
-}

src-ts/lib/modals/order-contract-modal/OrderContractModal.tsx

@@ -20,55 +20,18 @@
         }
     }
 
-    ul.a {
-        list-style-type: disc;
-        list-style: disc;
-
-        li {
-            padding-left: 0;
-            margin-left: 20px;
-        }
-    }
-
-    ul.b {
-        list-style-type: disc;
-        list-style: disc;
-
-        li {
-            padding-left: 0;
-            margin-left: 20px;
-        }
-    }
-
-    ul.c {
-        list-style-type: disc;
-        list-style: disc;
-
-        li {
-            padding-left: 0;
-            margin-left: 20px;
-        }
-    }
-
-    ul.d {
-        list-style-type: disc;
-        list-style: disc;
-
-        li {
-            padding-left: 0;
-            margin-left: 20px;
+    ul {
+        &:global(.disc) {
+            list-style-type: disc;
+            list-style: disc;
+
+            li {
+                padding-left: 0;
+                margin-left: 20px;
+            }
         }
     }
 
-    ul.e {
-        list-style-type: disc;
-        list-style: disc;
-
-        li {
-            padding-left: 0;
-            margin-left: 20px;
-        }
-    }
 
     a {
         text-decoration: underline;