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 #146

Merged
sb10q merged 1 commits from esavkin/web2019:144-no-results into master 2024-08-02 15:50:54 +08:00
Conversation 0 Commits 1 Files Changed 3 +13 -5
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 {
padding-bottom: 4rem;
.no-results {
color: rgba(255, 255, 255, 0.58);
display: inline-block;
padding: 0rem 1.5rem;
font-size: 1rem;
}
.catalog-bar {
display: flex;
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 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
console.log("Catalog renders: ", renderCount)
@ -36,8 +37,6 @@ export function Catalog() {
ref={provided.innerRef}
{...provided.droppableProps}>
<div className="catalog-bar">
<SearchBar/>
@ -50,7 +49,9 @@ export function Catalog() {
) : null}
</div>
{showSearch ? <CatalogSearchResult/> : <CatalogGroups/>}
{(showSearch && <CatalogSearchResult/>) ||
(noResults && <p className="no-results">No results</p>) ||
<CatalogGroups/>}
{provided.placeholder && (
<div style={{display: 'none'}}>