feat(JournalSheet): location query.

src/containers/FinancialStatements/Journal/Journal.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import { FinancialStatement, DashboardPageContent } from 'components';
@@ -12,7 +12,7 @@ import { JournalBody } from './JournalBody';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withJournalActions from './withJournalActions';
 
-import { getDefaultJournalQuery } from './utils';
+import { useJournalQuery } from './utils';
 import { compose } from 'utils';
 
 /**
@@ -22,9 +22,8 @@ function Journal({
   // #withJournalActions
   toggleJournalSheetFilter,
 }) {
-  const [filter, setFilter] = useState({
+  const {query, setLocationQuery} = useJournalQuery();
-    ...getDefaultJournalQuery(),
+
-  });
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
     (filter) => {
@@ -33,9 +32,9 @@ function Journal({
         fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
-      setFilter(_filter);
+      setLocationQuery(_filter);
     },
-    [setFilter],
+    [setLocationQuery],
   );
   // Hide the journal sheet filter drawer once the page unmount.
   useEffect(
@@ -46,14 +45,14 @@ function Journal({
   );
 
   return (
-    <JournalSheetProvider query={filter}>
+    <JournalSheetProvider query={query}>
       <JournalActionsBar />
 
       <DashboardPageContent>
         <FinancialStatement>
           <JournalHeader
             onSubmitFilter={handleFilterSubmit}
-            pageFilter={filter}
+            pageFilter={query}
           />
           <JournalSheetLoadingBar />
           <JournalSheetAlerts />

src/containers/FinancialStatements/Journal/JournalHeader.js

@@ -14,7 +14,6 @@ import withJournal from './withJournal';
 import withJournalActions from './withJournalActions';
 
 import { compose } from 'utils';
-import JournalSheetHeaderDimension from './JournalSheetHeaderDimensions';
 
 /**
  * Journal sheet header.
@@ -45,16 +44,16 @@ function JournalHeader({
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     setSubmitting(false);
-    toggleJournalSheetFilter();
+    toggleJournalSheetFilter(false);
   };
 
   // Handle cancel journal drawer header.
   const handleCancelClick = () => {
-    toggleJournalSheetFilter();
+    toggleJournalSheetFilter(false);
   };
 
   const handleDrawerClose = () => {
-    toggleJournalSheetFilter();
+    toggleJournalSheetFilter(false);
   };
 
   return (
@@ -74,11 +73,6 @@ function JournalHeader({
               title={<T id={'general'} />}
               panel={<JournalSheetHeaderGeneral />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<JournalSheetHeaderDimension />}
-            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/Journal/JournalProvider.js

@@ -9,15 +9,18 @@ const JournalSheetContext = createContext();
  * Journal sheet provider.
  */
 function JournalSheetProvider({ query, ...props }) {
+  // Transforms the sheet query to request query.
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
+  );
+
   const {
     data: journalSheet,
     isFetching,
     isLoading,
     refetch,
-  } = useJournalSheet(
+  } = useJournalSheet(requestQuery, { keepPreviousData: true });
-    { ...transformFilterFormToQuery(query) },
-    { keepPreviousData: true },
-  );
 
   const provider = {
     journalSheet,

src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensions.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import { FormGroup, Classes } from '@blueprintjs/core';
-import { BranchMultiSelect, Row, Col } from 'components';
-import {
-  JournalSheetHeaderDimensionsProvider,
-  useJournalSheetHeaderDimensionsPanelContext,
-} from './JournalSheetHeaderDimensionsProvider';
-
-/**
- * Journal sheet header dismension panel.
- * @returns
- */
-export default function JournalSheetHeaderDimensions() {
-  return (
-    <JournalSheetHeaderDimensionsProvider>
-      <JournalSheetHeaderDimensionsContent />
-    </JournalSheetHeaderDimensionsProvider>
-  );
-}
-
-/**
- * Journal sheet header dismension panel content.
- * @returns
- */
-function JournalSheetHeaderDimensionsContent() {
-  const { branches } = useJournalSheetHeaderDimensionsPanelContext();
-
-  return (
-    <Row>
-      <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
-      </Col>
-    </Row>
-  );
-}

src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensionsProvider.js

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import { Features } from 'common';
-import { useBranches } from 'hooks/query';
-import { useFeatureCan } from 'hooks/state';
-import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
-
-const JournalSheetHeaderDimensionsPanelContext = React.createContext();
-
-/**
- * Journal sheet header provider.
- * @returns
- */
-function JournalSheetHeaderDimensionsProvider({ query, ...props }) {
-  const { featureCan } = useFeatureCan();
-  const isBranchFeatureCan = featureCan(Features.Branches);
-
-  // Fetches the branches list.
-  const { isLoading: isBranchesLoading, data: branches } = useBranches(query, {
-    enabled: isBranchFeatureCan,
-  });
-
-  // Provider
-  const provider = {
-    branches,
-    isBranchesLoading,
-  };
-
-  return isBranchesLoading ? (
-    <FinancialHeaderLoadingSkeleton />
-  ) : (
-    <JournalSheetHeaderDimensionsPanelContext.Provider
-      value={provider}
-      {...props}
-    />
-  );
-}
-
-const useJournalSheetHeaderDimensionsPanelContext = () =>
-  React.useContext(JournalSheetHeaderDimensionsPanelContext);
-
-export {
-  JournalSheetHeaderDimensionsProvider,
-  useJournalSheetHeaderDimensionsPanelContext,
-};

src/containers/FinancialStatements/Journal/utils.js

@@ -1,5 +1,10 @@
+import React from 'react';
+import { castArray } from 'lodash';
 import moment from 'moment';
 
+import { useAppQueryString } from 'hooks';
+import { transformToForm } from 'utils';
+
 /**
  * Retrieves the default journal report query.
  */
@@ -8,6 +13,38 @@ export const getDefaultJournalQuery = () => {
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
     toDate: moment().endOf('year').format('YYYY-MM-DD'),
     basis: 'accural',
-    branchesIds: [],
+  };
+};
+
+
+/**
+ * Parses balance sheet query.
+ */
+ const parseJournalQuery = (locationQuery) => {
+  const defaultQuery = getDefaultJournalQuery();
+
+  return {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+};
+
+/**
+ * Retrieves the jorunal sheet query.
+ */
+export const useJournalQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseJournalQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
   };
 };