web2019/static/js/shop/Layout.jsx

47 lines
1.5 KiB
React
Raw Normal View History

import React from 'react';
import {useShopStore} from "./shop_store";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
/**
* Component that provides a base layout (aside/main) for the page.
*/
export function Layout({aside, main}) {
// #!render_count
const renderCount = useRenderCount();
const mobileSideMenuShouldOpen = useShopStore(state => state.sideMenuIsOpen);
const onClickToggleMobileSideMenu = useShopStore(state => state.switchSideMenu);
const showCardAddedFeedback = useShopStore(state => state.showCardAddedFeedback);
const showNoDestination = useShopStore(state => state.showNoDestination);
// #!render_count
console.log("Layout renders: ", renderCount)
return (
<div className="layout">
<aside className={'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')}>{aside}</aside>
{mobileSideMenuShouldOpen ? (
<section className="main" onClick={onClickToggleMobileSideMenu}>{main}</section>
) : (
<section className="main">{main}</section>
)}
{showCardAddedFeedback ? (
!showNoDestination ?
(<div className="feedback-add-success">
added
</div>)
: (<div className="feedback-add-failure">
No cards added: all crates are closed
</div>)
) : null}
</div>
);
}