SkillSubform.tsx ➔ SkillSubform - Code Metrics - Inspection of "7d77e87aa7ad145f0a855475f2ec5911c7c3ac72" - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Branch — feature/redux-applications (7d77e8)

by Tristan

created 2020-08-13 16:27 UTC

SkillSubform.tsx ➔ SkillSubform B

↳ Parent: resources/assets/js/components/Application/ExperienceModals/SkillSubform.tsx

Complexity

Conditions

Size

Total Lines	137
Code Lines	113

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	113
dl	0
loc	137
c	0
b	0
f	0
rs	7
cc	1

How to fix Long Method

import React from "react";
import { FormattedMessage, useIntl, defineMessages } from "react-intl";
import { Field, useFormikContext } from "formik";
import * as Yup from "yup";
import { jobShow } from "../../../helpers/routes";
import { getLocale } from "../../../helpers/localize";
import CheckboxGroup from "../../Form/CheckboxGroup";
import CheckboxInput from "../../Form/CheckboxInput";

const messages = defineMessages({
  linkToJobTitle: {
    id: "experienceModal.linkToJob.title",
    defaultMessage:
      "Open the job poster in a new tab or window to review the definition of skills.",
    description: "Title attribute for the link back to the job.",
  },
  skillCheckboxGroupLabel: {
    id: "experienceModal.skillCheckboxGroupLabel",
    defaultMessage: "Select all that apply:",
    description: "Label for the Skills checkbox groups.",
  },
});

export interface SkillFormValues {
  requiredSkills: string[];
  optionalSkills: string[];
}

export const validationShape = {
  requiredSkills: Yup.array().of(Yup.string()),
  optionalSkills: Yup.array().of(Yup.string()),
};

export interface SkillSubformProps {
  jobId: number;
  jobRequiredSkills: string[];
  jobOptionalSkills: string[];
}

export function SkillSubform({
  jobId,
  jobRequiredSkills,
  jobOptionalSkills,
}: SkillSubformProps): React.ReactElement {
  const intl = useIntl();
  const locale = getLocale(intl.locale);

  const formikContext = useFormikContext();
  const requiredMeta = formikContext.getFieldMeta<string[]>("requiredSkills");
  const optionalMeta = formikContext.getFieldMeta<string[]>("optionalSkills");

  const linkToJob = (text): React.ReactElement => (
    <a
      href={jobShow(locale, jobId)}
      title={intl.formatMessage(messages.linkToJobTitle)}
      target="_blank"
      rel="noreferrer"
    >
      {text}
    </a>
  );

  return (
    <>
      <div data-c-container="medium">
        <p
          data-c-margin="top(1) bottom(1)"
          data-c-font-size="h4"
          data-c-font-weight="bold"
          data-c-color="c3"
        >
          <FormattedMessage
            id="experienceModal.connectSubtitle"
            defaultMessage="Connect This Experience to the Job"
            description="Subtitle of Connect-to-skills section."
          />
        </p>
        <p data-c-margin="bottom(1)">
          <FormattedMessage
            id="experienceModal.connectDescription"
            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."
            description="Explanation for Connect-to-skills section."
            values={{
              a: (...chunks): React.ReactElement => linkToJob(chunks),
            }}
          />
        </p>
        <p data-c-margin="bottom(1)">
          <FormattedMessage
            id="experienceModal.connectDescription.noSkillsOkay"
            defaultMessage="If none of the skills apply to this experience, feel free to save it without any skills selected."
            description="Explanation that you can save an experience without connecting it to skills yet."
          />
        </p>
      </div>
      <div data-c-container="medium">
        <div data-c-grid="gutter(all, 1) middle">
          <div data-c-grid-item="base(1of1)">
            <p data-c-font-weight="bold">
              <FormattedMessage
                id="experienceModal.requiredSkillsSubtitle"
                defaultMessage="Please indicate which of the following <a>required skills</a> (if any) you used in this experience."
                description="Title for the Required Skills checkbox."
                values={{
                  a: (...chunks): React.ReactElement => linkToJob(chunks),
                }}
              />
            </p>
          </div>
          <CheckboxGroup
            id="requiredSkills"
            label={intl.formatMessage(messages.skillCheckboxGroupLabel)}
            grid="base(1of1)"
            value={requiredMeta.value}
            error={requiredMeta.error}
            touched={requiredMeta.touched}
            onChange={formikContext.setFieldValue}
            onBlur={formikContext.setFieldTouched}
          >
            {jobRequiredSkills.map(
              (name): React.ReactElement => {
                return (
                  <Field
                    key={name}
                    id={name}
                    name={name}
                    label={name}
                    component={CheckboxInput}
                    grid="base(1of1)"
                  />
                );
              },
            )}
          </CheckboxGroup>

          <div data-c-grid-item="base(1of1)">
            <p data-c-font-weight="bold">
              <FormattedMessage
                id="experienceModal.optionalSkillsSubtitle"
                defaultMessage="Please indicate which of the following <a>optional skills</a> (if any) you used in this experience."
                description="Title for the Optional Skills checkbox."
                values={{
                  a: (...chunks): React.ReactElement => linkToJob(chunks),
                }}
              />
            </p>
          </div>
          <CheckboxGroup
            id="optionalSkills"
            label={intl.formatMessage(messages.skillCheckboxGroupLabel)}
            grid="base(1of1)"
            value={optionalMeta.value}
            error={optionalMeta.error}
            touched={optionalMeta.touched}
            onChange={formikContext.setFieldValue}
            onBlur={formikContext.setFieldTouched}
          >
            {jobOptionalSkills.map(
              (name): React.ReactElement => {
                return (
                  <Field
                    key={name}
                    id={name}
                    name={name}
                    label={name}
                    component={CheckboxInput}
                    grid="base(1of1)"
                  />
                );
              },
            )}
          </CheckboxGroup>
        </div>
      </div>
    </>
  );
}

export default SkillSubform;


1			import React from "react";
2			import { FormattedMessage, useIntl, defineMessages } from "react-intl";
3			import { Field, useFormikContext } from "formik";
4			import * as Yup from "yup";
5			import { jobShow } from "../../../helpers/routes";
6			import { getLocale } from "../../../helpers/localize";
7			import CheckboxGroup from "../../Form/CheckboxGroup";
8			import CheckboxInput from "../../Form/CheckboxInput";
9
10			const messages = defineMessages({
11			linkToJobTitle: {
12			id: "experienceModal.linkToJob.title",
13			defaultMessage:
14			"Open the job poster in a new tab or window to review the definition of skills.",
15			description: "Title attribute for the link back to the job.",
16			},
17			skillCheckboxGroupLabel: {
18			id: "experienceModal.skillCheckboxGroupLabel",
19			defaultMessage: "Select all that apply:",
20			description: "Label for the Skills checkbox groups.",
21			},
22			});
23
24			export interface SkillFormValues {
25			requiredSkills: string[];
26			optionalSkills: string[];
27			}
28
29			export const validationShape = {
30			requiredSkills: Yup.array().of(Yup.string()),
31			optionalSkills: Yup.array().of(Yup.string()),
32			};
33
34			export interface SkillSubformProps {
35			jobId: number;
36			jobRequiredSkills: string[];
37			jobOptionalSkills: string[];
38			}
39
40			export function SkillSubform({
41			jobId,
42			jobRequiredSkills,
43			jobOptionalSkills,
44			}: SkillSubformProps): React.ReactElement {
45			const intl = useIntl();
46			const locale = getLocale(intl.locale);
47
48			const formikContext = useFormikContext();
49			const requiredMeta = formikContext.getFieldMeta<string[]>("requiredSkills");
50			const optionalMeta = formikContext.getFieldMeta<string[]>("optionalSkills");
51
52			const linkToJob = (text): React.ReactElement => (
53			<a
54			href={jobShow(locale, jobId)}
55			title={intl.formatMessage(messages.linkToJobTitle)}
56			target="_blank"
57			rel="noreferrer"
58			>
59			{text}
60			</a>
61			);
62
63			return (
64			<>
65			<div data-c-container="medium">
66			<p
67			data-c-margin="top(1) bottom(1)"
68			data-c-font-size="h4"
69			data-c-font-weight="bold"
70			data-c-color="c3"
71			>
72			<FormattedMessage
73			id="experienceModal.connectSubtitle"
74			defaultMessage="Connect This Experience to the Job"
75			description="Subtitle of Connect-to-skills section."
76			/>
77			</p>
78			<p data-c-margin="bottom(1)">
79			<FormattedMessage
80			id="experienceModal.connectDescription"
81			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."
82			description="Explanation for Connect-to-skills section."
83			values={{
84			a: (...chunks): React.ReactElement => linkToJob(chunks),
85			}}
86			/>
87			</p>
88			<p data-c-margin="bottom(1)">
89			<FormattedMessage
90			id="experienceModal.connectDescription.noSkillsOkay"
91			defaultMessage="If none of the skills apply to this experience, feel free to save it without any skills selected."
92			description="Explanation that you can save an experience without connecting it to skills yet."
93			/>
94			</p>
95			</div>
96			<div data-c-container="medium">
97			<div data-c-grid="gutter(all, 1) middle">
98			<div data-c-grid-item="base(1of1)">
99			<p data-c-font-weight="bold">
100			<FormattedMessage
101			id="experienceModal.requiredSkillsSubtitle"
102			defaultMessage="Please indicate which of the following <a>required skills</a> (if any) you used in this experience."
103			description="Title for the Required Skills checkbox."
104			values={{
105			a: (...chunks): React.ReactElement => linkToJob(chunks),
106			}}
107			/>
108			</p>
109			</div>
110			<CheckboxGroup
111			id="requiredSkills"
112			label={intl.formatMessage(messages.skillCheckboxGroupLabel)}
113			grid="base(1of1)"
114			value={requiredMeta.value}
115			error={requiredMeta.error}
116			touched={requiredMeta.touched}
117			onChange={formikContext.setFieldValue}
118			onBlur={formikContext.setFieldTouched}
119			>
120			{jobRequiredSkills.map(
121			(name): React.ReactElement => {
122			return (
123			<Field
124			key={name}
125			id={name}
126			name={name}
127			label={name}
128			component={CheckboxInput}
129			grid="base(1of1)"
130			/>
131			);
132			},
133			)}
134			</CheckboxGroup>
135
136			<div data-c-grid-item="base(1of1)">
137			<p data-c-font-weight="bold">
138			<FormattedMessage
139			id="experienceModal.optionalSkillsSubtitle"
140			defaultMessage="Please indicate which of the following <a>optional skills</a> (if any) you used in this experience."
141			description="Title for the Optional Skills checkbox."
142			values={{
143			a: (...chunks): React.ReactElement => linkToJob(chunks),
144			}}
145			/>
146			</p>
147			</div>
148			<CheckboxGroup
149			id="optionalSkills"
150			label={intl.formatMessage(messages.skillCheckboxGroupLabel)}
151			grid="base(1of1)"
152			value={optionalMeta.value}
153			error={optionalMeta.error}
154			touched={optionalMeta.touched}
155			onChange={formikContext.setFieldValue}
156			onBlur={formikContext.setFieldTouched}
157			>
158			{jobOptionalSkills.map(
159			(name): React.ReactElement => {
160			return (
161			<Field
162			key={name}
163			id={name}
164			name={name}
165			label={name}
166			component={CheckboxInput}
167			grid="base(1of1)"
168			/>
169			);
170			},
171			)}
172			</CheckboxGroup>
173			</div>
174			</div>
175			</>
176			);
177			}
178
179			export default SkillSubform;
180

GCTC-NTGC / TalentCloud

Branch — feature/redux-applications (7d77e8)

SkillSubform.tsx ➔ SkillSubform B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like