From d5decbbd0b5362a631fd6558cf1fa4acbce0d94a Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 20 Aug 2023 22:39:37 +0200 Subject: [PATCH] fix(webap): sales by items query state from query string --- .../APAgingSummary/APAgingSummary.tsx | 1 - .../APAgingSummary/APAgingSummaryHeader.tsx | 2 +- .../APAgingSummary/common.tsx | 10 +++--- .../ARAgingSummary/ARAgingSummary.tsx | 2 +- .../ARAgingSummary/common.tsx | 9 ++--- .../InventoryValuation/utils.tsx | 1 - .../PurchasesByItems/utils.tsx | 13 +++---- .../SalesByItems/SalesByItems.tsx | 24 ++++++------- .../SalesByItems/utils.tsx | 35 +++++++++++++++++++ 9 files changed, 59 insertions(+), 38 deletions(-) diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx index 68b41aa0d..0e16bac3e 100644 --- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx +++ b/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 }); diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx index 503f3d66b..f935a39ee 100644 --- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx +++ b/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); diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/common.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/common.tsx index dd1626bbd..87ed03627 100644 --- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/common.tsx +++ b/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), }; }; /** - * - * @returns + * AP aging summary query state. */ export const useAPAgingSummaryQuery = () => { // Retrieves location query. diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx index 6b512019a..2ff0550bb 100644 --- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx +++ b/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) => { diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/common.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/common.tsx index d6dbd09a6..732cac6f9 100644 --- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/common.tsx +++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/common.tsx @@ -45,27 +45,22 @@ export const getARAgingSummaryQuerySchema = () => { }; /** - * - * @param locationQuery - * @returns + * Parses the AR aging summary state. */ 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(); diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/utils.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/utils.tsx index c2f597211..cfc00af75 100644 --- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/utils.tsx +++ b/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), }; diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/utils.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/utils.tsx index ec9204167..6613e6255 100644 --- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/utils.tsx +++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/utils.tsx @@ -18,8 +18,8 @@ export const getDefaultPurchasesByItemsQuery = () => ({ }); /** - * - * @returns + * Retrieves the purchases by items query validation schema. + * @returns {Yup} */ export const getPurchasesByItemsQuerySchema = () => { return Yup.object().shape({ @@ -32,9 +32,7 @@ export const getPurchasesByItemsQuerySchema = () => { }; /** - * - * @param locationQuery - * @returns + * Parses the purchases by items query. */ const parsePurchasesByItemsQuery = (locationQuery) => { const defaultQuery = getDefaultPurchasesByItemsQuery(); @@ -45,15 +43,12 @@ const parsePurchasesByItemsQuery = (locationQuery) => { }; return { ...transformed, - - // itemsIds: castArray(transformed.itemsIds), }; }; /** - * - * @returns + * Purchases by items query state. */ export const usePurchasesByItemsQuery = () => { // Retrieves location query. diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx index b094d1b69..3382b3072 100644 --- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItems.tsx +++ b/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({ - ...getDefaultSalesByItemsQuery(), - }); + const { query, setLocationQuery } = useSalesByItemsQuery(); // 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 ( - + @@ -64,7 +60,7 @@ function SalesByItems({ diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/utils.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/utils.tsx index d2b70468f..461304506 100644 --- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/utils.tsx +++ b/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 }; +};