From ee77e57189a6b0375e840b386754973a376dc089 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sat, 17 Apr 2021 19:04:55 +0530
Subject: added a way to see the total cost and number of items in ItemsDisplay

---
 src/components/Display/SummaryDisplay.js | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/Display/SummaryDisplay.js

(limited to 'src/components/Display/SummaryDisplay.js')

diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
new file mode 100644
index 0000000..8acddc9
--- /dev/null
+++ b/src/components/Display/SummaryDisplay.js
@@ -0,0 +1,37 @@
+import React from "react";
+import "./Display.css";
+
+const getSummary = (items) => {
+  let totalRawPrice = 0;
+  let totalQuantity = 0;
+  for (let i = 0; i < items.length; i++) {
+    totalRawPrice += items[i].Price;
+    totalQuantity += items[i].Quantity
+  }
+
+  return (
+    {
+      "TotalRawPrice": totalRawPrice,
+      "TotalQuantity": totalQuantity
+    }
+  );
+}
+
+const SummaryDisplayTR = (props) => {
+  const summary = getSummary(props.items);
+  console.log(summary)
+
+  return (
+    <tr>
+      <td>Total</td>
+      <td className={"altBorder"}></td>
+      <td className={"altBorder"}></td>
+      <td>{summary.TotalQuantity}</td>
+      <td>{summary.TotalRawPrice}</td>
+      <td className={"altBorder"}></td>
+      <td className={"altBorder"}></td>
+    </tr>
+  );
+}
+
+export default SummaryDisplayTR;
-- 
cgit v1.2.3