refactoring: APAing summary.

client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js

@@ -1,71 +1,29 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { DataTable } from 'components';
 import FinancialSheet from 'components/FinancialSheet';
 
-import withAPAgingSummary from './withAPAgingSummary';
-
-import { compose, getColumnWidth } from 'utils';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+import { useAPAgingSummaryColumns } from './components';
 
 /**
  * AP aging summary table sheet.
  */
-function APAgingSummaryTable({
-  //#withPayableAgingSummary
-  payableAgingColumns,
-  payableAgingRows,
-  payableAgingLoading,
-
+export default function APAgingSummaryTable({
   //#ownProps
   organizationName,
 }) {
   const { formatMessage } = useIntl();
-  const agingColumns = useMemo(
-    () =>
-      payableAgingColumns.map((agingColumn) => {
-        return `${agingColumn.before_days} - ${
-          agingColumn.to_days || 'And Over'
-        }`;
-      }),
-    [payableAgingColumns],
-  );
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: <T id={'vendor_name'} />,
-        accessor: 'name',
-        className: 'name',
-        width: 240,
-        sticky: 'left',
-        textOverview: true,
-      },
-      {
-        Header: <T id={'current'} />,
-        accessor: 'current',
-        className: 'current',
-        width: getColumnWidth(payableAgingRows, `current`, {
-          minWidth: 120,
-        }),
-      },
+  // AP aging summary report content.
+  const {
+    APAgingSummary: { tableRows },
+    isAPAgingFetching,
+  } = useAPAgingSummaryContext();
+
+  // AP aging summary columns.
+  const columns = useAPAgingSummaryColumns();
 
-      ...agingColumns.map((agingColumn, index) => ({
-        Header: agingColumn,
-        accessor: `aging-${index}`,
-        width: getColumnWidth(payableAgingRows, `aging-${index}`, {
-          minWidth: 120,
-        }),
-      })),
-      {
-        Header: <T id={'total'} />,
-        accessor: 'total',
-        width: getColumnWidth(payableAgingRows, 'total', {
-          minWidth: 120,
-        }),
-      },
-    ],
-    [payableAgingRows],
-  );
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
   return (
@@ -74,12 +32,12 @@ function APAgingSummaryTable({
       name={'payable-aging-summary'}
       sheetType={formatMessage({ id: 'payable_aging_summary' })}
       asDate={new Date()}
-      loading={payableAgingLoading}
+      loading={isAPAgingFetching}
     >
       <DataTable
         className={'bigcapital-datatable--financial-report'}
         columns={columns}
-        data={payableAgingRows}
+        data={tableRows}
         rowClassNames={rowClassNames}
         noInitialFetch={true}
         sticky={true}
@@ -87,17 +45,3 @@ function APAgingSummaryTable({
     </FinancialSheet>
   );
 }
-
-export default compose(
-  withAPAgingSummary(
-    ({
-      payableAgingSummaryLoading,
-      payableAgingSummaryColumns,
-      payableAgingSummaryRows,
-    }) => ({
-      payableAgingLoading: payableAgingSummaryLoading,
-      payableAgingColumns: payableAgingSummaryColumns,
-      payableAgingRows: payableAgingSummaryRows,
-    }),
-  ),
-)(APAgingSummaryTable);