SkillSubform.tsx ➔ SkillSubform - Code Metrics - Inspection of "Merge pull request #4386 from GCTC-NTGC/feature/ap..." - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — dev ( 22aa7f...cca3df )

by Chris

created 2020-09-23 14:29 UTC

SkillSubform.tsx ➔ SkillSubform B

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

Complexity

Conditions

Size

Total Lines	108
Code Lines	89

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	89
dl	0
loc	108
rs	7.36
c	0
b	0
f	0
cc	1

How to fix Long Method

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

const messages = defineMessages({
  linkToJobTitle: {
    id: "application.experienceModal.skillSubform.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: "application.experienceModal.skillSubform.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 {
  keyPrefix: string;
  jobId: number;
  jobRequiredSkills: string[];
  jobOptionalSkills: string[];
}

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

  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="application.experienceModal.skillSubform.connectSubtitle"
            defaultMessage="Connect This Experience to the Job"
            description="Subtitle of Connect-to-skills section."
          />
        </p>
        <p data-c-margin="bottom(1)">
          <FormattedMessage
            id="application.experienceModal.skillSubform.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="application.experienceModal.skillSubform.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="application.experienceModal.skillSubform.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>
          <div data-c-grid-item="base(1of1)">
            <CheckboxGroupField
              id={keyPrefix}
              groupLabel={intl.formatMessage(messages.skillCheckboxGroupLabel)}
              grid="base(1of1)"
              name="requiredSkills"
              allBoxes={jobRequiredSkills.map((skill) => ({
                value: skill,
                label: skill,
              }))}
            />
          </div>

          <div data-c-grid-item="base(1of1)">
            <p data-c-font-weight="bold">
              <FormattedMessage
                id="application.experienceModal.skillSubform.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>
          <div data-c-grid-item="base(1of1)">
            <CheckboxGroupField
              id={keyPrefix}
              groupLabel={intl.formatMessage(messages.skillCheckboxGroupLabel)}
              grid="base(1of1)"
              name="optionalSkills"
              allBoxes={jobOptionalSkills.map((skill) => ({
                value: skill,
                label: skill,
              }))}
            />
          </div>
        </div>
      </div>
    </>
  );
}

export default SkillSubform;


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

GCTC-NTGC / TalentCloud

Push — dev ( 22aa7f...cca3df )

SkillSubform.tsx ➔ SkillSubform B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like