feat(TrialBalance): location query.

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import { FinancialStatement } from 'components';
@@ -15,7 +15,7 @@ import { TrialBalanceSheetBody } from './TrialBalanceSheetBody';
 
 import withTrialBalanceActions from './withTrialBalanceActions';
 
-import { getDefaultTrialBalanceQuery } from './utils';
+import { useTrialBalanceSheetQuery } from './utils';
 import { compose } from 'utils';
 
 /**
@@ -25,9 +25,7 @@ function TrialBalanceSheet({
   // #withTrialBalanceSheetActions
   toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
+  const { query, setLocationQuery } = useTrialBalanceSheetQuery();
-    ...getDefaultTrialBalanceQuery(),
-  });
 
   // Handle filter form submit.
   const handleFilterSubmit = useCallback(
@@ -37,14 +35,14 @@ function TrialBalanceSheet({
         fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
-      setFilter(parsedFilter);
+      setLocationQuery(parsedFilter);
     },
-    [setFilter],
+    [setLocationQuery],
   );
   // Handle numebr format form submit.
   const handleNumberFormatSubmit = (numberFormat) => {
-    setFilter({
+    setLocationQuery({
-      ...filter,
+      ...query,
       numberFormat,
     });
   };
@@ -57,9 +55,9 @@ function TrialBalanceSheet({
   );
 
   return (
-    <TrialBalanceSheetProvider query={filter}>
+    <TrialBalanceSheetProvider query={query}>
       <TrialBalanceActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <TrialBalanceSheetLoadingBar />
@@ -68,7 +66,7 @@ function TrialBalanceSheet({
       <DashboardPageContent>
         <FinancialStatement>
           <TrialBalanceSheetHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <TrialBalanceSheetBody />

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -53,7 +53,6 @@ function TrialBalanceSheetHeader({
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
-      branchesIds: [],
     },
     defaultValues,
   );

src/containers/FinancialStatements/TrialBalanceSheet/utils.js

@@ -1,5 +1,13 @@
+import React from 'react';
 import moment from 'moment';
+import { castArray } from 'lodash';
 
+import { useAppQueryString } from 'hooks';
+import { transformToForm } from 'utils';
+
+/**
+ * Retrieves the default trial balance query.
+ */
 export function getDefaultTrialBalanceQuery() {
   return {
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -9,3 +17,41 @@ export function getDefaultTrialBalanceQuery() {
     branchesIds: [],
   };
 }
+
+/**
+ * Parses the trial balance sheet query of browser location.
+ */
+const parseTrialBalanceSheetQuery = (locationQuery) => {
+  const defaultQuery = getDefaultTrialBalanceQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
+/**
+ * Retrieves the trial balance sheet query.
+ */
+export const useTrialBalanceSheetQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseTrialBalanceSheetQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};