From 6619163abe57167f00a4ec4dfe7d36a77ae41b41 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Tue, 7 Mar 2023 19:52:40 +0800
Subject: [PATCH] Made current session stats widget in dashboard functional

---
 .../StockRenderer/StockRenderer.tsx           | 15 +++++++++++++
 .../TransactionsThisSessionSlice.tsx          | 22 +++++++++++++++++++
 src/Interfaces/Interfaces.tsx                 |  7 ++++++
 src/Plugins/Redux/Store/Store.tsx             |  2 ++
 src/Routes/Dashboard/Dashboard.tsx            | 17 +++++++++++---
 5 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/Features/Redux/Slices/TransactionsThisSessionSlice/TransactionsThisSessionSlice.tsx

diff --git a/src/Components/InventoryPage/StockRenderer/StockRenderer.tsx b/src/Components/InventoryPage/StockRenderer/StockRenderer.tsx
index 8e79b18..af64fa6 100644
--- a/src/Components/InventoryPage/StockRenderer/StockRenderer.tsx
+++ b/src/Components/InventoryPage/StockRenderer/StockRenderer.tsx
@@ -5,10 +5,16 @@ import IsNumber from "../IsNumber/IsNumber";
 import { UpdateProduct } from "../../Api/Api";
 import { useQueryClient, useMutation } from "react-query";
 import { Product } from "../../../Interfaces/Interfaces";
+import { useDispatch } from "react-redux";
+import {
+  this_session_increment_removed,
+  this_session_increment_added,
+} from "../../../Features/Redux/Slices/TransactionsThisSessionSlice/TransactionsThisSessionSlice";
 
 export default function StockRenderer(product: Product) {
   const [stock, setStock] = useState(product.quantity);
   const [valueChanged, setValueChanged] = useState(false);
+  const dispatch = useDispatch();
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: UpdateProduct,
@@ -23,6 +29,15 @@ export default function StockRenderer(product: Product) {
       name: product.name,
       quantity: stock,
     });
+    if (stock > product.quantity) {
+      dispatch(
+        this_session_increment_added(Math.abs(stock - product.quantity))
+      );
+    } else {
+      dispatch(
+        this_session_increment_removed(Math.abs(stock - product.quantity))
+      );
+    }
     setValueChanged(false);
   }
   useEffect(() => {
diff --git a/src/Features/Redux/Slices/TransactionsThisSessionSlice/TransactionsThisSessionSlice.tsx b/src/Features/Redux/Slices/TransactionsThisSessionSlice/TransactionsThisSessionSlice.tsx
new file mode 100644
index 0000000..df6f458
--- /dev/null
+++ b/src/Features/Redux/Slices/TransactionsThisSessionSlice/TransactionsThisSessionSlice.tsx
@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const TransactionsThisSessionSlice = createSlice({
+  name: "Transactions",
+  initialState: {
+    added: 0,
+    removed: 0,
+  },
+  reducers: {
+    this_session_increment_added: (state, action) => {
+      state.added = action.payload;
+    },
+    this_session_increment_removed: (state, action) => {
+      state.removed = action.payload;
+    },
+  },
+});
+
+export const { this_session_increment_added, this_session_increment_removed } =
+  TransactionsThisSessionSlice.actions;
+
+export default TransactionsThisSessionSlice.reducer;
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx
index dad1478..fa27e80 100644
--- a/src/Interfaces/Interfaces.tsx
+++ b/src/Interfaces/Interfaces.tsx
@@ -43,6 +43,13 @@ export interface LoggedInUserState {
   };
 }
 
+export interface SessionTransactions {
+  session_transactions: {
+    added: number;
+    removed: number;
+  };
+}
+
 // Component Props Interfaces
 
 export interface IconProps {
diff --git a/src/Plugins/Redux/Store/Store.tsx b/src/Plugins/Redux/Store/Store.tsx
index a7e36b1..1a1fdf9 100644
--- a/src/Plugins/Redux/Store/Store.tsx
+++ b/src/Plugins/Redux/Store/Store.tsx
@@ -2,11 +2,13 @@ import { configureStore } from "@reduxjs/toolkit";
 import LoginReducer from "../../../Features/Redux/Slices/Login/LoginSlice";
 import LoggedInUserReducer from "../../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 import OldSessionReducer from "../../../Features/Redux/Slices/OldSession/OldSessionSlice";
+import TransactionsThisSessionReducer from "../../../Features/Redux/Slices/TransactionsThisSessionSlice/TransactionsThisSessionSlice";
 
 export default configureStore({
   reducer: {
     logged_in: LoginReducer,
     logged_in_user: LoggedInUserReducer,
     old_session_checked: OldSessionReducer,
+    session_transactions: TransactionsThisSessionReducer,
   },
 });
diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx
index 12e7f3a..f52b29f 100644
--- a/src/Routes/Dashboard/Dashboard.tsx
+++ b/src/Routes/Dashboard/Dashboard.tsx
@@ -15,7 +15,8 @@ import {
   GetLowestStockedProduct,
   GetProducts,
 } from "../../Components/Api/Api";
-import { ProductLog } from "../../Interfaces/Interfaces";
+import { ProductLog, SessionTransactions } from "../../Interfaces/Interfaces";
+import { useSelector } from "react-redux";
 
 export default function Dashboard() {
   const logs = useQuery("logs", GetLogs, { retry: 0 });
@@ -27,6 +28,12 @@ export default function Dashboard() {
       retry: 0,
     }
   );
+  const session_added = useSelector(
+    (state: SessionTransactions) => state.session_transactions.added
+  );
+  const session_removed = useSelector(
+    (state: SessionTransactions) => state.session_transactions.removed
+  );
   if (logs.isLoading || products.isLoading || lowest_stock_product.isLoading) {
     return (
       <div>
@@ -110,14 +117,18 @@ export default function Dashboard() {
                     Added
                   </p>
                 </div>
-                <p style={{ ...styles.text_white, ...styles.text_L }}>254</p>
+                <p style={{ ...styles.text_white, ...styles.text_L }}>
+                  {session_added}
+                </p>
                 <div style={styles.content_row}>
                   <ColoredCube size={32} color="#a44141" />
                   <p style={{ ...styles.text_white, ...styles.text_L }}>
                     Removed
                   </p>
                 </div>
-                <p style={{ ...styles.text_white, ...styles.text_XL }}>118</p>
+                <p style={{ ...styles.text_white, ...styles.text_XL }}>
+                  {session_removed}
+                </p>
               </div>
               <div
                 style={{