From 27a5c0da2977748e90d4486af8a24aa60d60a32d Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Wed, 11 Aug 2021 14:28:51 +0100 Subject: [PATCH] added autocomplete search --- components/dns/homepage/titleContent.js | 120 +++++++++++++++++++++--- package.json | 5 +- pages/_error.js | 48 ++++++++-- pages/dns/contact-us.js | 20 ++-- pages/dns/index.js | 34 ++++--- store/store.js | 2 +- styles/sass/welshgov/_application.scss | 68 ++++++++++++++ 7 files changed, 249 insertions(+), 48 deletions(-) diff --git a/components/dns/homepage/titleContent.js b/components/dns/homepage/titleContent.js index 5950efad..5c1a3086 100644 --- a/components/dns/homepage/titleContent.js +++ b/components/dns/homepage/titleContent.js @@ -1,12 +1,89 @@ import Link from "next/link"; +import { useState } from "react"; import { useRouter } from "next/router"; import useTranslation from "next-translate/useTranslation"; +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) => { 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 (

@@ -21,20 +98,37 @@ const TitleContent = (props) => { Planning Inspectorate.

-
- + setSuggestions([])} + onSuggestionsFetchRequested={({ value }) => { + console.log(value); + setValue(value); + setSuggestions(getSuggestions(value)); + }} + onSuggestionSelected={(_, { suggestionValue }) => + console.log("Selected: " + suggestionValue) + } + getSuggestionValue={(suggestion) => suggestion.name} + renderSuggestion={(suggestion) => ( + {suggestion.name} + )} + inputProps={{ + className: "govuk-input govuk-!-font-size-16", + placeholder: "Search application name", + value: value, + onChange: (_, { newValue, method }) => { + setValue(newValue); + }, + }} + highlightFirstSuggestion={true} /> - + + + Go + +
); diff --git a/package.json b/package.json index 74e63f1d..8cba5ebe 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "pm2": "^5.1.0", "react": "17.0.2", "react-accessible-accordion": "^3.3.5", + "react-autosuggest": "^10.1.0", "react-cookie-consent": "^6.2.4", "react-datepicker": "^4.1.1", "react-dom": "17.0.2", @@ -40,7 +41,7 @@ "redux-form": "^8.3.7", "redux-persist": "^6.0.0", "redux-thunk": "^2.3.0", - "sass": "^1.35.1", + "sass": "1.32", "sass-loader": "^12.1.0", "swr": "^0.5.6", "webpack": "^5.40.0", @@ -54,4 +55,4 @@ "eslint-config-next": "^11.0.1", "prettier": "2.3.2" } -} +} \ No newline at end of file diff --git a/pages/_error.js b/pages/_error.js index 8e16f147..23377c1d 100644 --- a/pages/_error.js +++ b/pages/_error.js @@ -1,11 +1,45 @@ -function Error({ statusCode }) { +import Link from "next/link"; +import Head from "next/head"; +import Header from "../components/header"; +import Banner from "../components/banner"; +import CookieBanner from "../components/cookieBanner"; +import useTranslation from "next-translate/useTranslation"; +import Footer from "../components/footer"; + +function Error({ statusCode }, props) { + let { t, lang } = useTranslation(); + const { footerLinks, pages } = props; + return ( -

- An error.... - {statusCode - ? `An error ${statusCode} occurred on server` - : "An error occurred on client"} -

+
+ + + {t("case:page-title")} - {t("common:service-name")} + + +
+ +
+
+
+
+
+

Error

+

+ {statusCode + ? `An error ${statusCode} occurred on server` + : "An error occurred on the client"} +

+ + Go back home + +
+
+
+
+
+
+
); } diff --git a/pages/dns/contact-us.js b/pages/dns/contact-us.js index 0873ca97..ea49973c 100644 --- a/pages/dns/contact-us.js +++ b/pages/dns/contact-us.js @@ -45,7 +45,7 @@ const Home = (props) => { We are located in The Welsh Government Building, Cathays Park in Cardiff

-

+

{" "} The Planning Inspectorate
@@ -57,7 +57,7 @@ const Home = (props) => {

-
+