feat(GeneralLedger): location query.

src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -15,9 +15,8 @@ import { GeneralLedgerBody } from './GeneralLedgerBody';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 
-import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
+import { useGeneralLedgerQuery } from './common';
 import { compose } from 'utils';
-import { getDefaultGeneralLedgerQuery } from './common';
 
 /**
  * General Ledger (GL) sheet.
@@ -26,9 +25,8 @@ function GeneralLedger({
   // #withGeneralLedgerActions
   toggleGeneralLedgerFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
-    ...getDefaultGeneralLedgerQuery(),
-  });
+  // General ledger query.
+  const { query, setLocationQuery } = useGeneralLedgerQuery();
 
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
@@ -38,9 +36,9 @@ function GeneralLedger({
         fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
-      setFilter(parsedFilter);
+      setLocationQuery(parsedFilter);
     },
-    [setFilter],
+    [setLocationQuery],
   );
 
   // Hide the filter drawer once the page unmount.
@@ -52,13 +50,13 @@ function GeneralLedger({
   );
 
   return (
-    <GeneralLedgerProvider query={transformFilterFormToQuery(filter)}>
+    <GeneralLedgerProvider query={query}>
       <GeneralLedgerActionsBar />
 
       <DashboardPageContent>
         <FinancialStatement>
           <GeneralLedgerHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <GeneralLedgerSheetLoadingBar />

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js

@@ -14,6 +14,7 @@ import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsP
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 
+import { getDefaultGeneralLedgerQuery } from './common';
 import { compose, transformToForm, saveInvoke } from 'utils';
 
 /**
@@ -31,11 +32,7 @@ function GeneralLedgerHeader({
   isFilterDrawerOpen,
 }) {
   // Default values.
-  const defaultValues = {
-    fromDate: moment().toDate(),
-    toDate: moment().toDate(),
-    branchesIds: [],
-  };
+  const defaultValues = getDefaultGeneralLedgerQuery();
 
   // Initial values.
   const initialValues = transformToForm(
@@ -43,30 +40,25 @@ function GeneralLedgerHeader({
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
-      branchesIds: [],
     },
     defaultValues,
   );
-
   // Validation schema.
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
     fromDate: Yup.date().required(),
     toDate: Yup.date().min(Yup.ref('fromDate')).required(),
   });
-
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     saveInvoke(onSubmitFilter, values);
-    toggleDisplayFilterDrawer();
+    toggleDisplayFilterDrawer(false);
     setSubmitting(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleDisplayFilterDrawer(false);
   };
-
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleDisplayFilterDrawer(false);

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js

@@ -1,6 +1,8 @@
 import React, { createContext, useContext } from 'react';
+
 import FinancialReportPage from '../FinancialReportPage';
-import { useGeneralLedgerSheet, useAccounts } from 'hooks/query';
+import { useGeneralLedgerSheet } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
 
 const GeneralLedgerContext = createContext();
 
@@ -8,12 +10,18 @@ const GeneralLedgerContext = createContext();
  * General ledger provider.
  */
 function GeneralLedgerProvider({ query, ...props }) {
+  // Transformes the report query to request query.
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
+  );
+
   const {
     data: generalLedger,
     isFetching,
     isLoading,
     refetch,
-  } = useGeneralLedgerSheet(query, { keepPreviousData: true });
+  } = useGeneralLedgerSheet(requestQuery, { keepPreviousData: true });
 
   const provider = {
     generalLedger,

src/containers/FinancialStatements/GeneralLedger/common.js

@@ -1,6 +1,12 @@
+import React from 'react';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+import { castArray } from 'lodash';
 
+import { useAppQueryString } from 'hooks';
+import { transformToForm } from 'utils';
+
+// Filters accounts options.
 export const filterAccountsOptions = [
   {
     key: 'all-accounts',
@@ -25,5 +31,39 @@ export const getDefaultGeneralLedgerQuery = () => {
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'accural',
     filterByOption: 'with-transactions',
+    branchesIds: [],
   };
 };
+
+/**
+ * Parses general ledger query of browser location.
+ */
+const parseGeneralLedgerQuery = (locationQuery) => {
+  const defaultQuery = getDefaultGeneralLedgerQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
+/**
+ * Retrieves the general ledger location query.
+ */
+export const useGeneralLedgerQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseGeneralLedgerQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};