GCTC-NTGC /
TalentCloud
| Conditions | 1 |
| Total Lines | 141 |
| Code Lines | 114 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import React from "react"; |
||
| 34 | |||
| 35 | export function SkillSubform<T extends SkillFormValues>({ |
||
| 36 | jobId, |
||
| 37 | jobRequiredSkills, |
||
| 38 | jobOptionalSkills, |
||
| 39 | formikProps, |
||
| 40 | }: SkillSubformProps<T>): React.ReactElement { |
||
| 41 | const intl = useIntl(); |
||
| 42 | const locale = getLocale(intl.locale); |
||
| 43 | const { |
||
| 44 | errors, |
||
| 45 | touched, |
||
| 46 | }: { |
||
| 47 | errors: FormikErrors<SkillFormValues>; |
||
| 48 | touched: FormikTouched<SkillFormValues>; |
||
| 49 | } = formikProps; |
||
| 50 | |||
| 51 | const linkToJob = (text): React.ReactElement => ( |
||
| 52 | <a |
||
| 53 | href={jobShow(locale, jobId)} |
||
| 54 | title={intl.formatMessage(messages.linkToJobTitle)} |
||
| 55 | target="_blank" |
||
| 56 | rel="noreferrer" |
||
| 57 | > |
||
| 58 | {text} |
||
| 59 | </a> |
||
| 60 | ); |
||
| 61 | |||
| 62 | return ( |
||
| 63 | <> |
||
| 64 | <div data-c-container="medium"> |
||
| 65 | <p |
||
| 66 | data-c-margin="top(1) bottom(1)" |
||
| 67 | data-c-font-size="h4" |
||
| 68 | data-c-font-weight="bold" |
||
| 69 | data-c-color="c3" |
||
| 70 | > |
||
| 71 | <FormattedMessage |
||
| 72 | id="experienceModal.connectSubtitle" |
||
| 73 | defaultMessage="Connect This Experience to the Job" |
||
| 74 | description="Subtitle of Connect-to-skills section." |
||
| 75 | /> |
||
| 76 | </p> |
||
| 77 | <p data-c-margin="bottom(1)"> |
||
| 78 | <FormattedMessage |
||
| 79 | id="experienceModal.connectDescription" |
||
| 80 | defaultMessage="Below you can select which of the job skills you used during this experience. Later on, you’ll be asked to provide a few sentences to help managers understand how you used this skill. You can <a>review the definitions</a> of the skills on the job poster." |
||
| 81 | description="Explanation for Connect-to-skills section." |
||
| 82 | values={{ |
||
| 83 | a: (...chunks): React.ReactElement => linkToJob(chunks), |
||
| 84 | }} |
||
| 85 | /> |
||
| 86 | </p> |
||
| 87 | <p data-c-margin="bottom(1)"> |
||
| 88 | <FormattedMessage |
||
| 89 | id="experienceModal.connectDescription.noSkillsOkay" |
||
| 90 | defaultMessage="If none of the skills apply to this experience, feel free to save it without any skills selected." |
||
| 91 | description="Explanation that you can save an experience without connecting it to skills yet." |
||
| 92 | /> |
||
| 93 | </p> |
||
| 94 | </div> |
||
| 95 | <div data-c-container="medium"> |
||
| 96 | <div data-c-grid="gutter(all, 1) middle"> |
||
| 97 | <div data-c-grid-item="base(1of1)"> |
||
| 98 | <p data-c-font-weight="bold"> |
||
| 99 | <FormattedMessage |
||
| 100 | id="experienceModal.requiredSkillsSubtitle" |
||
| 101 | defaultMessage="Please indicate which of the following <a>required skills</a> (if any) you used in this experience." |
||
| 102 | description="Title for the Required Skills checkbox." |
||
| 103 | values={{ |
||
| 104 | a: (...chunks): React.ReactElement => linkToJob(chunks), |
||
| 105 | }} |
||
| 106 | /> |
||
| 107 | </p> |
||
| 108 | </div> |
||
| 109 | <CheckboxGroup |
||
| 110 | id="requiredSkills" |
||
| 111 | label={intl.formatMessage(messages.skillCheckboxGroupLabel)} |
||
| 112 | grid="base(1of1)" |
||
| 113 | value={formikProps.values.requiredSkills} |
||
| 114 | error={errors.requiredSkills} |
||
| 115 | touched={touched.requiredSkills} |
||
| 116 | onChange={formikProps.setFieldValue} |
||
| 117 | onBlur={formikProps.setFieldTouched} |
||
| 118 | > |
||
| 119 | {jobRequiredSkills.map( |
||
| 120 | (name): React.ReactElement => { |
||
| 121 | return ( |
||
| 122 | <Field |
||
| 123 | key={name} |
||
| 124 | id={name} |
||
| 125 | name={name} |
||
| 126 | label={name} |
||
| 127 | component={CheckboxInput} |
||
| 128 | grid="base(1of1)" |
||
| 129 | /> |
||
| 130 | ); |
||
| 131 | }, |
||
| 132 | )} |
||
| 133 | </CheckboxGroup> |
||
| 134 | |||
| 135 | <div data-c-grid-item="base(1of1)"> |
||
| 136 | <p data-c-font-weight="bold"> |
||
| 137 | <FormattedMessage |
||
| 138 | id="experienceModal.optionalSkillsSubtitle" |
||
| 139 | defaultMessage="Please indicate which of the following <a>optional skills</a> (if any) you used in this experience." |
||
| 140 | description="Title for the Optional Skills checkbox." |
||
| 141 | values={{ |
||
| 142 | a: (...chunks): React.ReactElement => linkToJob(chunks), |
||
| 143 | }} |
||
| 144 | /> |
||
| 145 | </p> |
||
| 146 | </div> |
||
| 147 | <CheckboxGroup |
||
| 148 | id="optionalSkills" |
||
| 149 | label={intl.formatMessage(messages.skillCheckboxGroupLabel)} |
||
| 150 | grid="base(1of1)" |
||
| 151 | value={formikProps.values.optionalSkills} |
||
| 152 | error={errors.optionalSkills} |
||
| 153 | touched={touched.optionalSkills} |
||
| 154 | onChange={formikProps.setFieldValue} |
||
| 155 | onBlur={formikProps.setFieldTouched} |
||
| 156 | > |
||
| 157 | {jobOptionalSkills.map( |
||
| 158 | (name): React.ReactElement => { |
||
| 159 | return ( |
||
| 160 | <Field |
||
| 161 | key={name} |
||
| 162 | id={name} |
||
| 163 | name={name} |
||
| 164 | label={name} |
||
| 165 | component={CheckboxInput} |
||
| 166 | grid="base(1of1)" |
||
| 167 | /> |
||
| 168 | ); |
||
| 169 | }, |
||
| 170 | )} |
||
| 171 | </CheckboxGroup> |
||
| 172 | </div> |
||
| 173 | </div> |
||
| 174 | </> |
||
| 175 | ); |
||
| 179 |
