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,
+            }
+        ],
         'no-extra-boolean-cast': 'off',
         'no-null/no-null': 'error',
         'no-plusplus': [

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

@@ -47,7 +47,8 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
     const certificateWrapRef: MutableRefObject<HTMLElement | 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/lesson-provider/lesson.provider.tsx

@@ -57,7 +57,8 @@ export function useLessonProvider(
                     courseData?.key ?? course,
                     module,
                     lesson,
-                ].filter(Boolean).join('/')
+                ].filter(Boolean)
+                    .join('/')
 
                 setState(prevState => ({
                     ...prevState,

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

@@ -29,14 +29,15 @@ export function useResourceProvider(providerName?: string): ResourceProviderData
             loading: true,
         }))
 
-        getResourceProvidersAsync().then(providers => {
-            setState(prevState => ({
-                ...prevState,
-                loading: false,
-                provider: providers?.find(p => p.name === providerName),
-                ready: true,
-            }))
-        })
+        getResourceProvidersAsync()
+            .then(providers => {
+                setState(prevState => ({
+                    ...prevState,
+                    loading: false,
+                    provider: providers?.find(p => p.name === providerName),
+                    ready: true,
+                }))
+            })
     }, [providerName])
 
     return state

src-ts/tools/learn/my-learning/tab-content-layout/TabContentLayout.tsx

@@ -37,10 +37,12 @@ const TabContentLayout: FC<TabContentLayoutProps> = (props: TabContentLayoutProp
         const certsByCategory: Dictionary<Array<LearnCertification>> = groupBy(props.certifications, 'category')
         return [
             { label: 'All Categories', value: '' },
-            ...Object.keys(certsByCategory).sort().map(c => ({
-                label: c,
-                value: c,
-            })),
+            ...Object.keys(certsByCategory)
+                .sort()
+                .map(c => ({
+                    label: c,
+                    value: c,
+                })),
         ]
     }, [props.certifications])
 

src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx

@@ -35,10 +35,12 @@ const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCou
         value: string,
     }> = useMemo(() => [
         { label: 'All Categories', orderIndex: -1, value: '' },
-        ...Object.keys(certsByCategory).sort().map(c => ({
-            label: c,
-            value: c,
-        })),
+        ...Object.keys(certsByCategory)
+            .sort()
+            .map(c => ({
+                label: c,
+                value: c,
+            })),
     ], [certsByCategory])
 
     // create and sort the certificates groups

src-ts/tools/learn/welcome/progress-block/cards-slider/CardsSlider.tsx

@@ -35,14 +35,15 @@ const CardsSlider: FC<CardsSliderProps> = (props: CardsSliderProps) => {
                 {renderSlides(props.children)}
             </div>
             <div className={styles['nav-wrap']}>
-                {fill(Array(props.children.length), '').map((_, i) => (
-                    <span
+                {fill(Array(props.children.length), '')
+                    .map((_, i) => (
+                        <span
                         // eslint-disable-next-line react/no-array-index-key
-                        key={i}
-                        className={classNames(styles['nav-dot'], activeSlide === i && 'active')}
-                        onClick={() => setActiveSlide(i)}
-                    />
-                ))}
+                            key={i}
+                            className={classNames(styles['nav-dot'], activeSlide === i && 'active')}
+                            onClick={() => setActiveSlide(i)}
+                        />
+                    ))}
             </div>
         </div>
     )

src-ts/tools/learn/welcome/progress-block/progress-action/ProgressAction.tsx

@@ -51,7 +51,8 @@ const ProgressAction: FC<ProgressActionProps> = (props: ProgressActionProps) =>
     const recentlyUpdatedCertifications: Array<LearnUserCertificationProgress> = orderBy([
         ...props.userCompletedCertifications,
         ...props.userInProgressCertifications,
-    ], 'updatedAt', 'desc').slice(0, USER_PROGRESS_MAX_SLIDES_COUNT)
+    ], 'updatedAt', 'desc')
+        .slice(0, USER_PROGRESS_MAX_SLIDES_COUNT)
 
     function renderInProgress(courseToDisplay: UserCertificationInProgress): JSX.Element {
         return (

src-ts/tools/work/work-detail-solutions/work-solutions-list/WorkSolutionsList.tsx

@@ -20,7 +20,8 @@ const WorkSolutionsList: FC<WorkSolutionsListProps> = (props: WorkSolutionsListP
             <div className={styles['solutions-not-available']}>
                 YOUR SOLUTIONS WILL BE AVAILABLE FOR DOWNLOAD ON:
                 <br />
-                {moment(props.work.solutionsReadyDate).format('MM/DD/YY')}
+                {moment(props.work.solutionsReadyDate)
+                    .format('MM/DD/YY')}
             </div>
         )
     }

src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts

@@ -146,12 +146,13 @@ export function buildUpdateRequest(workTypeConfig: WorkTypeConfig, challenge: Ch
         },
     ]
 
-    Object.keys(formData).forEach(key => {
-        intakeMetadata.push({
-            name: ChallengeMetadataName[key as keyof typeof ChallengeMetadataName],
-            value: formData[key] || '',
+    Object.keys(formData)
+        .forEach(key => {
+            intakeMetadata.push({
+                name: ChallengeMetadataName[key as keyof typeof ChallengeMetadataName],
+                value: formData[key] || '',
+            })
         })
-    })
     // ---- End Build Metadata ---- //
 
     // --- Build the Markdown string that gets displayed in Work Manager app and others --- //
@@ -433,7 +434,8 @@ function checkFormDataOptionEmpty(detail: any): boolean {
         || (typeof detail === 'string' && detail.trim().length === 0)
         || (Array.isArray(detail) && detail.length === 0)
         || (typeof detail === 'object'
-            && Object.values(detail).filter((val: any) => val && val.trim().length !== 0)
+            && Object.values(detail)
+                .filter((val: any) => val && val.trim().length !== 0)
                 .length === 0)
     )
 }
@@ -446,7 +448,9 @@ function findOpenPhase(challenge: Challenge): ChallengePhase | undefined {
 
     // sort the phases descending by start date
     const sortedPhases: Array<ChallengePhase> = challenge.phases
-        .sort((a, b) => new Date(b.actualStartDate).getTime() - new Date(a.actualStartDate).getTime())
+        .sort((a, b) => new Date(b.actualStartDate)
+            .getTime() - new Date(a.actualStartDate)
+            .getTime())
 
     const now: Date = new Date()
     // if we have an open phase, just use that
@@ -624,7 +628,8 @@ function getProgressStepDateEnd(challenge: Challenge, phases: Array<string>): Da
         return undefined
     }
 
-    if (phase.isOpen || moment(phase.scheduledStartDate).isAfter()) {
+    if (phase.isOpen || moment(phase.scheduledStartDate)
+        .isAfter()) {
         return new Date(phase.scheduledEndDate)
     }
 
@@ -638,7 +643,8 @@ function getProgressStepDateStart(challenge: Challenge, phases: Array<string>):
         return undefined
     }
 
-    if (!phase.isOpen || moment(phase.scheduledStartDate).isAfter()) {
+    if (!phase.isOpen || moment(phase.scheduledStartDate)
+        .isAfter()) {
         return new Date(phase.scheduledStartDate)
     }
 
@@ -651,21 +657,30 @@ function getSolutionsReadyDate(challenge: Challenge): Date | undefined {
 
 function getStartDate(): string {
     let daysToAdd: number = 1
-    switch (moment(new Date()).weekday()) {
-        case moment().day('Friday').weekday():
+    switch (moment(new Date())
+        .weekday()) {
+        case moment()
+            .day('Friday')
+            .weekday():
             daysToAdd = 3
             break
-        case moment().day('Saturday').weekday():
+        case moment()
+            .day('Saturday')
+            .weekday():
             daysToAdd = 2
             break
-        case moment().day('Sunday').weekday():
+        case moment()
+            .day('Sunday')
+            .weekday():
             daysToAdd = 1
             break
         default:
             daysToAdd = 1
     }
 
-    return moment().add(daysToAdd, 'days').format()
+    return moment()
+        .add(daysToAdd, 'days')
+        .format()
 }
 
 function getSubmittedDate(challenge: Challenge): Date {