refactor: re-structure financial reports components.

src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -1,9 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import moment from 'moment';
 
-import 'style/pages/FinancialStatements/GeneralLedger.scss';
-
-import GeneralLedgerTable from './GeneralLedgerTable';
+import { FinancialStatement } from 'components';
 import GeneralLedgerHeader from './GeneralLedgerHeader';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -13,12 +11,13 @@ import {
   GeneralLedgerSheetAlerts,
   GeneralLedgerSheetLoadingBar,
 } from './components';
+import { GeneralLedgerBody } from './GeneralLedgerBody';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 import { compose } from 'utils';
+import { getDefaultGeneralLedgerQuery } from './common';
 
 /**
  * General Ledger (GL) sheet.
@@ -31,10 +30,7 @@ function GeneralLedger({
   organizationName,
 }) {
   const [filter, setFilter] = useState({
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accural',
-    filterByOption: 'with-transactions',
+    ...getDefaultGeneralLedgerQuery(),
   });
 
   // Handle financial statement filter change.
@@ -63,29 +59,18 @@ function GeneralLedger({
       <GeneralLedgerActionsBar />
 
       <DashboardPageContent>
-        <div class="financial-statement financial-statement--general-ledger">
+        <FinancialStatement>
           <GeneralLedgerHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
           <GeneralLedgerSheetLoadingBar />
           <GeneralLedgerSheetAlerts />
-
-          <div class="financial-statement__body">
-            <GeneralLedgerTable
-              companyName={organizationName}
-              generalLedgerQuery={filter}
-            />
-          </div>
-        </div>
+          <GeneralLedgerBody />
+        </FinancialStatement>
       </DashboardPageContent>
     </GeneralLedgerProvider>
   );
 }
 
-export default compose(
-  withGeneralLedgerActions,
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-)(GeneralLedger);
+export default compose(withGeneralLedgerActions)(GeneralLedger);

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerBody.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import GeneralLedgerTable from './GeneralLedgerTable';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+
+/**
+ * General ledger body JSX.
+ */
+function GeneralLedgerBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useGeneralLedgerContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <GeneralLedgerTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const GeneralLedgerBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(GeneralLedgerBodyJSX);

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -11,6 +11,8 @@ import TableFastCell from 'components/Datatable/TableFastCell';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import { useGeneralLedgerTableColumns } from './components';
 
+import { TableStyle } from 'common';
+
 /**
  * General ledger table.
  */
@@ -41,7 +43,6 @@ export default function GeneralLedgerTable({ companyName }) {
       fullWidth={true}
     >
       <DataTable
-        className="bigcapital-datatable--financial-report"
         noResults={intl.get('this_report_does_not_contain_any_data_between_date_period')}
         columns={columns}
         data={tableRows}
@@ -54,10 +55,13 @@ export default function GeneralLedgerTable({ companyName }) {
         expandToggleColumn={1}
         sticky={true}
         TableRowsRenderer={TableVirtualizedListRows}
+
         // #TableVirtualizedListRows props.
         vListrowHeight={28}
         vListOverscanRowCount={0}
         TableCellRenderer={TableFastCell}
+
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );

src/containers/FinancialStatements/GeneralLedger/common.js

@@ -1,4 +1,5 @@
 import intl from 'react-intl-universal';
+import moment from 'moment';
 
 export const filterAccountsOptions = [
   {
@@ -9,6 +10,20 @@ export const filterAccountsOptions = [
   {
     key: 'with-transactions',
     name: intl.get('accounts_with_transactions'),
-    hint: intl.get('include_accounts_once_has_transactions_on_given_date_period'),
+    hint: intl.get(
+      'include_accounts_once_has_transactions_on_given_date_period',
+    ),
   },
 ];
+
+/**
+ * Retrieves the default general ledger query.
+ */
+export const getDefaultGeneralLedgerQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'accural',
+    filterByOption: 'with-transactions',
+  };
+};