M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Show No results instead of all cards when search failed

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-08-01 17:37:43 +08:00
parent 580dd1964c
commit ff56f369af
3 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
sass/css/_shop.scss
View File

@ -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%;

2
static/js/shop.bundle.js
View File

File diff suppressed because one or more lines are too long

9
static/js/shop/Catalog.jsx
View File

@ -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'}}>