refactor(TrialBalanceSheet): refactor with body sheet.

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -3,20 +3,21 @@ import moment from 'moment';
 
 import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
 
+import { FinancialStatement } from 'components';
 import { TrialBalanceSheetProvider } from './TrialBalanceProvider';
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
-import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import {
   TrialBalanceSheetAlerts,
   TrialBalanceSheetLoadingBar,
 } from './components';
+import { TrialBalanceSheetBody } from './TrialBalanceSheetBody';
 
 import withTrialBalanceActions from './withTrialBalanceActions';
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 
+import { getDefaultTrialBalanceQuery } from './utils';
 import { compose } from 'utils';
 
 /**
@@ -30,10 +31,7 @@ function TrialBalanceSheet({
   toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
   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',
+    ...getDefaultTrialBalanceQuery(),
   });
 
   // Handle filter form submit.
@@ -56,7 +54,6 @@ function TrialBalanceSheet({
       numberFormat,
     });
   };
-
   // Hide the filter drawer once the page unmount.
   useEffect(
     () => () => {
@@ -75,23 +72,16 @@ function TrialBalanceSheet({
       <TrialBalanceSheetAlerts />
 
       <DashboardPageContent>
-        <div class="financial-statement">
+        <FinancialStatement>
           <TrialBalanceSheetHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
-          <div class="financial-statement__body">
-            <TrialBalanceSheetTable companyName={organizationName} />
-          </div>
-        </div>
+          <TrialBalanceSheetBody />
+        </FinancialStatement>
       </DashboardPageContent>
     </TrialBalanceSheetProvider>
   );
 }
 
-export default compose(
-  withTrialBalanceActions,
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-)(TrialBalanceSheet);
+export default compose(withTrialBalanceActions)(TrialBalanceSheet);

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetBody.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { FinancialSheetSkeleton } from 'components';
+import { FinancialReportBody } from '../FinancialReportPage';
+import TrialBalanceSheetTable from './TrialBalanceSheetTable';
+
+import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+
+/**
+ * Trial balance sheet body.
+ * @returns {React.JSX}
+ */
+function TrialBalanceSheetBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useTrialBalanceSheetContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <TrialBalanceSheetTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const TrialBalanceSheetBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(TrialBalanceSheetBodyJSX);

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -6,22 +6,20 @@ import { DataTable, FinancialSheet } from 'components';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 import { useTrialBalanceTableColumns } from './components';
 
+import { TableStyle } from 'common';
+
 /**
  * Trial Balance sheet data table.
  */
-export default function TrialBalanceSheetTable({
-  companyName,
-}) {
-  
-
+export default function TrialBalanceSheetTable({ companyName }) {
   // Trial balance sheet context.
   const {
     trialBalanceSheet: { tableRows, query },
-    isLoading
+    isLoading,
   } = useTrialBalanceSheetContext();
 
   // Trial balance sheet table columns.
-  const columns = useTrialBalanceTableColumns();;
+  const columns = useTrialBalanceTableColumns();
 
   const rowClassNames = (row) => {
     const { original } = row;
@@ -48,7 +46,6 @@ export default function TrialBalanceSheetTable({
       basis={'cash'}
     >
       <DataTable
-        className="bigcapital-datatable--financial-report"
         columns={columns}
         data={tableRows}
         expandable={true}
@@ -56,6 +53,7 @@ export default function TrialBalanceSheetTable({
         expandColumnSpace={1}
         sticky={true}
         rowClassNames={rowClassNames}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );

src/containers/FinancialStatements/TrialBalanceSheet/utils.js

@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+
+export function getDefaultTrialBalanceQuery() {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    basis: 'accural',
+    filterByOption: 'with-transactions',
+  };
+}