Merge branch 'dev' into TCA-499_eslint

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 .

src-ts/.eslintrc.js

@@ -65,7 +65,7 @@ module.exports = {
         ],
         'complexity': [
             'error',
-            7
+            11
         ],
         'import/extensions': 'off',
         'import/prefer-default-export': 'off',
@@ -83,6 +83,10 @@ module.exports = {
         'jsx-a11y/tabindex-no-positive': [
             'warn'
         ],
+        'max-len': [
+            'error',
+            120,
+        ],
         'no-extra-boolean-cast': 'off',
         'no-null/no-null': 'error',
         'no-plusplus': [

src-ts/declarations.d.ts

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

src-ts/lib/functions/text-format-functions/index.ts

@@ -1,4 +1,5 @@
 export {
     dateLocaleShortString as textFormatDateLocaleShortString,
+    getSafeString as textFormatGetSafeString,
     moneyLocaleString as textFormatMoneyLocaleString,
 } from './text-format.functions'

src-ts/lib/functions/text-format-functions/text-format.functions.ts

@@ -9,6 +9,10 @@ export function dateLocaleShortString(date?: Date): string | undefined {
     )
 }
 
+export function getSafeString(param?: string): string {
+    return param ?? ''
+}
+
 export function moneyLocaleString(amount?: number): string | undefined {
     return amount?.toLocaleString('en-US', {
         currency: 'USD', // TODO: handle other currencies

src-ts/lib/index.ts

@@ -19,6 +19,7 @@ export {
     logInfo,
     logInitialize,
     textFormatDateLocaleShortString,
+    textFormatGetSafeString,
     textFormatMoneyLocaleString,
     xhrCreateInstance,
     xhrDeleteAsync,

src-ts/lib/modals/base-modal/BaseModal.module.scss

@@ -1,6 +1,14 @@
 @import '../../styles/includes';
 @import '../../styles/typography';
 
+:global(.react-responsive-modal-root) {
+    :global(.react-responsive-modal-overlay),
+    :global(.react-responsive-modal-modal) {
+        animation-fill-mode:forwards !important;
+    }
+
+}
+
 .modal-header {
     padding: 5px 0 0;
 }
@@ -14,7 +22,7 @@
     overflow: auto;
     margin: 0 -1*$space-xxxxl -1*$space-xxxxl;
     padding: 0 $space-xxxxl $space-xxxxl;
-    
+
     display: flex;
     flex-direction: column;
 

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

@@ -1,36 +1,59 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import Modal, { ModalProps } from 'react-responsive-modal'
 import classNames from 'classnames'
 
+import { LoadingSpinner } from '../../loading-spinner'
 import { IconOutline } from '../../svgs'
 
+import { ModalContentResponse, useFetchModalContent } from './use-fetch-modal-content'
 import styles from './BaseModal.module.scss'
 
 export interface BaseModalProps extends ModalProps {
+    contentClassName?: string
+    contentUrl?: string
     size?: 'lg' | 'md'
     title: string
 }
 
-const BaseModal: FC<BaseModalProps> = ({
-    children,
-    title,
-    ...props
-}: BaseModalProps) => (
-    <Modal
-        {...props}
-        classNames={{ modal: `modal-${props.size || 'md'}` }}
-        closeIcon={<IconOutline.XIcon width={28} height={28} />}
-    >
-        <div className={styles['modal-header']}>
-            <h3>{title}</h3>
-        </div>
-
-        <hr className={styles.spacer} />
-
-        <div className={classNames(styles['modal-body'], 'modal-body')}>
-            {children}
-        </div>
-    </Modal>
-)
+const BaseModal: FC<BaseModalProps> = (props: BaseModalProps) => {
+
+    const { content }: ModalContentResponse = useFetchModalContent(props.contentUrl, props.open)
+
+    const renterContent: () => ReactNode = () => {
+        if (props.children || !props.contentUrl) {
+            return undefined
+        }
+
+        if (!content) {
+            return <LoadingSpinner />
+        }
+
+        return (
+            <div
+                className={props.contentClassName}
+                dangerouslySetInnerHTML={{ __html: content }}
+            />
+        )
+    }
+
+    return (
+        <Modal
+            {...props}
+            classNames={{ modal: `modal-${props.size || 'md'}` }}
+            closeIcon={<IconOutline.XIcon width={28} height={28} />}
+        >
+            <div className={styles['modal-header']}>
+                <h3>{props.title}</h3>
+            </div>
+
+            <hr className={styles.spacer} />
+
+            <div className={classNames(styles['modal-body'], 'modal-body')}>
+                {renterContent()}
+                {props.children}
+            </div>
+        </Modal>
+    )
+}
 
 export default BaseModal

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;
-}