Skip to content

Commit 5b7fcb8

Browse files
vas3avas3a
committed
lint fixes for src-ts/tools/learn
1 parent 80832a6 commit 5b7fcb8

File tree

20 files changed

+118
-100
lines changed

20 files changed

+118
-100
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"start": "sh start-ssl.sh",
88
"start:brooke": "sudo sh start-ssl-brooke.sh",
99
"build": "yarn react-app-rewired build",
10-
"lint:ts": "eslint -c ./src-ts/.eslintrc.js 'src-ts/tools/learn/**/*.{ts,tsx}'",
11-
"lint:ts:fix": "eslint -c ./src-ts/.eslintrc.js 'src-ts/tools/learn/**/*.{ts,tsx}' --fix",
10+
"lint:ts": "eslint -c ./src-ts/.eslintrc.js 'src-ts/**/*.{ts,tsx}'",
11+
"lint:ts:fix": "eslint -c ./src-ts/.eslintrc.js 'src-ts/**/*.{ts,tsx}' --fix",
1212
"lint:js": "eslint -c ./src/.eslintrc.js 'src/**/*.{js,jsx}'",
1313
"lint:js:fix": "eslint -c ./src/.eslintrc.js 'src/**/*.{js,jsx}' --fix",
1414
"lint": "npm run lint:js && npm run lint:ts",

‎src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const CertificationDetailsPage: FC<{}> = () => {
8080
}
8181

8282
function renderMainContent(): ReactNode {
83-
return ready ? (
83+
return ready && certification ? (
8484
isNotEnrolledView ? (
8585
<CertifDetailsContent certification={certification} sectionClassName={styles['text-section']}>
8686
{renderCertificationCurriculum()}
@@ -102,15 +102,14 @@ const CertificationDetailsPage: FC<{}> = () => {
102102
/>
103103
</>
104104
)
105-
) : null
105+
) : <></>
106106
}
107107

108108
function renderSidebar(): ReactNode {
109-
return (
109+
return !!certification && (
110110
<CertificationDetailsSidebar
111111
certification={certification}
112112
enrolled={isEnrolled}
113-
profile={profile}
114113
certProgress={progress}
115114
/>
116115
)
@@ -122,7 +121,7 @@ const CertificationDetailsPage: FC<{}> = () => {
122121
mainContent={renderMainContent()}
123122
certification={certification}
124123
heroCTA={!isEnrolled && (
125-
<EnrollCtaBtn certification={certification?.dashedName} />
124+
<EnrollCtaBtn certification={certification?.dashedName ?? ''} />
126125
)}
127126
>
128127
<PageTitle>{certification?.title ?? 'Certification Details'}</PageTitle>

‎src-ts/tools/learn/certification-details/certification-curriculum/CertificationCurriculum.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { AssessmentCard, CourseCard } from './curriculum-cards'
1515
import styles from './CertificationCurriculum.module.scss'
1616

1717
interface CertificationCurriculumProps {
18-
certification: TCACertification
18+
certification?: TCACertification
1919
certsProgress?: ReadonlyArray<LearnUserCertificationProgress>
2020
isEnrolled: boolean
2121
isCompleted: boolean
@@ -38,17 +38,17 @@ const CertificationCurriculum: FC<CertificationCurriculumProps> = (props: Certif
3838
), [props.certsProgress])
3939

4040
const providersById: ProvidersByIdCollection = useMemo(() => (
41-
props.certification.resourceProviders.reduce((all, provider) => {
41+
(props.certification?.resourceProviders ?? []).reduce((all, provider) => {
4242
all[provider.id] = provider
4343
return all
4444
}, {} as ProvidersByIdCollection)
4545
), [props.certification])
4646

4747
const sortedCertResources: TCACertificationResource[] = useMemo(() => (
48-
orderBy(props.certification.certificationResources, 'displayOrder')
49-
), [props.certification.certificationResources])
48+
orderBy(props.certification?.certificationResources, 'displayOrder')
49+
), [props.certification?.certificationResources])
5050

51-
return (
51+
return props.certification ? (
5252
<div className={styles.wrap}>
5353
<div className={styles.headline}>
5454
<h2 className='details'>
@@ -84,7 +84,7 @@ const CertificationCurriculum: FC<CertificationCurriculumProps> = (props: Certif
8484
learnerLevel={cert.freeCodeCampCertification.learnerLevel}
8585
provider={get(providersById, [cert.resourceProviderId, 'name'])}
8686
isEnrolled={props.isEnrolled}
87-
tcaCertification={props.certification}
87+
tcaCertification={props.certification as TCACertification}
8888
/>
8989
))}
9090
<AssessmentCard
@@ -98,7 +98,7 @@ const CertificationCurriculum: FC<CertificationCurriculumProps> = (props: Certif
9898
/>
9999
</div>
100100
</div>
101-
)
101+
) : <></>
102102
}
103103

104104
export default CertificationCurriculum

‎src-ts/tools/learn/certification-details/certification-details-modal/certif-details-content/CertifDetailsContent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function renderBasicList(items: Array<string>): ReactNode {
1919
}
2020

2121
interface CertifDetailsContentProps {
22-
certification: TCACertification
22+
certification?: TCACertification
2323
children?: ReactNode
2424
sectionClassName?: string
2525
}
@@ -31,7 +31,7 @@ const CertifDetailsContent: FC<CertifDetailsContentProps> = (props: CertifDetail
3131
return (
3232
<div className={sectionClassName}>
3333
<h2>What I Will Learn?</h2>
34-
{renderBasicList(props.certification.learningOutcomes)}
34+
{renderBasicList(props.certification?.learningOutcomes ?? [])}
3535
</div>
3636
)
3737
}
@@ -40,7 +40,7 @@ const CertifDetailsContent: FC<CertifDetailsContentProps> = (props: CertifDetail
4040
return (
4141
<div className={sectionClassName}>
4242
<h2>Prerequisites</h2>
43-
{props.certification.prerequisites?.length ? (
43+
{props.certification?.prerequisites?.length ? (
4444
renderBasicList(props.certification.prerequisites)
4545
) : (
4646
<p className='body-main'>

‎src-ts/tools/learn/certification-details/certification-details-modal/certif-details-content/data/faqs.data.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FaqEntry } from '../../../accordion/Accordion';
1+
import { FaqEntry } from '../../../accordion/Accordion'
22

33
export const FAQs: Array<FaqEntry> = [
44
{

‎src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
22

33
import { BaseModal, Button } from '../../../../lib'
4-
import { TCACertification } from '../../learn-lib'
54

65
import styles from './EnrolledModal.module.scss'
76

‎src-ts/tools/learn/certification-details/enrollment-page/EnrollmentPage.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const EnrollmentPage: FC<{}> = () => {
5252
certification,
5353
ready: certificationReady,
5454
}: TCACertificationProviderData = useGetTCACertification(dashedName as string)
55+
const certificationDashedName: string = certification?.dashedName ?? ''
5556

5657
// fetch Stripe product data
5758
const { product }: { product: StripeProduct | undefined }
@@ -74,11 +75,11 @@ const EnrollmentPage: FC<{}> = () => {
7475
userInfo.current = { ...profile }
7576
}
7677

77-
// if is enrolled already, redirect back to certification
78+
// if user is enrolled already, redirect back to certification
7879
if (progressReady && !enrolledCheck.current) {
7980
enrolledCheck.current = true
8081
if (!!progress) {
81-
navigate(getTCACertificationPath(certification.dashedName))
82+
navigate(getTCACertificationPath(certificationDashedName))
8283
}
8384
}
8485

@@ -88,15 +89,15 @@ const EnrollmentPage: FC<{}> = () => {
8889
return
8990
}
9091

91-
await enrollTCACertificationAsync(`${profile.userId}`, `${certification.id}`)
92+
await enrollTCACertificationAsync(`${profile.userId}`, `${certification?.id}`)
9293
.then(d => {
9394
setIsEnrolledModalOpen(true)
9495
setCertificateProgress(d)
9596
})
9697
}, [certification?.id, profile, setCertificateProgress])
9798

9899
function navToCertificationDetails(): void {
99-
navigate(getTCACertificationPath(certification.dashedName))
100+
navigate(getTCACertificationPath(certificationDashedName))
100101
}
101102

102103
function closeEnrolledModal(): void {
@@ -108,7 +109,7 @@ const EnrollmentPage: FC<{}> = () => {
108109
return ready ? (
109110
<>
110111
<PerksSection
111-
style='clear'
112+
theme='clear'
112113
items={perks}
113114
title={EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION
114115
? 'Enroll now with our introductory low pricing!'
@@ -125,15 +126,15 @@ const EnrollmentPage: FC<{}> = () => {
125126

126127
function renderSidebar(): ReactNode {
127128
return (
128-
<EnrollmentSidebar profile={profile} onEnroll={startEnrollFlow} product={product} />
129+
<EnrollmentSidebar onEnroll={startEnrollFlow} product={product} />
129130
)
130131
}
131132

132133
useLayoutEffect(() => {
133134
if (profileReady && !profile) {
134-
navigate(getTCACertificationPath(certification.dashedName))
135+
navigate(getTCACertificationPath(certificationDashedName))
135136
}
136-
}, [profileReady, profile, navigate, certification?.dashedName])
137+
}, [profileReady, profile, navigate, certificationDashedName])
137138

138139
return (
139140
<PageLayout

‎src-ts/tools/learn/certification-details/enrollment-page/enroll-payment-form/EnrollPaymentForm.tsx‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dispatch, SetStateAction, useState } from 'react'
1+
import { Dispatch, FC, FocusEvent, SetStateAction, SyntheticEvent, useState } from 'react'
22
import classNames from 'classnames'
33

44
import {
@@ -40,7 +40,7 @@ interface EnrollPaymentFormProps {
4040
type CardChangeEvent
4141
= StripeCardExpiryElementChangeEvent | StripeCardNumberElementChangeEvent | StripeCardCvcElementChangeEvent
4242

43-
const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymentFormProps) => {
43+
const EnrollPaymentForm: FC<EnrollPaymentFormProps> = (props: EnrollPaymentFormProps) => {
4444
const [cardNumberError, setCardNumberError]: [string, Dispatch<string>] = useState<string>('')
4545
const [cardExpiryError, setCardExpiryError]: [string, Dispatch<string>] = useState<string>('')
4646
const [cardCVVError, setCardCVVError]: [string, Dispatch<string>] = useState<string>('')
@@ -57,7 +57,11 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
5757

5858
const getError: (data: any) => string = data => data?.error?.message || ''
5959

60-
const onOpenOrderContract: (event: React.SyntheticEvent) => void = event => {
60+
function hideOrderContractModal(): void {
61+
setIsOrderContractModalOpen(false)
62+
}
63+
64+
function onOpenOrderContract(event: SyntheticEvent): void {
6165
event.preventDefault()
6266
event.stopPropagation()
6367
setIsOrderContractModalOpen(true)
@@ -70,28 +74,35 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
7074
</div>
7175
)
7276

73-
function cardElementOnChange(fieldName: string, data: CardChangeEvent, stateUpdater: Dispatch<string>): void {
74-
const error: string = getError(data)
75-
stateUpdater(error)
76-
props.onUpdateField(fieldName, data.complete)
77-
setFormDirtyState({
78-
...formDirtyState,
79-
[fieldName]: true,
80-
})
77+
function cardElementOnChange(fieldName: string, stateUpdater: Dispatch<string>): (data: CardChangeEvent) => void {
78+
return (data: CardChangeEvent) => {
79+
const error: string = getError(data)
80+
stateUpdater(error)
81+
props.onUpdateField(fieldName, data.complete)
82+
setFormDirtyState({
83+
...formDirtyState,
84+
[fieldName]: true,
85+
})
86+
}
87+
}
88+
89+
function handleTosCheckboxChange(event: FocusEvent<HTMLInputElement, Element>): void {
90+
props.onUpdateField('subsContract', event.target.checked)
8191
}
8292

8393
return (
8494
<div className={classNames(styles['payment-form'], props.isPayProcessing ? 'pointer-events-none' : '')}>
8595
<OrderContractModal
8696
isOpen={isOrderContractModalOpen}
87-
onClose={() => setIsOrderContractModalOpen(false)}
97+
onClose={hideOrderContractModal}
8898
/>
8999

90100
<div className={styles.label}>Card Information</div>
91101

92102
<div className={styles['input-wrap-wrapper']}>
93103
<InputWrapper
94104
label='Card Number'
105+
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
95106
tabIndex={2}
96107
type='text'
97108
disabled={false}
@@ -105,7 +116,7 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
105116
base: styles.cardElement,
106117
},
107118
}}
108-
onChange={(event: StripeCardNumberElementChangeEvent) => cardElementOnChange('cardComplete', event, setCardNumberError)}
119+
onChange={cardElementOnChange('cardComplete', setCardNumberError)}
109120
/>
110121
</InputWrapper>
111122
</div>
@@ -114,6 +125,7 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
114125
<InputWrapper
115126
className={styles.cardDate}
116127
label='Date'
128+
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
117129
tabIndex={3}
118130
type='text'
119131
disabled={false}
@@ -127,11 +139,12 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
127139
},
128140
placeholder: 'MM/YY',
129141
}}
130-
onChange={(event: StripeCardExpiryElementChangeEvent) => cardElementOnChange('expiryComplete', event, setCardExpiryError)}
142+
onChange={cardElementOnChange('expiryComplete', setCardExpiryError)}
131143
/>
132144
</InputWrapper>
133145
<InputWrapper
134146
label='CVC'
147+
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
135148
tabIndex={3}
136149
type='text'
137150
disabled={false}
@@ -145,18 +158,19 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
145158
},
146159
placeholder: 'CCV',
147160
}}
148-
onChange={(event: StripeCardCvcElementChangeEvent) => cardElementOnChange('cvvComplete', event, setCardCVVError)}
161+
onChange={cardElementOnChange('cvvComplete', setCardCVVError)}
149162
/>
150163
</InputWrapper>
151164
</div>
152165

153166
<InputText
154167
label={renderCheckboxLabel()}
155168
name='order-contract'
169+
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
156170
tabIndex={1}
157171
type='checkbox'
158172
checked={props.formData.subsContract}
159-
onChange={event => props.onUpdateField('subsContract', event.target.checked)}
173+
onChange={handleTosCheckboxChange}
160174
/>
161175

162176
{

‎src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,13 @@ const EnrollmentSidebar: FC<EnrollmentSidebarProps> = (props: EnrollmentSidebarP
9191
}, 3000)
9292
} else {
9393
// payment error!
94+
// eslint-disable-next-line no-console
9495
console.error('Enroll payment error', paymentResult.error)
9596
setPaymentError(paymentResult.error.message as string)
9697
setPayProcessing(false)
9798
}
9899
} catch (error: any) {
100+
// eslint-disable-next-line no-console
99101
console.error('Enroll payment error', error)
100102
setPaymentError(error.message || error)
101103
setPayProcessing(false)

‎src-ts/tools/learn/certification-details/perks-section/PerksSection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import classNames from 'classnames'
21
import { FC } from 'react'
2+
import classNames from 'classnames'
33

4-
import { type PerkItem } from '../data/perks.data'
4+
import { type PerkItem } from '../certification-details-modal/certif-details-content/data'
55

66
import { getPerkIcon } from './icons-map'
77
import styles from './PerksSection.module.scss'
88

99
interface PerksSectionProps {
1010
items: Array<PerkItem>
1111
title?: string
12-
style?: 'clear'
12+
theme?: 'clear'
1313
}
1414

1515
const PerksSection: FC<PerksSectionProps> = (props: PerksSectionProps) => (
16-
<div className={classNames(styles.wrap, props.style && styles[props.style])}>
16+
<div className={classNames(styles.wrap, props.theme && styles[props.theme])}>
1717
<h2>{props.title ?? 'Why certify with Topcoder?'}</h2>
1818
<svg width='0' height='0'>
1919
<defs>

0 commit comments

Comments
 (0)