fix(webap): sales by items query state from query string

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx

@@ -39,7 +39,6 @@ function APAgingSummary({
     },
     [setLocationQuery],
   );
-
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     setLocationQuery({ ...filter, numberFormat });

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx

@@ -59,7 +59,7 @@ function APAgingSummaryHeader({
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
   };
-  // Detarmines the feature whether is enabled.
+  // Detarmines whether the feature is enabled.
   const { featureCan } = useFeatureCan();
   const isBranchesFeatureCan = featureCan(Features.Branches);
 

packages/webapp/src/containers/FinancialStatements/APAgingSummary/common.tsx

@@ -4,13 +4,14 @@ import * as Yup from 'yup';
 import { transformToCamelCase, flatObject, transformToForm } from '@/utils';
 import { useAppQueryString } from '@/hooks';
 import { useMemo } from 'react';
+import { castArray } from 'lodash';
 
 export const transformFilterFormToQuery = (form) => {
   return flatObject(transformToCamelCase(form));
 };
 
 /**
- *
+ * The default query of AP aging summary.
  * @returns
  */
 export const getDefaultAPAgingSummaryQuery = () => {
@@ -45,7 +46,7 @@ export const getAPAgingSummaryQuerySchema = () => {
 };
 
 /**
- * 
+ *  Parses the AP aging summary query state.
  * @param locationQuery 
  * @returns 
  */
@@ -58,12 +59,13 @@ const parseAPAgingSummaryQuery = (locationQuery) => {
   };
   return {
     ...transformed,
+    vendorsIds: castArray(transformed.vendorsIds),
+    branchesIds: castArray(transformed.branchesIds),
   };
 };
 
 /**
- *
+ * AP aging summary query state.
- * @returns
  */
 export const useAPAgingSummaryQuery = () => {
   // Retrieves location query.

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx

@@ -31,7 +31,7 @@ function ReceivableAgingSummarySheet({
       asDate: moment(filter.asDate).format('YYYY-MM-DD'),
     };
     setLocationQuery(_filter);
-  }, []);
+  }, [setLocationQuery]);
 
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/common.tsx

@@ -45,27 +45,22 @@ export const getARAgingSummaryQuerySchema = () => {
 };
 
 /**
- *
+ * Parses the AR aging summary state.
- * @param locationQuery
- * @returns
  */
 const parseARAgingSummaryQuery = (locationQuery) => {
   const defaultQuery = getDefaultARAgingSummaryQuery();
-
   const transformed = {
     ...defaultQuery,
     ...transformToForm(locationQuery, defaultQuery),
   };
   return {
     ...transformed,
-
-    // 
     branchesIds: castArray(transformed.branchesIds),
   };
 };
 
 /**
- *
+ * AR aging summary query state.
  */
 export const useARAgingSummaryQuery = () => {
   const [locationQuery, setLocationQuery] = useAppQueryString();

packages/webapp/src/containers/FinancialStatements/InventoryValuation/utils.tsx

@@ -42,7 +42,6 @@ const parseInventoryValuationQuery = (locationQuery) => {
 
     // Ensures the branches/warehouses ids is always array.
     itemsIds: castArray(transformed.itemsIds),
-
     branchesIds: castArray(transformed.branchesIds),
     warehousesIds: castArray(transformed.warehousesIds),
   };

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/utils.tsx

@@ -18,8 +18,8 @@ export const getDefaultPurchasesByItemsQuery = () => ({
 });
 
 /**
- *
+ * Retrieves the purchases by items query validation schema.
- * @returns
+ * @returns {Yup}
  */
 export const getPurchasesByItemsQuerySchema = () => {
   return Yup.object().shape({
@@ -32,9 +32,7 @@ export const getPurchasesByItemsQuerySchema = () => {
 };
 
 /**
- *
+ * Parses the purchases by items query.
- * @param locationQuery
- * @returns
  */
 const parsePurchasesByItemsQuery = (locationQuery) => {
   const defaultQuery = getDefaultPurchasesByItemsQuery();
@@ -45,15 +43,12 @@ const parsePurchasesByItemsQuery = (locationQuery) => {
   };
   return {
     ...transformed,
-
-    //
     itemsIds: castArray(transformed.itemsIds),
   };
 };
 
 /**
- *
+ * Purchases by items query state.
- * @returns
  */
 export const usePurchasesByItemsQuery = () => {
   // Retrieves location query.

packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import moment from 'moment';
 
 import { SalesByItemsBody } from './SalesByItemsBody';
@@ -11,7 +11,7 @@ import SalesByItemsHeader from './SalesByItemsHeader';
 
 import withSalesByItemsActions from './withSalesByItemsActions';
 
-import { getDefaultSalesByItemsQuery } from './utils';
+import { useSalesByItemsQuery } from './utils';
 import { compose } from '@/utils';
 
 /**
@@ -21,9 +21,7 @@ function SalesByItems({
   // #withSellsByItemsActions
   toggleSalesByItemsFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
+  const { query, setLocationQuery } = useSalesByItemsQuery();
-    ...getDefaultSalesByItemsQuery(),
-  });
 
   // Handle filter form submit.
   const handleFilterSubmit = useCallback(
@@ -33,30 +31,28 @@ function SalesByItems({
         fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
-      setFilter(parsedFilter);
+      setLocationQuery(parsedFilter);
     },
-    [setFilter],
+    [setLocationQuery],
   );
 
   // Handle number format form submit.
   const handleNumberFormatSubmit = (numberFormat) => {
-    setFilter({
+    setLocationQuery({
       ...filter,
       numberFormat,
     });
   };
   // Hide the filter drawer once the page unmount.
   useEffect(
-    () => () => {
+    () => () => toggleSalesByItemsFilterDrawer(false),
-      toggleSalesByItemsFilterDrawer(false);
-    },
     [toggleSalesByItemsFilterDrawer],
   );
 
   return (
-    <SalesByItemProvider query={filter}>
+    <SalesByItemProvider query={query}>
       <SalesByItemsActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <SalesByItemsLoadingBar />
@@ -64,7 +60,7 @@ function SalesByItems({
       <DashboardPageContent>
         <FinancialStatement>
           <SalesByItemsHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <SalesByItemsBody />

packages/webapp/src/containers/FinancialStatements/SalesByItems/utils.tsx

@@ -1,7 +1,11 @@
 // @ts-nocheck
+import React from 'react';
 import moment from 'moment';
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
+import { castArray } from 'lodash';
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
 
 /**
  * Retrieves the validation schema.
@@ -26,3 +30,34 @@ export const getDefaultSalesByItemsQuery = () => ({
   filterByOption: 'with-transactions',
   itemsIds: [],
 });
+
+/**
+ * Parses sales by items query of browser location.
+ */
+const parseSalesByItemsQuery = (locationQuery) => {
+  const defaultQuery = getDefaultSalesByItemsQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+    itemsIds: castArray(transformed.itemsIds),
+  };
+};
+
+/**
+ * Sales by items query state.
+ */
+export const useSalesByItemsQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseSalesByItemsQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};