added autocomplete search

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 (
         <div className="govuk-panel govuk-grid-column-two-thirds govuk-panel--header">
             <h1 className="govuk-panel__title">
@@ -21,20 +98,37 @@ const TitleContent = (props) => {
                     Planning Inspectorate.
                 </p>
             </div>
-            <div className="govuk-form-group govuk-!-margin-bottom-0">
+            <div className="govuk-form-group govuk-!-margin-bottom-0 flex-container">
-                <input
+                <AutoSuggest
-                    className="govuk-input govuk-!-width-one-half"
+                    suggestions={suggestions}
-                    id="one-third"
+                    onSuggestionsClearRequested={() => setSuggestions([])}
-                    name="one-third"
+                    onSuggestionsFetchRequested={({ value }) => {
-                    type="text"
+                        console.log(value);
-                    placeholder="Search application name"
+                        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: "Search application name",
+                        value: value,
+                        onChange: (_, { newValue, method }) => {
+                            setValue(newValue);
+                        },
+                    }}
+                    highlightFirstSuggestion={true}
                 />
-                <button
+                <Link href="/dns/application-view">
-                    className="govuk-button govuk-!-margin-bottom-0"
+                    <a className="govuk-button govuk-!-margin-bottom-0 govuk-!-margin-left-2">
-                    data-module="govuk-button"
+                        Go
-                >
+                    </a>
-                    Search
+                </Link>
-                </button>
             </div>
         </div>
     );

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"
   }
-}
+}

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 (
-        <p>
+        <div>
-            An error....
+            <Head>
-            {statusCode
+                <title>
-                ? `An error ${statusCode} occurred on server`
+                    {t("case:page-title")} - {t("common:service-name")}
-                : "An error occurred on client"}
+                </title>
-        </p>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container govuk-!-padding-bottom-9">
+                    <main className="govuk-main-wrapper govuk-!-padding-top-9 govuk-!-padding-bottom-9">
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds ">
+                                <h1>Error</h1>
+                                <p className="govuk-body">
+                                    {statusCode
+                                        ? `An error ${statusCode} occurred on server`
+                                        : "An error occurred on the client"}
+                                </p>
+                                <Link href="/">
+                                    <a>Go back home</a>
+                                </Link>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
     );
 }
 

pages/dns/contact-us.js

@@ -45,7 +45,7 @@ const Home = (props) => {
                                     We are located in The Welsh Government
                                     Building, Cathays Park in Cardiff
                                 </p>
-                                <p>
+                                <p className="govuk-body">
                                     {" "}
                                     The Planning Inspectorate
                                     <br />
@@ -57,7 +57,7 @@ const Home = (props) => {
                                 </p>
                             </div>
                         </div>
-                        <div className="govuk-row">
+                        <div className="govuk-row govuk-!-margin-bottom-6">
                             <div className="map-responsive">
                                 <iframe
                                     width="600"
@@ -72,13 +72,13 @@ const Home = (props) => {
                             </div>
                         </div>
                         <div className="govuk-row">
-                            <p>
+                            <p className="govuk-body">
                                 {" "}
                                 If you are contacting us regarding a Development
                                 of National Significance, please use the
                                 following details:
                             </p>
-                            <p>
+                            <p className="govuk-body">
                                 Tel: <a href="tel:03034445940">03034 445 940</a>
                                 <br />
                                 E-mail:{" "}
@@ -91,12 +91,12 @@ const Home = (props) => {
                                     @PINSgov
                                 </a>
                             </p>
-                            <p>
+                            <p className="govuk-body">
                                 Further information about contacting the
                                 Planning Inspectorate customer services can be
                                 viewed on GOV.Wales.
                             </p>
-                            <p>
+                            <p className="govuk-body">
                                 The Planning Inspectorate gives advice about
                                 applying for a Development of National
                                 Significance or making representations about an
@@ -110,7 +110,7 @@ const Home = (props) => {
                                 the information any longer than is necessary.
                                 See our Privacy notice on GOV.UK.
                             </p>
-                            <p>
+                            <p className="govuk-body">
                                 You should note that we have a policy commitment
                                 to openness and transparency and you should not
                                 provide us with confidential or commercial
@@ -118,7 +118,7 @@ const Home = (props) => {
                                 the public domain.
                             </p>
                             <h3>Feedback and complaints</h3>
-                            <p>
+                            <p className="govuk-body">
                                 The Planning Inspectorate aims to provide the
                                 best possible service for its customers. We try
                                 hard to ensure that everyone is satisfied with
@@ -130,11 +130,11 @@ const Home = (props) => {
                                 contact details are on GOV.Wales.
                             </p>
                             <h3>Press and media</h3>
-                            <p>
+                            <p className="govuk-body">
                                 If you are a journalist please contact our press
                                 office directly:{" "}
                             </p>
-                            <p>
+                            <p className="govuk-body">
                                 Telephone:{" "}
                                 <a href="tel:03034445004">0303 444 5004</a> or{" "}
                                 <a href="tel:03034445005">0303 444 5005</a>{" "}

pages/dns/index.js

@@ -20,23 +20,27 @@ const Home = (props) => {
 
     const router = useRouter();
     const { locale } = router;
-
+    try {
-    return (
+        return (
-        <div>
+            <div>
-            <Head>
+                <Head>
-                <title>Developments of National Significance</title>
+                    <title>Developments of National Significance</title>
-            </Head>
+                </Head>
-            <div id="page_wrapper">
+                <div id="page_wrapper">
-                <CookieBanner />
+                    <CookieBanner />
-                <Header serviceName="Developments of National Significance" />
+                    <Header serviceName="Developments of National Significance" />
-                <div className="govuk-width-container">
+                    <div className="govuk-width-container">
-                    <Banner />
+                        <Banner />
-                    <Main />
+                        <Main />
+                    </div>
+                    <Footer footerLinks={footerLinks} />
                 </div>
-                <Footer footerLinks={footerLinks} />
             </div>
-        </div>
+        );
-    );
+    } catch (e) {
+        console.log(e);
+        return <h1>oooops</h1>;
+    }
 };
 
 export default Home; //connect(mapStateToProps)(Home);

store/store.js

@@ -103,7 +103,7 @@ const makeStore = ({ isServer }) => {
         const storage = require("redux-persist/lib/storage").default;
 
         const persistConfig = {
-            key: "acp",
+            key: "acp_" + Math.floor(100000 + Math.random() * 900000),
             whitelist: [
                 "currentView",
                 "search",

styles/sass/welshgov/_application.scss

@@ -1039,3 +1039,71 @@ ul#sharePageLinks.active {
         color: #333;
     }
 }
+
+// dns autocomplete search
+
+.react-autosuggest__container {
+    position: relative;
+    width: 50%;
+}
+
+.react-autosuggest__input {
+    width: 100%;
+    height: 36px;
+    padding: 10px;
+    border: 1px solid lightgray;
+    border-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    font-size: 0.875rem;
+}
+
+.react-autosuggest__input--focused {
+    outline: none;
+}
+
+.react-autosuggest__input--open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.react-autosuggest__suggestions-container {
+    display: none;
+}
+
+.react-autosuggest__suggestions-container--open {
+    display: block;
+    position: absolute;
+    top: 40px;
+    width: auto;
+    min-width: 160px;
+    margin-left: 1px;
+    background-color: #ffffff;
+    border-radius: 0 0 5px 5px;
+    z-index: 20;
+    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+    background-clip: padding-box;
+    border: 1px solid black;
+    border-top: none;
+    font-size: 0.875rem;
+    max-height: 400px;
+    overflow-y: scroll;
+}
+
+.react-autosuggest__suggestions-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.react-autosuggest__suggestion {
+    cursor: pointer;
+    padding: 10px 20px;
+    color: #333;
+    border-bottom: 1px solid #c3c3c3;
+}
+
+.react-autosuggest__suggestion--highlighted {
+    background-color: #c3c3c3;
+}