Options
unknown
javascript
a year ago
4.0 kB
2
Indexable
Never
// 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;