2023-12-11 17:05:35 +08:00
|
|
|
import React from 'react';
|
2023-12-01 11:52:37 +08:00
|
|
|
import {Droppable} from "@hello-pangea/dnd";
|
2023-12-11 17:05:35 +08:00
|
|
|
import {useShopStore} from "./shop_store";
|
2023-12-14 16:29:32 +08:00
|
|
|
// #!render_count
|
2023-12-14 16:09:33 +08:00
|
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
2024-02-22 17:26:07 +08:00
|
|
|
import {BacklogGroups} from "./BacklogGroups";
|
|
|
|
import {SearchBar} from "./SearchBar";
|
|
|
|
import {BacklogSearchResult} from "./BacklogSearchResult";
|
2023-11-30 17:26:17 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Component that renders the backlog in the aside
|
|
|
|
*/
|
2023-12-11 17:05:35 +08:00
|
|
|
export function Backlog() {
|
2023-12-14 16:29:32 +08:00
|
|
|
// #!render_count
|
2023-12-14 16:09:33 +08:00
|
|
|
const renderCount = useRenderCount();
|
2023-12-14 16:29:32 +08:00
|
|
|
|
2023-12-14 16:09:33 +08:00
|
|
|
const data = useShopStore((state) => state.groups);
|
|
|
|
const items = useShopStore((state) => state.cards);
|
2024-02-22 17:26:07 +08:00
|
|
|
|
2023-12-14 16:09:33 +08:00
|
|
|
const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
|
|
|
|
const isMobile = useShopStore((state) => state.isMobile);
|
2023-11-30 17:26:17 +08:00
|
|
|
|
2023-12-14 16:29:32 +08:00
|
|
|
// #!render_count
|
2023-12-14 16:09:33 +08:00
|
|
|
console.log("Backlog renders: ", renderCount)
|
2023-12-14 16:29:32 +08:00
|
|
|
|
2023-12-11 17:05:35 +08:00
|
|
|
return (
|
|
|
|
<Droppable
|
|
|
|
droppableId={data.id}
|
2024-01-02 17:13:50 +08:00
|
|
|
isDropDisabled={false}>
|
2023-11-30 17:26:17 +08:00
|
|
|
|
2023-12-11 17:05:35 +08:00
|
|
|
{(provided) => (
|
|
|
|
<div
|
|
|
|
className="backlog-container"
|
|
|
|
ref={provided.innerRef}
|
|
|
|
{...provided.droppableProps}>
|
2023-11-30 17:26:17 +08:00
|
|
|
|
|
|
|
|
2024-02-23 15:28:39 +08:00
|
|
|
|
|
|
|
<div className="backlog-bar">
|
|
|
|
<SearchBar/>
|
|
|
|
|
|
|
|
{isMobile ? (
|
|
|
|
<div className="mobileCloseMenu">
|
|
|
|
<button onClick={onClickToggleMobileSideMenu}>
|
|
|
|
<img src="/images/shop/icon-close-white.svg" alt="add"/>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
2024-02-22 17:26:07 +08:00
|
|
|
|
|
|
|
<BacklogSearchResult/>
|
|
|
|
|
|
|
|
<BacklogGroups/>
|
2023-11-30 17:26:17 +08:00
|
|
|
|
2023-12-11 17:05:35 +08:00
|
|
|
{provided.placeholder && (
|
|
|
|
<div style={{display: 'none'}}>
|
|
|
|
{provided.placeholder}
|
2023-11-30 17:26:17 +08:00
|
|
|
</div>
|
2023-12-11 17:05:35 +08:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
2023-11-30 17:26:17 +08:00
|
|
|
|
2023-12-11 17:05:35 +08:00
|
|
|
</Droppable>
|
|
|
|
);
|
2023-11-30 17:26:17 +08:00
|
|
|
|
|
|
|
}
|