Tca 499 eslint fix linting

src-ts/.eslintrc.js

@@ -83,12 +83,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/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/modals/base-modal/use-fetch-modal-content.tsx

@@ -1,4 +1,4 @@
-import {Dispatch, SetStateAction, useEffect, useState} from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 import { xhrGetAsync } from '../../functions'
 
@@ -15,7 +15,8 @@ export function useFetchModalContent(contentUrl?: string, enabled?: boolean): Mo
         }
 
         if (!content) {
-            xhrGetAsync<string>(contentUrl).then(setContent)
+            xhrGetAsync<string>(contentUrl)
+                .then(setContent)
         }
     }, [contentUrl, content, enabled])
 

src-ts/lib/page-footer/PageFooter.tsx

@@ -48,7 +48,8 @@ const PageFooter: FC<{}> = () => {
                     <div>
                         <span>
                             ©
-                            {(new Date()).getFullYear()}
+                            {(new Date())
+                                .getFullYear()}
                             {' '}
                             Topcoder
                         </span>

src-ts/lib/route-provider/router.utils.ts

@@ -14,5 +14,6 @@ export type LazyLoadType = (
  * (while react's `lazy` method only allows to import default exports)
  */
 export const lazyLoad: LazyLoadType = (moduleImport: () => Promise<any>, namedExport: string = 'default') => (
-    lazy(() => moduleImport().then(m => ({ default: get(m, namedExport) })))
+    lazy(() => moduleImport()
+        .then(m => ({ default: get(m, namedExport) })))
 )

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx

@@ -80,17 +80,18 @@ export class Renderer implements MarkdownRenderer {
         const children: ReturnType<typeof this.groupBy> = this.groupBy(
             nodes,
             options,
-        ).map(node => {
-            if (Array.isArray(node)) {
-                return (
-                    <MarkdownAccordion>
-                        {React.Children.map(node, child => child)}
-                    </MarkdownAccordion>
-                )
-            }
+        )
+            .map(node => {
+                if (Array.isArray(node)) {
+                    return (
+                        <MarkdownAccordion>
+                            {React.Children.map(node, child => child)}
+                        </MarkdownAccordion>
+                    )
+                }
 
-            return node
-        })
+                return node
+            })
 
         return (
             <div className={styles['markdown-doc']}>
@@ -287,7 +288,8 @@ export class Renderer implements MarkdownRenderer {
             const h: string = marked.parser([token], parserOptions)
             const level: number = token.depth
             const title: string = removeLineBreak(stripTag(h, `h${level}`))
-            const headingId: string = extractId(h, `h${level}`, index).trim()
+            const headingId: string = extractId(h, `h${level}`, index)
+                .trim()
 
             options.toc.push({
                 headingId,
@@ -351,12 +353,14 @@ export class Renderer implements MarkdownRenderer {
         const tag: string = extractTag(html)
         if (tag) {
             const isParagraphTag: boolean = tag === MarkdownParagraphTag.p
-            const isHeaderTag: boolean = Object.values(MarkdownHeaderTag).indexOf(tag as MarkdownHeaderTag) !== -1
+            const isHeaderTag: boolean = Object.values(MarkdownHeaderTag)
+                .indexOf(tag as MarkdownHeaderTag) !== -1
             if (isParagraphTag || isHeaderTag) {
                 let id: string | undefined
                 if (isHeaderTag) {
                     token = token as marked.Tokens.Heading
-                    id = extractId(html, `h${token.depth}`, index).trim()
+                    id = extractId(html, `h${token.depth}`, index)
+                        .trim()
                 }
 
                 return React.createElement(tag, {

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/util.ts

@@ -30,8 +30,11 @@ export function renderMarkdown(
         const matchStr: string = matches ? matches[0] : ''
         return matchStr
             ? {
-                s: fromStr.replace(matchStr, '').trimStart(),
-                title: matchStr.replace(/^#/, '').replace(/`/g, '').trim(),
+                s: fromStr.replace(matchStr, '')
+                    .trimStart(),
+                title: matchStr.replace(/^#/, '')
+                    .replace(/`/g, '')
+                    .trim(),
             }
             : { title, s }
     }

src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/CardSection/CardSection.tsx

@@ -33,7 +33,8 @@ const CardSection: FC = () => {
                         return blog
                 }
             }),
-        ).then(arr => setArticles(arr))
+        )
+            .then(arr => setArticles(arr))
     }, [])
 
     const articleStyles: Array<any> = [

src-ts/tools/gamification-admin/pages/badge-detail/AwardedMembersTab/awarded-members-table/member-awardedAt-renderer/MemberAwaredAtRenderer.tsx

@@ -12,7 +12,10 @@ const MemberAwaredAtRenderer = (memberAward: MemberBadgeAward): JSX.Element => {
     }
 
     return (
-        <div className={styles.memberAwardedAt}>{new Date(memberAward.awarded_at).toLocaleString(undefined, dateFormat)}</div>
+        <div className={styles.memberAwardedAt}>
+            {new Date(memberAward.awarded_at)
+                .toLocaleString(undefined, dateFormat)}
+        </div>
     )
 }
 

src-ts/tools/gamification-admin/pages/badge-detail/badge-details.functions.ts

@@ -13,7 +13,8 @@ export async function submitRequestAsync(request: UpdateBadgeRequest): Promise<G
 export function generateCSV(input: Array<Array<string | number>>): string {
     input.unshift(GamificationConfig.CSV_HEADER)
 
-    return input.map(row => row.join(',')).join('\n')
+    return input.map(row => row.join(','))
+        .join('\n')
 }
 
 export async function manualAssignRequestAsync(csv: string): Promise<any> {

src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx

@@ -46,7 +46,8 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
     const certificateWrapRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
     const userName: string = useMemo(() => (
-        [props.profile.firstName, props.profile.lastName].filter(Boolean).join(' ')
+        [props.profile.firstName, props.profile.lastName].filter(Boolean)
+            .join(' ')
         || props.profile.handle
     ), [props.profile.firstName, props.profile.handle, props.profile.lastName])
 

src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.tsx

@@ -26,7 +26,13 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => (
             <IconOutline.CalendarIcon />
             <span className='large-subtitle'>
                 <span>Completed</span>
-                <span>{props.completedDate && textFormatDateLocaleShortString(new Date(props.completedDate))}</span>
+                <span>
+                    {
+                        props.completedDate && (
+                            textFormatDateLocaleShortString(new Date(props.completedDate))
+                        )
+                    }
+                </span>
             </span>
         </div>
     </div>

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

@@ -157,7 +157,9 @@ const FreeCodeCamp: FC<{}> = () => {
 
     function handleFccLessonReady(lessonPath: string): void {
 
-        const [nLessonPath, modulePath, coursePath]: Array<string> = lessonPath.replace(/\/$/, '').split('/').reverse()
+        const [nLessonPath, modulePath, coursePath]: Array<string> = lessonPath.replace(/\/$/, '')
+            .split('/')
+            .reverse()
         updatePath(nLessonPath, modulePath, coursePath)
 
         const currentLesson: { [key: string]: string } = {
@@ -206,7 +208,8 @@ const FreeCodeCamp: FC<{}> = () => {
                 certificateProgress.id,
                 UserCertificationUpdateProgressActions.completeLesson,
                 currentLesson,
-            ).then(setCertificateProgress)
+            )
+                .then(setCertificateProgress)
         }
     }