Merge branch 'TCA-499_eslint' into TCA-560_line-breaks

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

@@ -83,7 +83,7 @@ module.exports = {
         ],
         'complexity': [
             'error',
-            7
+            11
         ],
         'import/extensions': 'off',
         'import/prefer-default-export': 'off',
@@ -101,8 +101,24 @@ module.exports = {
         'jsx-a11y/tabindex-no-positive': [
             'warn'
         ],
+        'newline-per-chained-call': [
+            'error',
+            {
+                ignoreChainWithDepth: 1,
+            }
+        ],
+        'max-len': [
+            'error',
+            120,
+        ],
         'no-extra-boolean-cast': 'off',
         'no-null/no-null': 'error',
+        'no-param-reassign': [
+            'error',
+            {
+                props: false
+            }
+        ],
         'no-plusplus': [
             'error',
             {

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/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext } from 'react'
+import { FC, useCallback, useContext } from 'react'
 import { Location, useLocation } from 'react-router-dom'
 
 import {
@@ -14,10 +14,13 @@ const ProfileNotLoggedIn: FC<{}> = () => {
     const routeData: RouteContextData = useContext(routeContext)
     const location: Location = useLocation()
 
-    function signUp(): void {
+    const signUpHandler: () => void = useCallback(() => {
         const signupUrl: string = routeData.getSignupUrl(location.pathname, routeData.toolsRoutes)
         window.location.href = signupUrl
-    }
+    }, [
+        location.pathname,
+        routeData,
+    ])
 
     return (
         <>
@@ -34,7 +37,7 @@ const ProfileNotLoggedIn: FC<{}> = () => {
                 label='Sign Up'
                 size='md'
                 tabIndex={-1}
-                onClick={() => signUp()}
+                onClick={signUpHandler}
             />
         </>
     )

src-ts/lib/contact-support-form/ContactSupportForm.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useContext, useEffect, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useCallback, useContext, useEffect, useState } from 'react'
 
 import { Form, FormDefinition, formGetInputModel, FormInputModel } from '../form'
 import { LoadingSpinner } from '../loading-spinner'
@@ -19,20 +19,28 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
 
     const { profile }: ProfileContextData = useContext(profileContext)
 
-    const [loading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const [saveOnSuccess, setSaveOnSuccess]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [loading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [saveOnSuccess, setSaveOnSuccess]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
 
     useEffect(() => {
         if (!loading && saveOnSuccess) {
             props.onSave()
         }
-    }, [loading, saveOnSuccess])
+    }, [loading, saveOnSuccess, props.onSave])
 
-    function generateRequest(inputs: ReadonlyArray<FormInputModel>): ContactSupportRequest {
-        const firstName: string = formGetInputModel(inputs, ContactSupportFormField.first).value as string
-        const lastName: string = formGetInputModel(inputs, ContactSupportFormField.last).value as string
-        const email: string = formGetInputModel(inputs, ContactSupportFormField.email).value as string
-        const question: string = formGetInputModel(inputs, ContactSupportFormField.question).value as string
+    const generateRequest = useCallback((
+        inputs: ReadonlyArray<FormInputModel>,
+    ): ContactSupportRequest => {
+        const firstName: string
+            = formGetInputModel(inputs, ContactSupportFormField.first).value as string
+        const lastName: string
+            = formGetInputModel(inputs, ContactSupportFormField.last).value as string
+        const email: string
+            = formGetInputModel(inputs, ContactSupportFormField.email).value as string
+        const question: string
+            = formGetInputModel(inputs, ContactSupportFormField.question).value as string
         return {
             challengeId: props.workId,
             email,
@@ -41,15 +49,16 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
             lastName,
             question,
         }
-    }
+    }, [props.workId])
 
-    async function saveAsync(request: ContactSupportRequest): Promise<void> {
+    const saveAsync = useCallback(async (request: ContactSupportRequest): Promise<void> => {
         setLoading(true)
         return contactSupportSubmitRequestAsync(request)
             .then(() => {
                 setSaveOnSuccess(true)
-            }).finally(() => setLoading(false))
-    }
+            })
+            .finally(() => setLoading(false))
+    }, [])
 
     const emailElement: JSX.Element | undefined = !!profile?.email
         ? (
@@ -69,10 +78,10 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
                     Hi
                     {' '}
                     {profile?.firstName || 'there'}
-                    , we're here to help.
+                    , we&apos;re here to help.
                 </p>
                 <p>
-                    Please describe what you'd like to discuss, and a
+                    Please describe what you&apos;d like to discuss, and a
                     Topcoder Solutions Expert will email you back
                     {emailElement}
                     &nbsp;within one business day.

src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx

@@ -27,7 +27,10 @@ const FormCardSet: React.FC<FormCardSetProps> = (props: FormCardSetProps) => {
             return <></>
         }
 
-        const iconName: string = `${icon.split('-').map((chunk: string) => chunk.charAt(0).toUpperCase() + chunk.slice(1)).join('')}Icon`
+        const iconName: string = `${icon.split('-')
+            .map((chunk: string) => chunk.charAt(0)
+                .toUpperCase() + chunk.slice(1))
+            .join('')}Icon`
         const IconComponent: React.FC<SVGProps<SVGSVGElement>> = IconOutline[iconName as keyof typeof IconOutline]
         return <IconComponent className={styles['card-row-icon']} />
     }

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,24 @@
+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;
-}