resources/assets/js/components/Application/Review/SkillAccordion.tsx - Code Metrics - Inspection of "Add a stub Skills Intro step" - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/connect-application-st... ( fd5d08...3c62e3 )

by Tristan

created 2020-08-28 17:42 UTC

resources/assets/js/components/Application/Review/SkillAccordion.tsx A

↳ Parent: Project

Complexity

Total Complexity	37
Complexity/F	0

Size

Lines of Code	733
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	37
eloc	636
mnd	37
bc	37
fnc	0
dl	0
loc	733
rs	9.404
bpm	0
cpm	0
noi	0
c	0
b	0
f	0

import React, { useState } from "react";
import { useIntl, IntlShape, defineMessages } from "react-intl";
import { Experience, Skill, ExperienceSkill } from "../../../models/types";
import { accordionMessages } from "../applicationMessages";
import { getJustificationOfExperience } from "../helpers";
import { readableDate } from "../../../helpers/dates";
import {
  Locales,
  localizeFieldNonNull,
  getLocale,
} from "../../../helpers/localize";
import { titleBarDateRange } from "../ExperienceAccordions/BaseExperienceAccordion";

const skillAccordionMessages = defineMessages({
  justificationMissing: {
    id: "application.skillAccordion.justificationMissing",
    defaultMessage:
      "You haven't written an explanation of how you used this skill during this experience.",
    description:
      "Alert displayed when no justification has been added to an Experience.",
  },
});

interface ExperienceContentProps {
  intl: IntlShape;
  locale: Locales;
  experience: Experience;
  justification: string | null;
}

const ExperienceContent: React.FC<ExperienceContentProps> = ({
  intl,
  locale,
  experience,
  justification,
}) => {
  const notApplicable = (
    <p data-c-color="gray">
      {intl.formatMessage(accordionMessages.notApplicable)}
    </p>
  );

  let endDateOrNa;
  if ("end_date" in experience) {
    endDateOrNa = experience.end_date ? (
      <p>{readableDate(locale, experience.end_date)}</p>
    ) : (
      notApplicable
    );
  } else {
    endDateOrNa = notApplicable;
  }

  switch (experience.type) {
    case "experience_award":
      return (
        <>
          <p data-c-color="c2" data-c-margin="top(2)">
            {intl.formatMessage(accordionMessages.awardHeading, {
              title: experience.title,
              institution: experience.issued_by,
              b: (value) => <span data-c-font-weight="bold">{value}</span>,
            })}
          </p>
          <p
            data-c-margin="top(quarter) bottom(1)"
            data-c-colour="c1"
            data-c-font-size="small"
          >
            {intl.formatMessage(accordionMessages.awardSubheading, {
              date: readableDate(locale, experience.awarded_date),
            })}
          </p>
          {justification ? (
            <p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
              {justification}
            </p>
          ) : (
            <p
              data-c-margin="bottom(1) top(1)"
              data-c-border="all(thin, solid, stop)"
              data-c-padding="all(.5)"
              data-c-radius="rounded"
              data-c-background="stop(10)"
              data-c-color="stop"
            >
              <i
                className="fas fa-exclamation-circle"
                data-c-color="stop"
                data-c-margin="right(.25)"
              />
              {intl.formatMessage(skillAccordionMessages.justificationMissing)}
            </p>
          )}
          <div data-c-grid="gutter(all, 1)">
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.experienceTypeLabel)}
              </p>
              <p>
                <i
                  className="fas fa-trophy"
                  data-c-color="c1"
                  data-c-margin="right(.25)"
                />
                {intl.formatMessage(accordionMessages.awardType)}
              </p>
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.awardTitleLabel)}
              </p>
              {experience.title ? <p>{experience.title}</p> : notApplicable}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.awardRecipientLabel)}
              </p>
              {experience.award_recipient_type ? (
                <p>
                  {localizeFieldNonNull(
                    locale,
                    experience,
                    "award_recipient_type",
                  )}
                </p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.awardIssuerLabel)}
              </p>
              {experience.issued_by ? (
                <p>{experience.issued_by}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.awardScopeLabel)}
              </p>
              {experience.award_recipient_type ? (
                <p>
                  {localizeFieldNonNull(
                    locale,
                    experience,
                    "award_recipient_type",
                  )}
                </p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.awardDateLabel)}
              </p>
              {experience.awarded_date ? (
                <p>{readableDate(locale, experience.awarded_date)}</p>
              ) : (
                notApplicable
              )}
            </div>
          </div>
          <hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
        </>
      );
    case "experience_community":
      return (
        <>
          <p data-c-color="c2" data-c-margin="top(2)">
            {intl.formatMessage(accordionMessages.communityHeading, {
              title: experience.title,
              group: experience.group,
              b: (value) => <span data-c-font-weight="bold">{value}</span>,
            })}
          </p>
          {titleBarDateRange(
            experience.start_date,
            experience.end_date,
            experience.is_active,
            intl,
            locale,
          )}
          {justification ? (
            <p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
              {justification}
            </p>
          ) : (
            <p
              data-c-margin="bottom(1) top(1)"
              data-c-border="all(thin, solid, stop)"
              data-c-padding="all(.5)"
              data-c-radius="rounded"
              data-c-background="stop(10)"
              data-c-color="stop"
            >
              <i
                className="fas fa-exclamation-circle"
                data-c-color="stop"
                data-c-margin="right(.25)"
              />
              {intl.formatMessage(skillAccordionMessages.justificationMissing)}
            </p>
          )}
          <div data-c-grid="gutter(all, 1)">
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.experienceTypeLabel)}
              </p>
              <p>
                <i
                  className="fas fa-people-carry"
                  data-c-color="c1"
                  data-c-margin="right(.25)"
                />
                {intl.formatMessage(accordionMessages.communityType)}
              </p>
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.communityRoleLabel)}
              </p>
              {experience.title ? <p>{experience.title}</p> : notApplicable}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(
                  accordionMessages.communityOrganizationLabel,
                )}
              </p>
              {experience.group ? <p>{experience.group}</p> : notApplicable}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.communityProjectLabel)}
              </p>
              {experience.project ? <p>{experience.project}</p> : notApplicable}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.startDateLabel)}
              </p>
              {experience.start_date ? (
                <p>{readableDate(locale, experience.start_date)}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.endDateLabel)}
              </p>
              {experience.is_active ? (
                <p>{intl.formatMessage(accordionMessages.ongoing)}</p>
              ) : (
                endDateOrNa
              )}
            </div>
          </div>
          <hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
        </>
      );
    case "experience_education":
      return (
        <>
          <p data-c-color="c2" data-c-margin="top(2)">
            {intl.formatMessage(accordionMessages.educationHeading, {
              educationType: localizeFieldNonNull(
                locale,
                experience,
                "education_type",
              ),
              areaOfStudy: experience.area_of_study,
              institution: experience.institution,
              b: (value) => <span data-c-font-weight="bold">{value}</span>,
            })}
          </p>
          {titleBarDateRange(
            experience.start_date,
            experience.end_date,
            experience.is_active,
            intl,
            locale,
          )}
          {justification ? (
            <p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
              {justification}
            </p>
          ) : (
            <p
              data-c-margin="bottom(1) top(1)"
              data-c-border="all(thin, solid, stop)"
              data-c-padding="all(.5)"
              data-c-radius="rounded"
              data-c-background="stop(10)"
              data-c-color="stop"
            >
              <i
                className="fas fa-exclamation-circle"
                data-c-color="stop"
                data-c-margin="right(.25)"
              />
              {intl.formatMessage(skillAccordionMessages.justificationMissing)}
            </p>
          )}
          <div data-c-grid="gutter(all, 1)">
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.experienceTypeLabel)}
              </p>
              <p>
                <i
                  className="fas fa-book"
                  data-c-color="c1"
                  data-c-margin="right(.25)"
                />
                {intl.formatMessage(accordionMessages.educationType)}
              </p>
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.educationTypeLabel)}
              </p>
              {experience.education_type ? (
                <p>
                  {localizeFieldNonNull(locale, experience, "education_type")}
                </p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(
                  accordionMessages.educationAreaOfStudyLabel,
                )}
              </p>
              {experience.area_of_study ? (
                <p>{experience.area_of_study}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(
                  accordionMessages.educationInstitutionLabel,
                )}
              </p>
              {experience.institution ? (
                <p>{experience.institution}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.educationStatusLabel)}
              </p>
              {experience.education_status ? (
                <p>
                  {localizeFieldNonNull(locale, experience, "education_status")}
                </p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.startDateLabel)}
              </p>
              {experience.start_date ? (
                <p>{readableDate(locale, experience.start_date)}</p>
              ) : (
                { notApplicable }
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.endDateLabel)}
              </p>
              {experience.is_active ? (
                <p>{intl.formatMessage(accordionMessages.ongoing)}</p>
              ) : (
                endDateOrNa
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.educationThesisLabel)}
              </p>
              {experience.thesis_title ? (
                <p>{experience.thesis_title}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.educationBlockcertLabel)}
              </p>
              {experience.has_blockcert ? (
                <p>
                  {intl.formatMessage(accordionMessages.educationHasBlockcert)}
                </p>
              ) : (
                notApplicable
              )}
            </div>
          </div>
          <hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
        </>
      );
    case "experience_personal":
      return (
        <>
          <p data-c-color="c2" data-c-margin="top(2)">
            <span data-c-font-weight="bold">{experience.title}</span>
          </p>
          {titleBarDateRange(
            experience.start_date,
            experience.end_date,
            experience.is_active,
            intl,
            locale,
          )}
          {justification ? (
            <p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
              {justification}
            </p>
          ) : (
            <p
              data-c-margin="bottom(1) top(1)"
              data-c-border="all(thin, solid, stop)"
              data-c-padding="all(.5)"
              data-c-radius="rounded"
              data-c-background="stop(10)"
              data-c-color="stop"
            >
              <i
                className="fas fa-exclamation-circle"
                data-c-color="stop"
                data-c-margin="right(.25)"
              />
              {intl.formatMessage(skillAccordionMessages.justificationMissing)}
            </p>
          )}
          <div data-c-grid="gutter(all, 1)">
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.experienceTypeLabel)}
              </p>
              <p>
                <i
                  className="fas fa-mountain"
                  data-c-color="c1"
                  data-c-margin="right(.25)"
                />
                {intl.formatMessage(accordionMessages.personalType)}
              </p>
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.personalTitleLabel)}
              </p>
              {experience.title ? <p>{experience.title}</p> : notApplicable}
            </div>
            <div data-c-grid-item="base(1of1)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.personalDescriptionLabel)}
              </p>
              {experience.description ? (
                <p>{experience.description}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.personalShareLabel)}
              </p>
              {experience.is_shareable ? (
                <p>
                  <i
                    className="fas fa-check-circle"
                    data-c-color="go"
                    data-c-margin="right(.25)"
                  />
                  {intl.formatMessage(accordionMessages.personalShareAllowed)}
                </p>
              ) : (
                <p>
                  <i
                    className="fas fa-check-circle"
                    data-c-color="stop"
                    data-c-margin="right(.25)"
                  />
                  {intl.formatMessage(accordionMessages.personalShareDenied)}
                </p>
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.startDateLabel)}
              </p>
              {experience.start_date ? (
                <p>{readableDate(locale, experience.start_date)}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.endDateLabel)}
              </p>
              {experience.is_active ? (
                <p>{intl.formatMessage(accordionMessages.ongoing)}</p>
              ) : (
                endDateOrNa
              )}
            </div>
          </div>
          <hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
        </>
      );
    case "experience_work":
      return (
        <>
          <p data-c-color="c2" data-c-margin="top(2)">
            <span data-c-font-weight="bold">{experience.title}</span> -{" "}
            {experience.organization}
          </p>
          {titleBarDateRange(
            experience.start_date,
            experience.end_date,
            experience.is_active,
            intl,
            locale,
          )}
          {justification ? (
            <p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
              {justification}
            </p>
          ) : (
            <p
              data-c-margin="bottom(1) top(1)"
              data-c-border="all(thin, solid, stop)"
              data-c-padding="all(.5)"
              data-c-radius="rounded"
              data-c-background="stop(10)"
              data-c-color="stop"
            >
              <i
                className="fas fa-exclamation-circle"
                data-c-color="stop"
                data-c-margin="right(.25)"
              />
              {intl.formatMessage(skillAccordionMessages.justificationMissing)}
            </p>
          )}
          <div data-c-grid="gutter(all, 1)">
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.experienceTypeLabel)}
              </p>
              <p>
                <i
                  className="fas fa-briefcase"
                  data-c-color="c1"
                  data-c-margin="right(.25)"
                />
                {intl.formatMessage(accordionMessages.workType)}
              </p>
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.workRoleLabel)}
              </p>
              {experience.title ? <p>{experience.title}</p> : notApplicable}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.workOrganizationLabel)}
              </p>
              {experience.organization ? (
                <p>{experience.organization}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.workTeamLabel)}
              </p>
              {experience.group ? <p>{experience.group}</p> : notApplicable}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.startDateLabel)}
              </p>
              {experience.start_date ? (
                <p>{readableDate(locale, experience.start_date)}</p>
              ) : (
                notApplicable
              )}
            </div>
            <div data-c-grid-item="base(1of2) tl(1of3)">
              <p data-c-font-weight="bold">
                {intl.formatMessage(accordionMessages.endDateLabel)}
              </p>
              {experience.is_active && (
                <p>{intl.formatMessage(accordionMessages.ongoing)}</p>
              )}
              {!experience.is_active && experience.end_date ? (
                <p>{readableDate(locale, experience.end_date)}</p>
              ) : (
                notApplicable
              )}
            </div>
          </div>
          <hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
        </>
      );
    default:
      return null;
  }
};

interface SkillAccordionProps {
  skill: Skill;
  skillLevel: string;
  experiences: Experience[];
  experienceSkills: ExperienceSkill[];
}

const SkillAccordion: React.FC<SkillAccordionProps> = ({
  skill,
  skillLevel,
  experiences,
  experienceSkills,
}) => {
  const intl = useIntl();
  const locale = getLocale(intl.locale);
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div
      data-c-accordion=""
      data-c-background="white(100)"
      data-c-card=""
      data-c-margin="bottom(.5)"
      className={`${isExpanded && "active"}`}
    >
      <button
        aria-expanded={isExpanded}
        data-c-accordion-trigger=""
        tabIndex={0}
        type="button"
        onClick={(): void => {
          setIsExpanded(!isExpanded);
        }}
      >
        <div data-c-grid="">
          <div data-c-grid-item="base(1of1)">
            <div data-c-padding="all(1)">
              <div data-c-grid="middle">
                <div data-c-grid-item="tl(3of4)">
                  <p data-c-font-weight="bold" data-c-margin="left(1)">
                    {localizeFieldNonNull(locale, skill, "name")}
                  </p>
                </div>
                <div data-c-grid-item="tl(1of4)" data-c-align="base(left)">
                  <span>{skillLevel}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <span data-c-visibility="invisible">
          {intl.formatMessage(accordionMessages.expand)}
        </span>
        {isExpanded ? (
          <i
            aria-hidden="true"
            className="fas fa-angle-up"
            data-c-colour="black"
            data-c-accordion-remove
          />
        ) : (
          <i
            aria-hidden="true"
            className="fas fa-angle-down"
            data-c-colour="black"
            data-c-accordion-add
          />
        )}
      </button>
      <div
        aria-hidden="true"
        data-c-accordion-content=""
        data-c-background="gray(20)"
        data-c-padding="bottom(2)"
      >
        <hr data-c-hr="thin(gray)" />
        <div data-c-padding="lr(2)">
          {experiences.map((experience) => {
            const justification = getJustificationOfExperience(
              skill,
              experience,
              experienceSkills,
            );
            return (
              <ExperienceContent
                key={`${experience.type}=${experience.id}-skill`}
                intl={intl}
                locale={locale}
                experience={experience}
                justification={justification}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default SkillAccordion;


1			import React, { useState } from "react";
2			import { useIntl, IntlShape, defineMessages } from "react-intl";
3			import { Experience, Skill, ExperienceSkill } from "../../../models/types";
4			import { accordionMessages } from "../applicationMessages";
5			import { getJustificationOfExperience } from "../helpers";
6			import { readableDate } from "../../../helpers/dates";
7			import {
8			Locales,
9			localizeFieldNonNull,
10			getLocale,
11			} from "../../../helpers/localize";
12			import { titleBarDateRange } from "../ExperienceAccordions/BaseExperienceAccordion";
13
14			const skillAccordionMessages = defineMessages({
15			justificationMissing: {
16			id: "application.skillAccordion.justificationMissing",
17			defaultMessage:
18			"You haven't written an explanation of how you used this skill during this experience.",
19			description:
20			"Alert displayed when no justification has been added to an Experience.",
21			},
22			});
23
24			interface ExperienceContentProps {
25			intl: IntlShape;
26			locale: Locales;
27			experience: Experience;
28			justification: string \| null;
29			}
30
31			const ExperienceContent: React.FC<ExperienceContentProps> = ({
32			intl,
33			locale,
34			experience,
35			justification,
36			}) => {
37			const notApplicable = (
38			<p data-c-color="gray">
39			{intl.formatMessage(accordionMessages.notApplicable)}
40			</p>
41			);
42
43			let endDateOrNa;
44			if ("end_date" in experience) {
45			endDateOrNa = experience.end_date ? (
46			<p>{readableDate(locale, experience.end_date)}</p>
47			) : (
48			notApplicable
49			);
50			} else {
51			endDateOrNa = notApplicable;
52			}
53
54			switch (experience.type) {
55			case "experience_award":
56			return (
57			<>
58			<p data-c-color="c2" data-c-margin="top(2)">
59			{intl.formatMessage(accordionMessages.awardHeading, {
60			title: experience.title,
61			institution: experience.issued_by,
62			b: (value) => <span data-c-font-weight="bold">{value}</span>,
63			})}
64			</p>
65			<p
66			data-c-margin="top(quarter) bottom(1)"
67			data-c-colour="c1"
68			data-c-font-size="small"
69			>
70			{intl.formatMessage(accordionMessages.awardSubheading, {
71			date: readableDate(locale, experience.awarded_date),
72			})}
73			</p>
74			{justification ? (
75			<p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
76			{justification}
77			</p>
78			) : (
79			<p
80			data-c-margin="bottom(1) top(1)"
81			data-c-border="all(thin, solid, stop)"
82			data-c-padding="all(.5)"
83			data-c-radius="rounded"
84			data-c-background="stop(10)"
85			data-c-color="stop"
86			>
87			<i
88			className="fas fa-exclamation-circle"
89			data-c-color="stop"
90			data-c-margin="right(.25)"
91			/>
92			{intl.formatMessage(skillAccordionMessages.justificationMissing)}
93			</p>
94			)}
95			<div data-c-grid="gutter(all, 1)">
96			<div data-c-grid-item="base(1of2) tl(1of3)">
97			<p data-c-font-weight="bold">
98			{intl.formatMessage(accordionMessages.experienceTypeLabel)}
99			</p>
100			<p>
101			<i
102			className="fas fa-trophy"
103			data-c-color="c1"
104			data-c-margin="right(.25)"
105			/>
106			{intl.formatMessage(accordionMessages.awardType)}
107			</p>
108			</div>
109			<div data-c-grid-item="base(1of2) tl(1of3)">
110			<p data-c-font-weight="bold">
111			{intl.formatMessage(accordionMessages.awardTitleLabel)}
112			</p>
113			{experience.title ? <p>{experience.title}</p> : notApplicable}
114			</div>
115			<div data-c-grid-item="base(1of2) tl(1of3)">
116			<p data-c-font-weight="bold">
117			{intl.formatMessage(accordionMessages.awardRecipientLabel)}
118			</p>
119			{experience.award_recipient_type ? (
120			<p>
121			{localizeFieldNonNull(
122			locale,
123			experience,
124			"award_recipient_type",
125			)}
126			</p>
127			) : (
128			notApplicable
129			)}
130			</div>
131			<div data-c-grid-item="base(1of2) tl(1of3)">
132			<p data-c-font-weight="bold">
133			{intl.formatMessage(accordionMessages.awardIssuerLabel)}
134			</p>
135			{experience.issued_by ? (
136			<p>{experience.issued_by}</p>
137			) : (
138			notApplicable
139			)}
140			</div>
141			<div data-c-grid-item="base(1of2) tl(1of3)">
142			<p data-c-font-weight="bold">
143			{intl.formatMessage(accordionMessages.awardScopeLabel)}
144			</p>
145			{experience.award_recipient_type ? (
146			<p>
147			{localizeFieldNonNull(
148			locale,
149			experience,
150			"award_recipient_type",
151			)}
152			</p>
153			) : (
154			notApplicable
155			)}
156			</div>
157			<div data-c-grid-item="base(1of2) tl(1of3)">
158			<p data-c-font-weight="bold">
159			{intl.formatMessage(accordionMessages.awardDateLabel)}
160			</p>
161			{experience.awarded_date ? (
162			<p>{readableDate(locale, experience.awarded_date)}</p>
163			) : (
164			notApplicable
165			)}
166			</div>
167			</div>
168			<hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
169			</>
170			);
171			case "experience_community":
172			return (
173			<>
174			<p data-c-color="c2" data-c-margin="top(2)">
175			{intl.formatMessage(accordionMessages.communityHeading, {
176			title: experience.title,
177			group: experience.group,
178			b: (value) => <span data-c-font-weight="bold">{value}</span>,
179			})}
180			</p>
181			{titleBarDateRange(
182			experience.start_date,
183			experience.end_date,
184			experience.is_active,
185			intl,
186			locale,
187			)}
188			{justification ? (
189			<p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
190			{justification}
191			</p>
192			) : (
193			<p
194			data-c-margin="bottom(1) top(1)"
195			data-c-border="all(thin, solid, stop)"
196			data-c-padding="all(.5)"
197			data-c-radius="rounded"
198			data-c-background="stop(10)"
199			data-c-color="stop"
200			>
201			<i
202			className="fas fa-exclamation-circle"
203			data-c-color="stop"
204			data-c-margin="right(.25)"
205			/>
206			{intl.formatMessage(skillAccordionMessages.justificationMissing)}
207			</p>
208			)}
209			<div data-c-grid="gutter(all, 1)">
210			<div data-c-grid-item="base(1of2) tl(1of3)">
211			<p data-c-font-weight="bold">
212			{intl.formatMessage(accordionMessages.experienceTypeLabel)}
213			</p>
214			<p>
215			<i
216			className="fas fa-people-carry"
217			data-c-color="c1"
218			data-c-margin="right(.25)"
219			/>
220			{intl.formatMessage(accordionMessages.communityType)}
221			</p>
222			</div>
223			<div data-c-grid-item="base(1of2) tl(1of3)">
224			<p data-c-font-weight="bold">
225			{intl.formatMessage(accordionMessages.communityRoleLabel)}
226			</p>
227			{experience.title ? <p>{experience.title}</p> : notApplicable}
228			</div>
229			<div data-c-grid-item="base(1of2) tl(1of3)">
230			<p data-c-font-weight="bold">
231			{intl.formatMessage(
232			accordionMessages.communityOrganizationLabel,
233			)}
234			</p>
235			{experience.group ? <p>{experience.group}</p> : notApplicable}
236			</div>
237			<div data-c-grid-item="base(1of2) tl(1of3)">
238			<p data-c-font-weight="bold">
239			{intl.formatMessage(accordionMessages.communityProjectLabel)}
240			</p>
241			{experience.project ? <p>{experience.project}</p> : notApplicable}
242			</div>
243			<div data-c-grid-item="base(1of2) tl(1of3)">
244			<p data-c-font-weight="bold">
245			{intl.formatMessage(accordionMessages.startDateLabel)}
246			</p>
247			{experience.start_date ? (
248			<p>{readableDate(locale, experience.start_date)}</p>
249			) : (
250			notApplicable
251			)}
252			</div>
253			<div data-c-grid-item="base(1of2) tl(1of3)">
254			<p data-c-font-weight="bold">
255			{intl.formatMessage(accordionMessages.endDateLabel)}
256			</p>
257			{experience.is_active ? (
258			<p>{intl.formatMessage(accordionMessages.ongoing)}</p>
259			) : (
260			endDateOrNa
261			)}
262			</div>
263			</div>
264			<hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
265			</>
266			);
267			case "experience_education":
268			return (
269			<>
270			<p data-c-color="c2" data-c-margin="top(2)">
271			{intl.formatMessage(accordionMessages.educationHeading, {
272			educationType: localizeFieldNonNull(
273			locale,
274			experience,
275			"education_type",
276			),
277			areaOfStudy: experience.area_of_study,
278			institution: experience.institution,
279			b: (value) => <span data-c-font-weight="bold">{value}</span>,
280			})}
281			</p>
282			{titleBarDateRange(
283			experience.start_date,
284			experience.end_date,
285			experience.is_active,
286			intl,
287			locale,
288			)}
289			{justification ? (
290			<p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
291			{justification}
292			</p>
293			) : (
294			<p
295			data-c-margin="bottom(1) top(1)"
296			data-c-border="all(thin, solid, stop)"
297			data-c-padding="all(.5)"
298			data-c-radius="rounded"
299			data-c-background="stop(10)"
300			data-c-color="stop"
301			>
302			<i
303			className="fas fa-exclamation-circle"
304			data-c-color="stop"
305			data-c-margin="right(.25)"
306			/>
307			{intl.formatMessage(skillAccordionMessages.justificationMissing)}
308			</p>
309			)}
310			<div data-c-grid="gutter(all, 1)">
311			<div data-c-grid-item="base(1of2) tl(1of3)">
312			<p data-c-font-weight="bold">
313			{intl.formatMessage(accordionMessages.experienceTypeLabel)}
314			</p>
315			<p>
316			<i
317			className="fas fa-book"
318			data-c-color="c1"
319			data-c-margin="right(.25)"
320			/>
321			{intl.formatMessage(accordionMessages.educationType)}
322			</p>
323			</div>
324			<div data-c-grid-item="base(1of2) tl(1of3)">
325			<p data-c-font-weight="bold">
326			{intl.formatMessage(accordionMessages.educationTypeLabel)}
327			</p>
328			{experience.education_type ? (
329			<p>
330			{localizeFieldNonNull(locale, experience, "education_type")}
331			</p>
332			) : (
333			notApplicable
334			)}
335			</div>
336			<div data-c-grid-item="base(1of2) tl(1of3)">
337			<p data-c-font-weight="bold">
338			{intl.formatMessage(
339			accordionMessages.educationAreaOfStudyLabel,
340			)}
341			</p>
342			{experience.area_of_study ? (
343			<p>{experience.area_of_study}</p>
344			) : (
345			notApplicable
346			)}
347			</div>
348			<div data-c-grid-item="base(1of2) tl(1of3)">
349			<p data-c-font-weight="bold">
350			{intl.formatMessage(
351			accordionMessages.educationInstitutionLabel,
352			)}
353			</p>
354			{experience.institution ? (
355			<p>{experience.institution}</p>
356			) : (
357			notApplicable
358			)}
359			</div>
360			<div data-c-grid-item="base(1of2) tl(1of3)">
361			<p data-c-font-weight="bold">
362			{intl.formatMessage(accordionMessages.educationStatusLabel)}
363			</p>
364			{experience.education_status ? (
365			<p>
366			{localizeFieldNonNull(locale, experience, "education_status")}
367			</p>
368			) : (
369			notApplicable
370			)}
371			</div>
372			<div data-c-grid-item="base(1of2) tl(1of3)">
373			<p data-c-font-weight="bold">
374			{intl.formatMessage(accordionMessages.startDateLabel)}
375			</p>
376			{experience.start_date ? (
377			<p>{readableDate(locale, experience.start_date)}</p>
378			) : (
379			{ notApplicable }
380			)}
381			</div>
382			<div data-c-grid-item="base(1of2) tl(1of3)">
383			<p data-c-font-weight="bold">
384			{intl.formatMessage(accordionMessages.endDateLabel)}
385			</p>
386			{experience.is_active ? (
387			<p>{intl.formatMessage(accordionMessages.ongoing)}</p>
388			) : (
389			endDateOrNa
390			)}
391			</div>
392			<div data-c-grid-item="base(1of2) tl(1of3)">
393			<p data-c-font-weight="bold">
394			{intl.formatMessage(accordionMessages.educationThesisLabel)}
395			</p>
396			{experience.thesis_title ? (
397			<p>{experience.thesis_title}</p>
398			) : (
399			notApplicable
400			)}
401			</div>
402			<div data-c-grid-item="base(1of2) tl(1of3)">
403			<p data-c-font-weight="bold">
404			{intl.formatMessage(accordionMessages.educationBlockcertLabel)}
405			</p>
406			{experience.has_blockcert ? (
407			<p>
408			{intl.formatMessage(accordionMessages.educationHasBlockcert)}
409			</p>
410			) : (
411			notApplicable
412			)}
413			</div>
414			</div>
415			<hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
416			</>
417			);
418			case "experience_personal":
419			return (
420			<>
421			<p data-c-color="c2" data-c-margin="top(2)">
422			<span data-c-font-weight="bold">{experience.title}</span>
423			</p>
424			{titleBarDateRange(
425			experience.start_date,
426			experience.end_date,
427			experience.is_active,
428			intl,
429			locale,
430			)}
431			{justification ? (
432			<p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
433			{justification}
434			</p>
435			) : (
436			<p
437			data-c-margin="bottom(1) top(1)"
438			data-c-border="all(thin, solid, stop)"
439			data-c-padding="all(.5)"
440			data-c-radius="rounded"
441			data-c-background="stop(10)"
442			data-c-color="stop"
443			>
444			<i
445			className="fas fa-exclamation-circle"
446			data-c-color="stop"
447			data-c-margin="right(.25)"
448			/>
449			{intl.formatMessage(skillAccordionMessages.justificationMissing)}
450			</p>
451			)}
452			<div data-c-grid="gutter(all, 1)">
453			<div data-c-grid-item="base(1of2) tl(1of3)">
454			<p data-c-font-weight="bold">
455			{intl.formatMessage(accordionMessages.experienceTypeLabel)}
456			</p>
457			<p>
458			<i
459			className="fas fa-mountain"
460			data-c-color="c1"
461			data-c-margin="right(.25)"
462			/>
463			{intl.formatMessage(accordionMessages.personalType)}
464			</p>
465			</div>
466			<div data-c-grid-item="base(1of2) tl(1of3)">
467			<p data-c-font-weight="bold">
468			{intl.formatMessage(accordionMessages.personalTitleLabel)}
469			</p>
470			{experience.title ? <p>{experience.title}</p> : notApplicable}
471			</div>
472			<div data-c-grid-item="base(1of1)">
473			<p data-c-font-weight="bold">
474			{intl.formatMessage(accordionMessages.personalDescriptionLabel)}
475			</p>
476			{experience.description ? (
477			<p>{experience.description}</p>
478			) : (
479			notApplicable
480			)}
481			</div>
482			<div data-c-grid-item="base(1of2) tl(1of3)">
483			<p data-c-font-weight="bold">
484			{intl.formatMessage(accordionMessages.personalShareLabel)}
485			</p>
486			{experience.is_shareable ? (
487			<p>
488			<i
489			className="fas fa-check-circle"
490			data-c-color="go"
491			data-c-margin="right(.25)"
492			/>
493			{intl.formatMessage(accordionMessages.personalShareAllowed)}
494			</p>
495			) : (
496			<p>
497			<i
498			className="fas fa-check-circle"
499			data-c-color="stop"
500			data-c-margin="right(.25)"
501			/>
502			{intl.formatMessage(accordionMessages.personalShareDenied)}
503			</p>
504			)}
505			</div>
506			<div data-c-grid-item="base(1of2) tl(1of3)">
507			<p data-c-font-weight="bold">
508			{intl.formatMessage(accordionMessages.startDateLabel)}
509			</p>
510			{experience.start_date ? (
511			<p>{readableDate(locale, experience.start_date)}</p>
512			) : (
513			notApplicable
514			)}
515			</div>
516			<div data-c-grid-item="base(1of2) tl(1of3)">
517			<p data-c-font-weight="bold">
518			{intl.formatMessage(accordionMessages.endDateLabel)}
519			</p>
520			{experience.is_active ? (
521			<p>{intl.formatMessage(accordionMessages.ongoing)}</p>
522			) : (
523			endDateOrNa
524			)}
525			</div>
526			</div>
527			<hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
528			</>
529			);
530			case "experience_work":
531			return (
532			<>
533			<p data-c-color="c2" data-c-margin="top(2)">
534			<span data-c-font-weight="bold">{experience.title}</span> -{" "}
535			{experience.organization}
536			</p>
537			{titleBarDateRange(
538			experience.start_date,
539			experience.end_date,
540			experience.is_active,
541			intl,
542			locale,
543			)}
544			{justification ? (
545			<p data-c-font-style="italic" data-c-margin="bottom(1) top(1)">
546			{justification}
547			</p>
548			) : (
549			<p
550			data-c-margin="bottom(1) top(1)"
551			data-c-border="all(thin, solid, stop)"
552			data-c-padding="all(.5)"
553			data-c-radius="rounded"
554			data-c-background="stop(10)"
555			data-c-color="stop"
556			>
557			<i
558			className="fas fa-exclamation-circle"
559			data-c-color="stop"
560			data-c-margin="right(.25)"
561			/>
562			{intl.formatMessage(skillAccordionMessages.justificationMissing)}
563			</p>
564			)}
565			<div data-c-grid="gutter(all, 1)">
566			<div data-c-grid-item="base(1of2) tl(1of3)">
567			<p data-c-font-weight="bold">
568			{intl.formatMessage(accordionMessages.experienceTypeLabel)}
569			</p>
570			<p>
571			<i
572			className="fas fa-briefcase"
573			data-c-color="c1"
574			data-c-margin="right(.25)"
575			/>
576			{intl.formatMessage(accordionMessages.workType)}
577			</p>
578			</div>
579			<div data-c-grid-item="base(1of2) tl(1of3)">
580			<p data-c-font-weight="bold">
581			{intl.formatMessage(accordionMessages.workRoleLabel)}
582			</p>
583			{experience.title ? <p>{experience.title}</p> : notApplicable}
584			</div>
585			<div data-c-grid-item="base(1of2) tl(1of3)">
586			<p data-c-font-weight="bold">
587			{intl.formatMessage(accordionMessages.workOrganizationLabel)}
588			</p>
589			{experience.organization ? (
590			<p>{experience.organization}</p>
591			) : (
592			notApplicable
593			)}
594			</div>
595			<div data-c-grid-item="base(1of2) tl(1of3)">
596			<p data-c-font-weight="bold">
597			{intl.formatMessage(accordionMessages.workTeamLabel)}
598			</p>
599			{experience.group ? <p>{experience.group}</p> : notApplicable}
600			</div>
601			<div data-c-grid-item="base(1of2) tl(1of3)">
602			<p data-c-font-weight="bold">
603			{intl.formatMessage(accordionMessages.startDateLabel)}
604			</p>
605			{experience.start_date ? (
606			<p>{readableDate(locale, experience.start_date)}</p>
607			) : (
608			notApplicable
609			)}
610			</div>
611			<div data-c-grid-item="base(1of2) tl(1of3)">
612			<p data-c-font-weight="bold">
613			{intl.formatMessage(accordionMessages.endDateLabel)}
614			</p>
615			{experience.is_active && (
616			<p>{intl.formatMessage(accordionMessages.ongoing)}</p>
617			)}
618			{!experience.is_active && experience.end_date ? (
619			<p>{readableDate(locale, experience.end_date)}</p>
620			) : (
621			notApplicable
622			)}
623			</div>
624			</div>
625			<hr data-c-hr="thin(gray)" data-c-margin="top(2)" />
626			</>
627			);
628			default:
629			return null;
630			}
631			};
632
633			interface SkillAccordionProps {
634			skill: Skill;
635			skillLevel: string;
636			experiences: Experience[];
637			experienceSkills: ExperienceSkill[];
638			}
639
640			const SkillAccordion: React.FC<SkillAccordionProps> = ({
641			skill,
642			skillLevel,
643			experiences,
644			experienceSkills,
645			}) => {
646			const intl = useIntl();
647			const locale = getLocale(intl.locale);
648			const [isExpanded, setIsExpanded] = useState(false);
649
650			return (
651			<div
652			data-c-accordion=""
653			data-c-background="white(100)"
654			data-c-card=""
655			data-c-margin="bottom(.5)"
656			className={`${isExpanded && "active"}`}
657			>
658			<button
659			aria-expanded={isExpanded}
660			data-c-accordion-trigger=""
661			tabIndex={0}
662			type="button"
663			onClick={(): void => {
664			setIsExpanded(!isExpanded);
665			}}
666			>
667			<div data-c-grid="">
668			<div data-c-grid-item="base(1of1)">
669			<div data-c-padding="all(1)">
670			<div data-c-grid="middle">
671			<div data-c-grid-item="tl(3of4)">
672			<p data-c-font-weight="bold" data-c-margin="left(1)">
673			{localizeFieldNonNull(locale, skill, "name")}
674			</p>
675			</div>
676			<div data-c-grid-item="tl(1of4)" data-c-align="base(left)">
677			<span>{skillLevel}</span>
678			</div>
679			</div>
680			</div>
681			</div>
682			</div>
683			<span data-c-visibility="invisible">
684			{intl.formatMessage(accordionMessages.expand)}
685			</span>
686			{isExpanded ? (
687			<i
688			aria-hidden="true"
689			className="fas fa-angle-up"
690			data-c-colour="black"
691			data-c-accordion-remove
692			/>
693			) : (
694			<i
695			aria-hidden="true"
696			className="fas fa-angle-down"
697			data-c-colour="black"
698			data-c-accordion-add
699			/>
700			)}
701			</button>
702			<div
703			aria-hidden="true"
704			data-c-accordion-content=""
705			data-c-background="gray(20)"
706			data-c-padding="bottom(2)"
707			>
708			<hr data-c-hr="thin(gray)" />
709			<div data-c-padding="lr(2)">
710			{experiences.map((experience) => {
711			const justification = getJustificationOfExperience(
712			skill,
713			experience,
714			experienceSkills,
715			);
716			return (
717			<ExperienceContent
718			key={`${experience.type}=${experience.id}-skill`}
719			intl={intl}
720			locale={locale}
721			experience={experience}
722			justification={justification}
723			/>
724			);
725			})}
726			</div>
727			</div>
728			</div>
729			);
730			};
731
732			export default SkillAccordion;
733

GCTC-NTGC / TalentCloud

Push — feature/connect-application-st... ( fd5d08...3c62e3 )

resources/assets/js/components/Application/Review/SkillAccordion.tsx A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like