import React from 'react'; import {Droppable} from "@hello-pangea/dnd"; import {ProductItem} from "./ProductItem"; import {useShopStore} from "./shop_store"; import {useRenderCount} from "@uidotdev/usehooks"; /** * Component that renders the backlog in the aside */ export function Backlog() { 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); console.log("Backlog renders: ", renderCount) const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name, items: groupItem.itemIds.map(itemId => items[itemId]) })); let item_index = -1; const groups = ordered_groups.map((group, g_index) => { return (

{group.items.map(item => { item_index++; return ( ) })}
); } ); return ( {(provided) => (
{isMobile ? (
) : null}
{groups}
{provided.placeholder && (
{provided.placeholder}
)}
)}
); }