Merge pull request #91 from OpenLMIS-Angola/OAM-73-fixPerformance

OAM-73: Improved performence of the component
OpenLMIS-Angola · May 9, 2024 · 7cdf11f · 7cdf11f
2 parents 59b8995 + 0ab0fd8
commit 7cdf11f
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 58 deletions.
diff --git a/src/requisition-order-create/order-create-tab.jsx b/src/requisition-order-create/order-create-tab.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import Tippy from '@tippyjs/react';
 
 import EditableTable from '../react-components/table/editable-table';
@@ -10,14 +10,46 @@ import { getUpdatedOrder } from './order-create-table-helper-functions';
 import { orderTableColumns } from './order-create.constant';
 import { validateOrderItem } from './order-create-validation-helper-functions';
 
-
-const OrderCreateTab = ({ passedOrder, orderableOptions, updateOrderArray, showValidationErrors, isTableReadOnly }) => {
+const OrderCreateTab = ({ passedOrder,
+    updateOrderArray,
+    showValidationErrors,
+    isTableReadOnly,
+    stockCardSummaryRepositoryImpl,
+    tabIndex,
+    cacheOrderableOptions,
+    cachedOrderableOptions }) => {
     const [order, setOrder] = useState({ orderLineItems: [], ...passedOrder });
     const [selectedOrderable, setSelectedOrderable] = useState('');
-
+    const [orderableOptions, setOrderableOptions] = useState(cachedOrderableOptions);
     const columns = useMemo(() => orderTableColumns(isTableReadOnly), []);
     const orderCreatePrintService = useMemo(() => getService('orderCreatePrintService'), []);
 
+    useMemo(() => {
+        if (cachedOrderableOptions?.length) {
+            setOrderableOptions(cachedOrderableOptions);
+            return;
+        }
+
+        stockCardSummaryRepositoryImpl.query({
+            programId: order.program.id,
+            facilityId: order.requestingFacility.id
+        }).then((page) => {
+            const fetchedOrderableOptions = page.content
+            const orderableOptionsValue = fetchedOrderableOptions.map(stockItem => ({
+                name: stockItem.orderable.fullProductName,
+                value: { ...stockItem.orderable, soh: stockItem.stockOnHand }
+            }));
+
+            setOrderableOptions(orderableOptionsValue);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (orderableOptions.length > 0) {
+            cacheOrderableOptions(orderableOptions, tabIndex);
+        }
+    }, [orderableOptions]);
+
     const updateData = (changedItems) => {
         const updatedOrder = {
             ...order,

diff --git a/src/requisition-order-create/order-create-table-helper-functions.jsx b/src/requisition-order-create/order-create-table-helper-functions.jsx
@@ -1,31 +1,22 @@
-export const pushNewOrder = (fetchedOrder, setOrderParams, stockCardSummaryRepositoryImpl, setOrders) => {
-    const orderParams = {
-        programId: fetchedOrder.program.id,
-        facilityId: fetchedOrder.requestingFacility.id
-    };
-
-    setOrderParams(orderParams);
-
-    const orderableIds = fetchedOrder.orderLineItems.map((lineItem) => {
-        return lineItem.orderable.id;
-    });
+export const getOrderValue = (fetchedOrder, stockCardSummaryRepositoryImpl) => {
+    const orderableIds = fetchedOrder.orderLineItems.map((lineItem) => lineItem.orderable.id);
 
     if (orderableIds?.length) {
-        stockCardSummaryRepositoryImpl.query({
+        return stockCardSummaryRepositoryImpl.query({
             programId: fetchedOrder.program.id,
             facilityId: fetchedOrder.requestingFacility.id,
             orderableId: orderableIds
         }).then(function (page) {
-            setOrderWithSoh(page, fetchedOrder, setOrders);
+            return getOrdersWithSoh(page, fetchedOrder);
         }).catch(function () {
-            setOrders(prevState => [...prevState, fetchedOrder]);
+            return fetchedOrder;
         });
     } else {
-        setOrders(prevState => [...prevState, fetchedOrder]);
+        return Promise.resolve(fetchedOrder);
     }
 };
 
-const setOrderWithSoh = (page, fetchedOrder, setOrders) => {
+const getOrdersWithSoh = (page, fetchedOrder) => {
     const stockItems = page.content;
     const orderWithSoh = {
         ...fetchedOrder,
@@ -39,7 +30,7 @@ const setOrderWithSoh = (page, fetchedOrder, setOrders) => {
         })
     };
 
-    setOrders(prevState => [...prevState, orderWithSoh]);
+    return orderWithSoh;
 };
 
 export const getUpdatedOrder = (selectedOrderable, order) => {

diff --git a/src/requisition-order-create/order-create-table.jsx b/src/requisition-order-create/order-create-table.jsx
@@ -18,20 +18,19 @@ import { useDispatch } from 'react-redux';
 import { useParams, useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import getService from '../react-components/utils/angular-utils';
-import { createOrderDisabled, getIsOrderValidArray, pushNewOrder, saveDraftDisabled } from './order-create-table-helper-functions';
+import { createOrderDisabled, getIsOrderValidArray, getOrderValue, saveDraftDisabled } from './order-create-table-helper-functions';
 import OrderCreateTab from './order-create-tab';
 import { saveDraft, createOrder } from './reducers/orders.reducer';
 import { isOrderInvalid } from './order-create-validation-helper-functions';
 import OrderCreateSummaryModal from './order-create-summary-modal';
 import TabNavigation from '../react-components/tab-navigation/tab-navigation';
 
-const OrderCreateTable = ({isReadOnly}) => {
+const OrderCreateTable = ({ isReadOnly }) => {
     const [orders, setOrders] = useState([]);
-    const [orderParams, setOrderParams] = useState({ programId: null, requestingFacilityId: null });
-    const [orderableOptions, setOrderableOptions] = useState([]);
     const [currentTab, setCurrentTab] = useState(0);
     const [showValidationErrors, setShowValidationErrors] = useState(false);
     const [isSummaryModalOpen, setIsSummaryModalOpen] = useState(false);
+    const [cachedOrderableOptions, setCachedOrderableOptions] = useState([]);
 
     const { orderIds } = useParams();
 
@@ -55,37 +54,20 @@ const OrderCreateTable = ({isReadOnly}) => {
             if (orderIds) {
                 const orderIdsArray = orderIds.split(',');
                 const ordersPromises = orderIdsArray.map(orderId => orderService.get(orderId));
+                setCachedOrderableOptions(orderIdsArray.map(() => []));
                 Promise.all(ordersPromises)
                     .then((orders) => {
-                        orders.forEach((fetchedOrder) => {
-                            pushNewOrder(fetchedOrder, setOrderParams, stockCardSummaryRepositoryImpl, setOrders);
-                        });
+                        const orderValuePromisses = orders.map(order => getOrderValue(order, stockCardSummaryRepositoryImpl));
+                        Promise.all(orderValuePromisses)
+                            .then((orders) => {
+                                setOrders(orders);
+                            });
                     });
             }
         },
         [orderService]
     );
 
-    useEffect(
-        () => {
-            if (orderParams.programId !== null && orderParams.requestingFacilityId !== null) {
-                stockCardSummaryRepositoryImpl.query({
-                    programId: orderParams.programId,
-                    facilityId: orderParams.facilityId
-                })
-                    .then(function (page) {
-                        const stockItems = page.content;
-
-                        setOrderableOptions(_.map(stockItems, stockItem => ({
-                            name: stockItem.orderable.fullProductName,
-                            value: { ...stockItem.orderable, soh: stockItem.stockOnHand }
-                        })));
-                    });
-            }
-        },
-        [orderParams]
-    );
-
     const onProductAdded = (updatedOrder) => {
         setOrders(prevOrders => {
             const updatedOrders = prevOrders.map(order => {
@@ -168,13 +150,20 @@ const OrderCreateTable = ({isReadOnly}) => {
                 </div>
             }
             <div className="currentTab">
-                {orders.length > 0 ? (
+                {(orders.length > 0) ? (
                     <OrderCreateTab
                         key={currentTab}
                         passedOrder={orders[currentTab]}
-                        orderableOptions={orderableOptions}
+                        stockCardSummaryRepositoryImpl={stockCardSummaryRepositoryImpl}
                         showValidationErrors={showValidationErrors}
                         isTableReadOnly={isReadOnly}
+                        tabIndex={currentTab}
+                        cachedOrderableOptions={cachedOrderableOptions[currentTab]}
+                        cacheOrderableOptions={(orderableOptions, tabIndex) => {
+                            const updatedCachedOrderableOptions = cachedOrderableOptions;
+                            updatedCachedOrderableOptions[tabIndex] = orderableOptions;
+                            setCachedOrderableOptions(updatedCachedOrderableOptions);
+                        }}
                         updateOrderArray={
                             (updatedOrder) => {
                                 onProductAdded(updatedOrder);

diff --git a/src/stock-card-summary/stock-card-summary-repository-impl.js b/src/stock-card-summary/stock-card-summary-repository-impl.js
@@ -110,17 +110,24 @@
                             var lotIds = getLotIds(stockCardSummariesPage.content),
                                 orderableIds = getOrderableIds(stockCardSummariesPage.content);
 
-                            return $q.all([
-                                orderableResource.query({
+                            var promisses = [];
+
+                            if (orderableIds.length > 0) {
+                                promisses.push(orderableResource.query({
                                     id: orderableIds
-                                }),
-                                lotService.query({
+                                }));
+                            }
+
+                            if (lotIds.length > 0) {
+                                promisses.push(lotService.query({
                                     id: lotIds
-                                })
-                            ])
+                                }));
+                            }
+
+                            return $q.all(promisses)
                                 .then(function(responses) {
-                                    var orderablePage = responses[0],
-                                        lotPage = responses[1];
+                                    var orderablePage = responses[0] || [],
+                                        lotPage = responses[1] || [];
 
                                     return combineResponses(stockCardSummariesPage, orderablePage.content,
                                         lotPage.content, params);