web2019/static/js/shop/OrderSummary.jsx

59 lines
1.6 KiB
React
Raw Normal View History

import React from 'react';
import {useShopStore} from "./shop_store";
import {SummaryCrates} from "./SummaryCrates";
import {SummaryTotalPrice} from "./SummaryTotalPrice";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
/**
* Components that displays the list of card that are used in the crate.
* It is a summary of purchase
*/
export function OrderSummary() {
// #!render_count
const renderCount = useRenderCount();
const clearAll = useShopStore((state) => state.clearAll);
// #!render_count
console.log("OrderSummary renders: ", renderCount)
return (
<div className="summary-price">
<table>
<thead>
<tr>
<td colSpan="2" className="summary-remove-all">
<span className="item-card-name">Reset the order</span>
<button onClick={clearAll}>
<img src="/images/shop/icon-remove.svg"/>
</button>
</td>
</tr>
</thead>
<SummaryCrates/>
<tfoot>
<tr>
<td className="item-card-name">Price estimate</td>
<td className="price">
<SummaryTotalPrice/>
<span style={{
'display': 'inline-block',
'width': '30px',
}}>&nbsp;</span>
</td>
</tr>
</tfoot>
</table>
</div>
);
}