From 6534c97e4448ed1beb8cb28139f0c5bf05d1d466 Mon Sep 17 00:00:00 2001
From: Vishala Ramasamy <vishala.ramasamy@gmail.com>
Date: Fri, 5 Jan 2024 11:17:19 -0800
Subject: [PATCH] immedeate load of data

---
 .../ConsumablesList/ConsumablesTable.jsx          | 15 +++++++++++++--
 .../ConsumablesList/ConsumablesView.jsx           |  7 -------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesTable.jsx b/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesTable.jsx
index d8c3384c60..d06efebafd 100644
--- a/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesTable.jsx
+++ b/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesTable.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Table, Button } from 'reactstrap';
 import { BiPencil } from 'react-icons/bi';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -7,16 +7,27 @@ import { faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons';
 import './Consumables.css';
 import ReactTooltip from 'react-tooltip';
 import ConsumablesViewModal from './ConsumablesViewModal';
+import { fetchAllConsumables } from 'actions/bmdashboard/consumableActions';
 
 function ConsumablesTable({ consumable, project }) {
   // Data fetched in the parent component : ConsumablesView
+  const dispatch = useDispatch();
+
   const consumables = useSelector(state => state.bmConsumables.consumableslist);
   const [recordType, setRecordType] = useState(null);
   const [modal, setModal] = useState(false);
   const [selectedRow, setSelectedRow] = useState(null);
   const [sortOrder, setSortOrder] = useState({ project: 'asc', itemType: 'asc' });
   const [iconToDisplay, setIconToDisplay] = useState({ project: faSortUp, itemType: faSortUp });
-  const [consumablesViewData, setConsumablesViewData] = useState(consumables);
+  const [consumablesViewData, setConsumablesViewData] = useState(null);
+
+  useEffect(() => {
+    dispatch(fetchAllConsumables());
+  }, []);
+
+  useEffect(() => {
+    setConsumablesViewData(consumables)
+  }, [consumables])
 
   const handleSort = column => {
     if (!column || consumables.length === 0) return;
diff --git a/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesView.jsx b/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesView.jsx
index 2641979cd0..cd62d285c4 100644
--- a/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesView.jsx
+++ b/src/components/BMDashboard/Consumables/ConsumablesList/ConsumablesView.jsx
@@ -1,19 +1,12 @@
 import { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { fetchAllConsumables } from 'actions/bmdashboard/consumableActions';
 import ConsumablesTable from './ConsumablesTable';
 import ConsumablesInputs from './ConsumablesInputs';
 import './Consumables.css';
 
 function ConsumablesView() {
-  const dispatch = useDispatch();
   const [consumable, setConsumable] = useState({ label: 'All Consumables', value: '0' });
   const [project, setProject] = useState({ label: 'All Projects', value: '0' });
 
-  useEffect(() => {
-    dispatch(fetchAllConsumables());
-  }, []);
-
   return (
     <div className="PageViewContainer">
       <div className="Page">