86 lines
3.0 KiB
JavaScript
86 lines
3.0 KiB
JavaScript
import useTranslation from "next-translate/useTranslation";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { useState } from "react";
|
|
import AutoSuggest from "react-autosuggest";
|
|
|
|
const TitleContent = (props) => {
|
|
const { dnsList } = props;
|
|
|
|
const dnsSites = dnsList.value;
|
|
|
|
const lowerCasedCompanies = dnsSites.map((company) => {
|
|
return {
|
|
id: company.ticketnumber,
|
|
name: company.title,
|
|
};
|
|
});
|
|
|
|
let { t } = useTranslation();
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const [value, setValue] = useState("");
|
|
const [suggestions, setSuggestions] = useState([]);
|
|
|
|
function getSuggestions(value) {
|
|
return lowerCasedCompanies.filter((company) =>
|
|
company.name.toLowerCase().includes(value.trim().toLowerCase())
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="govuk-panel govuk-grid-column-two-thirds govuk-panel--header">
|
|
<h1 className="govuk-panel__title">
|
|
{t("dnsCommon:service-name")}
|
|
</h1>
|
|
<div className="govuk-panel__body">
|
|
<p className="govuk-body-s">{t("dnsHome:title-paragraph")}</p>
|
|
</div>
|
|
<div className="govuk-form-group govuk-!-margin-bottom-0 flex-container react-autosuggest">
|
|
<AutoSuggest
|
|
suggestions={suggestions}
|
|
onSuggestionsClearRequested={() => setSuggestions([])}
|
|
onSuggestionsFetchRequested={({ value }) => {
|
|
setValue(value);
|
|
setSuggestions(getSuggestions(value));
|
|
}}
|
|
onSuggestionSelected={(_, { suggestionValue }) =>
|
|
console.log("Selected: " + suggestionValue)
|
|
}
|
|
getSuggestionValue={(suggestion) => suggestion.name}
|
|
renderSuggestion={(suggestion) => (
|
|
<span>{suggestion.name}</span>
|
|
)}
|
|
inputProps={{
|
|
className: "govuk-input govuk-!-font-size-16",
|
|
placeholder: t(
|
|
"dnsHome:title-application-search-placeholder"
|
|
),
|
|
value: value,
|
|
onChange: (_, { newValue, method }) => {
|
|
setValue(newValue);
|
|
},
|
|
}}
|
|
highlightFirstSuggestion={true}
|
|
/>
|
|
<Link
|
|
href={
|
|
"/dns/" +
|
|
(value.indexOf(" - ") > 0
|
|
? value.split(" - ")[1].split(" ").join("-")
|
|
: value)
|
|
}
|
|
className="govuk-button govuk-!-margin-bottom-0 ">
|
|
|
|
{t("dnsHome:title-application-search-button")}
|
|
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TitleContent;
|