Options

// Option.js

import { useContext } from "react";
import ExpandableField from "../../components/expandable-field";
import Spacer from "../../components/spacer";
import Explaination from "../../components/infoyear-explaination";
import Button from "../../components/button";
import Contact from "../../components/contact-information";
import InfoYear from "../../components/infoyear";

import { yearText, AAR_REGEX } from "../../utils/helpers";

import SearchContext from "../../components/search";

function Option({ option, className, setOption }) {
  const { search } = useContext(SearchContext);
  const {
    title,
    path,
    introtext,
    text,
    descriptionOfYears,
    totalYears,
    arrangementLink,
    customName,
    county,
  } = option;

  return (
    <ExpandableField
      label={title}
      className={className}
      desc="Opplæring i skole eller bedrift"
      option={setOption}
    >
      <p
        className="font-serif-text-regular"
        dangerouslySetInnerHTML={{ __html: introtext }}
      ></p>

      {customName ? (
        <p>
          I {county} kalles hovedmodellen for {customName}
        </p>
      ) : null}

      <Spacer large />

      <Explaination desc={descriptionOfYears} total={totalYears} />

      {path !== null ? (
        Object.entries(path)
          .filter(([key, value]) => {
            return AAR_REGEX.test(key);
          })
          .sort()
          .map(([key, type]) => {
            return (
              <InfoYear
                key={key.match(AAR_REGEX)[1]}
                type={type}
                title={yearText(key.match(AAR_REGEX)[1])}
                text="Opplæring i vidergående skole"
              />
            );
          })
      ) : (
        <></>
      )}

      <p
        className="font-serif-text-regular"
        dangerouslySetInnerHTML={{ __html: text }}
      ></p>

      <Spacer large />

      {arrangementLink ? (
        <Button
          onClick={() => window.open(arrangementLink)}
          target="_blank"
          rel="noopener noreferrer"
        >
          Les mer om ordningen
        </Button>
      ) : null}

      <Spacer />

      {/* Showing contact information based on selected county -  Info from Veier API*/}
      <Spacer large />
      <Contact county={search.choosenCounty} />
    </ExpandableField>
  );
}

export default Option;

// Options.js

import { useContext, useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";

import { getCertificates, searchCertificates } from "../../utils/certificates";

import SearchContext from "../../components/search";

import Option from "./Option";
import LoadingWrapper from "../../components/loading-wrapper";

/**
 * @param {array} exclude Array of strings. Options with name in this array shall be excluded
 * @returns {JSX.Element}
 * @constructor
 */
function Options({ exclude, startWithNumber, className }) {
  const { search } = useContext(SearchContext);

  function filterExclusions(options, exclude, startWithNumber) {
    if (!options) {
      return;
    }

    const regex = /^\d/;
    const result =
      exclude.length > 0
        ? options.filter((option) => {
            return !exclude.includes(option.title);
          })
        : options;

    return result
      .filter((item) =>
        startWithNumber ? regex.test(item.title) : !regex.test(item.title)
      )
      .sort((a, b) =>
        a.title.toLowerCase().localeCompare(b.title.toLowerCase())
      );
  }

  const { isLoading, data: certificates } = useQuery(["certificates"], () =>
    getCertificates()
  );

  return (
    <LoadingWrapper loading={isLoading}>
      {certificates &&
        filterExclusions(
          searchCertificates(certificates, search),
          exclude,
          startWithNumber
        ).map((item) => (
          <Option option={item} key={item.id} className={className} />
        ))}
    </LoadingWrapper>
  );
}

Options.defaultProps = {
  exclude: [],
};

export default Options;