resources/assets/js/components/Application/Review/SkillAccordion.tsx - Code Metrics - Inspection of "Ensure no discrepancy betwen skill count and liste..." - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — task/update-profile-experience ( e72667...f713e4 )

by Tristan

created 2021-02-04 16:33 UTC

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

↳ Parent: Project

Complexity

Total Complexity	37
Complexity/F	0

Size

Lines of Code	757
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	37
eloc	656
dl	0
loc	757
rs	9.384
c	0
b	0
f	0
mnd	37
bc	37
fnc	0
bpm	0
cpm	0
noi	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/ExperienceAccordionCommon";

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.",
  },
  experiencesMissing: {
    id: "application.skillAccordion.experiencesMissing",
    defaultMessage: "You haven't attached any experiences to this skill.",
    description:
      "Alert displayed when no Experiences have been added to a particular Skill.",
  },
});

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

GCTC-NTGC / TalentCloud

Push — task/update-profile-experience ( e72667...f713e4 )

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

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like