import React from 'react' import {SummaryOrder} from "./SummaryOrder"; import {OrderForm} from "./OrderForm"; import {CrateList} from "./CrateList"; import {useShopStore} from "./shop_store"; import {ImportJSON} from "./ImportJSON"; import {RFQFeedback} from "./RFQFeedback"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; import {OrderOptions} from "./OrderOptions"; /** * Component that renders all things for order. * It acts like-a layout, this component do nothing more. */ export function OrderPanel({title, description}) { // #!render_count const renderCount = useRenderCount(); const isMobile = useShopStore((state) => state.isMobile); const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu); // #!render_count console.log("OrderPanel renders: ", renderCount) return (<section className="panel"> <h2>{title}</h2> <div className="control justify-content-between"> {description} </div> <div> <ImportJSON/> </div> <RFQFeedback/> {isMobile ? ( <div className="mobileBtnDisplaySideMenu"> <button onClick={onClickToggleMobileSideMenu}> <img src="/images/shop/icon-add.svg" alt="add"/> </button> </div> ) : null} <CrateList/> <section className="summary"> <SummaryOrder/> <OrderForm/> </section> </section>); }