import React from 'react'; import {Droppable} from "@hello-pangea/dnd"; import {ProductItem} from "./ProductItem"; import {useShopStore} from "./shop_store"; /** * Component that renders the backlog in the aside */ export function Backlog() { const { data, items, onClickToggleMobileSideMenu, isMobile, } = useShopStore(state=> ({ data: state.groups, items: state.cards, onClickToggleMobileSideMenu: state.switchSideMenu, isMobile: state.isMobile })); 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}
)}
)}
); }