robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added spinner to advanced search

Browse Source
This commit is contained in:
robbond
2021-09-23 15:14:20 +01:00
parent 90e8bf9856
commit fb27d72ed3
20 changed files with 409 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/homepage/casesearch.js
+60 -39
View File
@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import LoadingOverlay from "react-loading-overlay";
const required = (errorMsg) => (value) =>
value || typeof value === "number" ? undefined : errorMsg;
@@ -36,13 +37,11 @@ const RenderTextfield = ({
}
>
<div id="basicSearch-hint" className="govuk-hint ">
{hint1}
<span className="govuk-body-m">{hint1}</span>
<br />
<span className="govuk-body-s">
<span className="govuk-!-font-weight-bold">
{hint2}
</span>{" "}
CAS-00009-W8N6W4
{hint2} CAS-00009-W8N6W4
</span>
</div>
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
@@ -67,7 +66,16 @@ let CaseSearch = (props) => {
const router = useRouter();
const { locale } = router;
const [showSpinnerState, setShowSpinnerState] = useState(false);
let spinnerState = () => {
showSpinnerState == true
? setShowSpinnerState(false)
: setShowSpinnerState(true);
};
const onHandleSubmit = (values) => {
spinnerState();
router.replace({
pathname: "/searchresults",
query: { q: values.basicSearch },
@@ -76,43 +84,56 @@ let CaseSearch = (props) => {
};
return (
<div className="card" id="casesearch-card">
<form onSubmit={handleSubmit(onHandleSubmit)}>
<div className="card-body">
<h3 className="heading-small card-heading">
{t("home:casesearch-card-title")}
</h3>
<>
<div className="card" id="casesearch-card">
<form onSubmit={handleSubmit(onHandleSubmit)}>
<div className="card-body">
<h3 className="heading-small card-heading">
{t("home:casesearch-card-title")}
</h3>
<Field
validate={[
required(
t("home:casesearch-search-validation-required")
),
minLength(
t("home:casesearch-search-validation-minlength")
),
]}
className="govuk-input"
component={RenderTextfield}
id="basicSearch"
name="basicSearch"
type="text"
aria-describedby="basicSearch-hint"
hint1={t("home:casesearch-card-search-hint")}
hint2={t("home:casesearch-card-search-example-label")}
/>
<Field
validate={[
required(
t(
"home:casesearch-search-validation-required"
)
),
minLength(
t(
"home:casesearch-search-validation-minlength"
)
),
]}
className="govuk-input"
component={RenderTextfield}
id="basicSearch"
name="basicSearch"
type="text"
aria-describedby="basicSearch-hint"
hint1={t("home:casesearch-card-search-hint")}
hint2={t(
"home:casesearch-card-search-example-label"
)}
/>
<div className="govuk-form-group">
<button type="submit" className="govuk-button">
{t("home:casesearch-card-button")}
</button>
<div className="govuk-form-group">
<button type="submit" className="govuk-button">
{t("home:casesearch-card-button")}
</button>
</div>
<Link href="/advancedsearch">
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link>
</div>
<Link href="/advancedsearch">
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link>
</div>
</form>
</div>
</form>
<LoadingOverlay
active={showSpinnerState}
spinner
text={t("common:spinner-searching")}
/>
</div>
</>
);
};