TCA-499 eslint Add Line Breaks Before Chained Methods -> TCA-499_eslint

src-ts/.eslintrc.js

@@ -83,6 +83,12 @@ module.exports = {
         'jsx-a11y/tabindex-no-positive': [
             'warn'
         ],
+        'newline-per-chained-call': [
+            'error',
+            {
+                ignoreChainWithDepth: 1,
+            }
+        ],
         'max-len': [
             'error',
             120,

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

@@ -56,7 +56,8 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
         return contactSupportSubmitRequestAsync(request)
             .then(() => {
                 setSaveOnSuccess(true)
-            }).finally(() => setLoading(false))
+            })
+            .finally(() => setLoading(false))
     }, [])
 
     const emailElement: JSX.Element | undefined = !!profile?.email

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/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)
         }
     }
 

src-ts/tools/learn/learn-lib/data-providers/all-certifications-provider/all-certifications.provider.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable default-param-last */
 import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 
 import { learnUrlGet } from '../../functions'
@@ -11,16 +12,16 @@ interface CertificationsAllProviderOptions {
 
 export function useGetAllCertifications(
     providerName: string = 'freeCodeCamp',
-    options?: CertificationsAllProviderOptions
+    options?: CertificationsAllProviderOptions,
 ): AllCertificationsProviderData {
 
     const url: string = learnUrlGet(
         'certifications',
-        `?providerName=${providerName}`
+        `?providerName=${providerName}`,
     )
     const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
-    const {data, error}: SWRResponse = useSWR(url, {
+    const { data, error }: SWRResponse = useSWR(url, {
         ...swrCacheConfig,
         isPaused: () => options?.enabled === false,
     })
@@ -36,16 +37,16 @@ export function useGetAllCertifications(
 export function useGetCertification(
     providerName: string = 'freeCodeCamp',
     certificationId: string,
-    options?: CertificationsAllProviderOptions
+    options?: CertificationsAllProviderOptions,
 ): AllCertificationsProviderData {
 
     const url: string = learnUrlGet(
         'certifications',
         certificationId,
-        `?providerName=${providerName}`
+        `?providerName=${providerName}`,
     )
 
-    const {data, error}: SWRResponse = useSWR(url, {
+    const { data, error }: SWRResponse = useSWR(url, {
         isPaused: () => options?.enabled === false,
     })
     return {

src-ts/tools/learn/learn-lib/data-providers/courses-provider/courses.provider.tsx

@@ -9,7 +9,7 @@ import { LearnCourse } from './learn-course.model'
 
 export function useGetCourses(
     provider: string,
-    certification?: string
+    certification?: string,
 ): CoursesProviderData {
 
     const params: string = [
@@ -22,7 +22,7 @@ export function useGetCourses(
     const url: string = learnUrlGet('courses', `?${params}`)
     const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
-    const {data, error}: SWRResponse<ReadonlyArray<LearnCourse>> = useSWR(url, swrCacheConfig)
+    const { data, error }: SWRResponse<ReadonlyArray<LearnCourse>> = useSWR(url, swrCacheConfig)
 
     return {
         course: get(data, [0]),

src-ts/tools/learn/learn-lib/data-providers/lesson-provider/lesson.provider.tsx

@@ -21,7 +21,9 @@ export function useGetLesson(
         courseData?.key ?? course,
         module,
         lesson,
-    ].filter(Boolean).join('/')
+    ]
+        .filter(Boolean)
+        .join('/')
 
     return {
         lesson: !lessonData ? undefined : {

src-ts/tools/learn/learn-lib/data-providers/resource-provider-provider/resource-provider.provider.tsx

@@ -12,11 +12,11 @@ export function useGetResourceProvider(providerName?: string): ResourceProviderD
     const url: string = learnUrlGet('providers')
     const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
-    const {data, error}: SWRResponse<ReadonlyArray<ResourceProvider>> = useSWR(url, swrCacheConfig)
+    const { data, error }: SWRResponse<ReadonlyArray<ResourceProvider>> = useSWR(url, swrCacheConfig)
 
     return {
         loading: !data && !error,
-        provider: find(data, {name: providerName}),
+        provider: find(data, { name: providerName }),
         ready: !!data || !!error,
     }
 }

src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certification-progress.provider.tsx

@@ -9,7 +9,7 @@ import { LearnUserCertificationProgress } from './user-certifications-functions'
 export function useGetUserCertificationProgress(
     userId?: number,
     provider?: string,
-    certification?: string
+    certification?: string,
 ):
     UserCertificationProgressProviderData {
 
@@ -28,10 +28,10 @@ export function useGetUserCertificationProgress(
     })
 
     return {
-        certificationProgress: find(data, {certification}),
+        certificationProgress: find(data, { certification }),
         loading: !!userId && !data && !error,
         ready: !userId || data || error,
         refetch: () => mutate(),
-        setCertificateProgress: (progress) => mutate([progress]),
+        setCertificateProgress: progress => mutate([progress]),
     }
 }

src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications.provider.tsx

@@ -29,17 +29,25 @@ export function useGetUserCertifications(
     })
     const loading: boolean = !data && !error
 
-    const completed: ReadonlyArray<UserCertificationCompleted> = useMemo(() => data
-        ?.filter(c => c.status === UserCertificationProgressStatus.completed)
-        .map(c => c as UserCertificationCompleted)
-        .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()) ?? []
-    , [data])
-
-    const inProgress: ReadonlyArray<UserCertificationInProgress> = useMemo(() => data
-        ?.filter(c => c.status === UserCertificationProgressStatus.inProgress)
-        .map(c => c as UserCertificationInProgress)
-        .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()) ?? []
-    , [data])
+    const completed: ReadonlyArray<UserCertificationCompleted> = useMemo(
+        () => data
+            ?.filter(c => c.status === UserCertificationProgressStatus.completed)
+            .map(c => c as UserCertificationCompleted)
+            .sort((a, b) => new Date(b.updatedAt)
+                .getTime() - new Date(a.updatedAt)
+                .getTime()) ?? [],
+        [data],
+    )
+
+    const inProgress: ReadonlyArray<UserCertificationInProgress> = useMemo(
+        () => data
+            ?.filter(c => c.status === UserCertificationProgressStatus.inProgress)
+            .map(c => c as UserCertificationInProgress)
+            .sort((a, b) => new Date(b.updatedAt)
+                .getTime() - new Date(a.updatedAt)
+                .getTime()) ?? [],
+        [data],
+    )
 
     if (error) {
         errorHandle(error, 'There was an error getting your course progress.')

src-ts/tools/learn/learn-lib/data-providers/user-completed-certifications-provider/user-completed-certifications.provider.tsx

@@ -8,20 +8,19 @@ import { UserCompletedCertificationsProviderData } from './user-completed-certif
 export function useGetUserCompletedCertifications(
     userId?: number,
     provider?: string,
-    certification?: string
+    certification?: string,
 ): UserCompletedCertificationsProviderData {
 
     const url: string = learnUrlGet('completed-certifications', `${userId}`)
 
-    const {data, error}: SWRResponse<ReadonlyArray<LearnUserCompletedCertification>> = useSWR(url)
+    const { data, error }: SWRResponse<ReadonlyArray<LearnUserCompletedCertification>> = useSWR(url)
 
     let certifications: ReadonlyArray<LearnUserCompletedCertification> = data ?? []
 
     if (provider || certification) {
-        certifications = certifications.filter((c) => {
-            return (!provider || c.provider === provider) &&
-            (!certification || c.certification === certification)
-        })
+        certifications = certifications
+            .filter(c => (!provider || c.provider === provider)
+                && (!certification || c.certification === certification))
     }
 
     return {