forked from M-Labs/web2019
Show No results instead of all cards when search failed
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
580dd1964c
commit
ff56f369af
|
@ -186,6 +186,13 @@ button {
|
||||||
.catalog-container {
|
.catalog-container {
|
||||||
padding-bottom: 4rem;
|
padding-bottom: 4rem;
|
||||||
|
|
||||||
|
.no-results {
|
||||||
|
color: rgba(255, 255, 255, 0.58);
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0rem 1.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.catalog-bar {
|
.catalog-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -20,7 +20,8 @@ export function Catalog() {
|
||||||
|
|
||||||
const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
|
const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
|
||||||
const isMobile = useShopStore((state) => state.isMobile);
|
const isMobile = useShopStore((state) => state.isMobile);
|
||||||
const showSearch = useShopStore((state) => state.listed_cards.length > 0);
|
const showSearch = useShopStore((state) => state.listed_cards.length > 0 && state.search_bar_value.length > 0);
|
||||||
|
const noResults = useShopStore((state) => state.listed_cards.length === 0 && state.search_bar_value.length > 0);
|
||||||
|
|
||||||
// #!render_count
|
// #!render_count
|
||||||
console.log("Catalog renders: ", renderCount)
|
console.log("Catalog renders: ", renderCount)
|
||||||
|
@ -36,8 +37,6 @@ export function Catalog() {
|
||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
{...provided.droppableProps}>
|
{...provided.droppableProps}>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="catalog-bar">
|
<div className="catalog-bar">
|
||||||
<SearchBar/>
|
<SearchBar/>
|
||||||
|
|
||||||
|
@ -50,7 +49,9 @@ export function Catalog() {
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showSearch ? <CatalogSearchResult/> : <CatalogGroups/>}
|
{(showSearch && <CatalogSearchResult/>) ||
|
||||||
|
(noResults && <p className="no-results">No results</p>) ||
|
||||||
|
<CatalogGroups/>}
|
||||||
|
|
||||||
{provided.placeholder && (
|
{provided.placeholder && (
|
||||||
<div style={{display: 'none'}}>
|
<div style={{display: 'none'}}>
|
||||||
|
|
Loading…
Reference in New Issue