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

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 (
-    <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 };
+};