import React from 'react'; import {Droppable} from "@hello-pangea/dnd"; import {useShopStore} from "./shop_store"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; import {CatalogGroups} from "./CatalogGroups"; import {SearchBar} from "./SearchBar"; import {CatalogSearchResult} from "./CatalogSearchResult"; import {GradientBottom} from "./GradientBottom"; /** * Component that renders the catalog in the aside */ export function Catalog() { // #!render_count const renderCount = useRenderCount(); const data = useShopStore((state) => state.groups); const items = useShopStore((state) => state.cards); const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu); const isMobile = useShopStore((state) => state.isMobile); const showSearch = useShopStore((state) => state.listed_cards.length > 0); // #!render_count console.log("Catalog renders: ", renderCount) return ( {(provided) => (
{isMobile ? (
) : null}
{showSearch ? : } {provided.placeholder && (
{provided.placeholder}
)}
)}
); }