dns searching

components/dns/homepage/titleContent.js

@@ -1,75 +1,21 @@
-import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/router";
 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 dnsSites = [
-    { id: 1, name: "30MW Energy Plant - Wrexham" },
-    { id: 1, name: "Abertillery Wind Farm" },
-    { id: 1, name: "Alaw Mon Solar Farm" },
-    { id: 1, name: "Alwen Forest - Wind" },
-    { id: 1, name: "Blackberry Lane Solar Park" },
-    { id: 1, name: "Bretton Hall Solar Farm" },
-    { id: 1, name: "Brynllewelyn Farm - Renewable Energy Project" },
-    { id: 1, name: "Brynrhyd Solar Farm" },
-    { id: 1, name: "Brynwell Farm Renewable Energy Hub" },
-    { id: 1, name: "Buttington Quarry - ERF" },
-    { id: 1, name: "Coed Darcy - STOR" },
-    { id: 1, name: "Coity Road - STOR" },
-    { id: 1, name: "Craig Y Perchyll Solar" },
-    { id: 1, name: "Egnedol - Sustainable Energy" },
-    { id: 1, name: "Elwy Solar Energy" },
-    { id: 1, name: "Erebus - Floating Offshore Wind Demonstration Project" },
-    { id: 1, name: "Felindre Road - STOR" },
-    { id: 1, name: "Gaerwen Wind Farm" },
-    { id: 1, name: "Garn Fach Wind Farm" },
-    { id: 1, name: "Holyhead Harbour Revision Order" },
-    { id: 1, name: "Holyhead Marina Harbour Revision Order" },
-    { id: 1, name: "Holyhead Waterfront Regeneration Scheme HRO" },
-    { id: 1, name: "Legacy Substation Gas Peaking Plant" },
-    { id: 1, name: "Llantarnam - SToR" },
-    { id: 1, name: "Llanwern - Solar" },
-    { id: 1, name: "Lluest y Gwynt Wind Farm" },
-    { id: 1, name: "Llynfi Energy Recovery Facility" },
-    { id: 1, name: "Manmoel Wind Farm" },
-    { id: 1, name: "Môn Solar Farm" },
-    { id: 1, name: "Mor Hafren: Energy Recovery Facility" },
-    { id: 1, name: "Mynydd Carn-y-Cefn Wind Farm" },
-    { id: 1, name: "Mynydd Llanhilleth Wind Farm" },
-    { id: 1, name: "Pancross & Oaklands Solar Farm" },
-    { id: 1, name: "Parc Dyffryn Solar Park" },
-    { id: 1, name: "Parc Solar Traffwll" },
-    { id: 1, name: "Pen March Wind Farm" },
-    { id: 1, name: "Pen-y-Fan - Power Plant" },
-    { id: 1, name: "Pencaerlan Solar Farm" },
-    { id: 1, name: "Penderi Solar Farm" },
-    { id: 1, name: "Penpergwm Solar Farm" },
-    { id: 1, name: "Pentre Bach Solar Farm" },
-    { id: 1, name: "Plas Power Estate Solar Farm" },
-    { id: 1, name: "Project Valorous" },
-    { id: 1, name: "Rhoscrowther Wind Farm" },
-    { id: 1, name: "Rush Wall Solar Park Ltd" },
-    { id: 1, name: "Sudbrook - Peaking Gas" },
-    { id: 1, name: "TWA - Morlais Demonstration Zone" },
-    { id: 1, name: "Twyn Hywel Energy Park" },
-    { id: 1, name: "Tycroes Solar" },
-    { id: 1, name: "Upper Ogmore - Wind Turbines" },
-    { id: 1, name: "Valero - Cogeneration Facility" },
-    { id: 1, name: "Vattenfall - Renewable Energy" },
-    { id: 1, name: "Wauntysswg - Solar" },
-    { id: 1, name: "Wentlooge - renewable energy hub" },
-    { id: 1, name: "Y Bryn Wind Farm" },
-];
-
-const lowerCasedCompanies = dnsSites.map((company) => {
-    return {
-        id: company.id,
-        name: company.name,
-    };
-});
-
 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();
@@ -92,12 +38,11 @@ const TitleContent = (props) => {
             <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">
+            <div className="govuk-form-group govuk-!-margin-bottom-0 flex-container react-autosuggest">
                 <AutoSuggest
                     suggestions={suggestions}
                     onSuggestionsClearRequested={() => setSuggestions([])}
                     onSuggestionsFetchRequested={({ value }) => {
-                        console.log(value);
                         setValue(value);
                         setSuggestions(getSuggestions(value));
                     }}
@@ -120,8 +65,15 @@ const TitleContent = (props) => {
                     }}
                     highlightFirstSuggestion={true}
                 />
-                <Link href="/dns/application-view">
-                    <a className="govuk-button govuk-!-margin-bottom-0 govuk-!-margin-left-2">
+                <Link
+                    href={
+                        "/dns/" +
+                        (value.indexOf(" - ") > 0
+                            ? value.split(" - ")[1].split(" ").join("-")
+                            : "")
+                    }
+                >
+                    <a className="govuk-button govuk-!-margin-bottom-0 ">
                         {t("dnsHome:title-application-search-button")}
                     </a>
                 </Link>