Skip to content

Commit

Permalink
Fixes React controlled component error. Adds new "No results" content.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gdbarnes
gdbarnes committed Dec 17, 2024
1 parent 6ba0929 commit 8f0060d
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 54 deletions.
59 changes: 26 additions & 33 deletions app/search/templates/django-fbr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,39 +279,32 @@ <h2 class="govuk-heading-m">
{% endif %}
{% else %}
{% if form.is_bound %}
<h2 class="govuk-heading-l">There are no matching results</h2>
<p class="govuk-body-m">
Improve your search results by:
</p>
<ul class="govuk-list govuk-list--bullet">
<li class="govuk-body-m">
removing filters
</li>
<li class="govuk-body-m">
double-checking your spelling
</li>
<li class="govuk-body-m">
using fewer keywords
</li>
<li class="govuk-body-m">
searching for something less specific
</li>
</ul>
<h3 class="govuk-heading-m">Related searches</h3>
<p class="govuk-body">
Try these related search terms.
</p>
<ul class="govuk-list">
<li class="govuk-body">
<a class="govuk-link" href="/?search=construction+site+safety">construction site safety</a>
</li>
<li class="govuk-body">
<a class="govuk-link" href="/?search=building+site+safety">building site safety</a>
</li>
<li class="govuk-body">
<a class="govuk-link" href="/?search=aggregate+use">aggregate use</a>
</li>
</ul>
<h2 class="govuk-heading-l">There are no matching results</h2>
<p class="govuk-body-m">Improve your results by:</p>
<ul class="govuk-list govuk-list--bullet">
<li class="govuk-body-m">removing filters</li>
<li class="govuk-body-m">double-checking your spelling</li>
<li class="govuk-body-m">using fewer keywords</li>
<li class="govuk-body-m">searching for something less specific</li>
</ul>

<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">Help with searching</span>
</summary>
<div class="govuk-details__text">
<p class="govuk-body">You can use:</p>
<ul class="govuk-list govuk-list--bullet">
<li class="govuk-body-m">quotes for results that include a phrase. For example, "health and safety"</li>
<li class="govuk-body-m">
commas to see results that include any of your keywords. For example, lifting, equipment, machinery
</li>
<li class="govuk-body-m">
+ with no spaces to see results that include all your keywords. For example, asbestos+handling
</li>
</ul>
</div>
</details>
{% endif %}
{% endif %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion react_front_end/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function App() {
const [sortQuery, setSortQuery] = useQueryParams("sort", ["recent"])
const [pageQuery, setPageQuery] = useQueryParams("page", [1])

const [searchInput, setSearchInput] = useState(searchQuery[0]) // Set initial state to query parameter value
const [searchInput, setSearchInput] = useState(searchQuery[0] || "") // Set initial state to query parameter value
const [data, setData] = useState([])
const [isLoading, setIsLoading] = useState(true)
const [isSearchSubmitted, setIsSearchSubmitted] = useState(false)
Expand Down
39 changes: 19 additions & 20 deletions react_front_end/src/components/NoResultsContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,31 @@ function NoResultsContent() {
return (
<>
<h2 className="govuk-heading-l">There are no matching results</h2>
<p className="govuk-body-m">Improve your search results by:</p>
<p className="govuk-body-m">Improve your results by:</p>
<ul className="govuk-list govuk-list--bullet">
<li className="govuk-body-m">removing filters</li>
<li className="govuk-body-m">double-checking your spelling</li>
<li className="govuk-body-m">using fewer keywords</li>
<li className="govuk-body-m">searching for something less specific</li>
</ul>
<h3 className="govuk-heading-m">Related searches</h3>
<p className="govuk-body">Try these related search terms.</p>
<ul className="govuk-list">
<li className="govuk-body">
<a className="govuk-link" href="/?search=construction+site+safety">
construction site safety
</a>
</li>
<li className="govuk-body">
<a className="govuk-link" href="/?search=building+site+safety">
building site safety
</a>
</li>
<li className="govuk-body">
<a className="govuk-link" href="/?search=aggregate+use">
aggregate use
</a>
</li>
</ul>

<details className="govuk-details">
<summary className="govuk-details__summary">
<span className="govuk-details__summary-text">Help with searching</span>
</summary>
<div className="govuk-details__text">
<p className="govuk-body">You can use:</p>
<ul className="govuk-list govuk-list--bullet">
<li className="govuk-body-m">quotes for results that include a phrase. For example, "health and safety"</li>
<li className="govuk-body-m">
commas to see results that include any of your keywords. For example, lifting, equipment, machinery
</li>
<li className="govuk-body-m">
+ with no spaces to see results that include all your keywords. For example, asbestos+handling
</li>
</ul>
</div>
</details>
</>
)
}
Expand Down

0 comments on commit 8f0060d

Please sign in to comment.