Merge pull request #417 from topcoder-platform/dev

TCA-660 2.2 TCA Performance Improvements Release -> master

Author: brooketopcoder

.circleci/config.yml

@@ -28,7 +28,7 @@ install_dependency: &install_dependency
 install_deploysuite: &install_deploysuite
     name: Installation of install_deploysuite.
     command: |
-      git clone --branch v1.4.6 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
+      git clone --branch v1.4.11 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
       cp ./../buildscript/master_deploy.sh .
       cp ./../buildscript/buildenv.sh .
       cp ./../buildscript/awsconfiguration.sh .
@@ -239,4 +239,4 @@ workflows:
                 - master
 
       - test-dev:
-          context : org-global
+          context : org-global

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topcoder-platform/platform-ui",
-    "version": "2.1",
+    "version": "2.2",
     "private": true,
     "scripts": {
         "dev": "yarn react-app-rewired start",

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;