refactoring: account form.

refactoring: expense form.
refactoring: manual journal form.
refactoring: invoice form.

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js

@@ -1,14 +1,11 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 import PaymentMadeActionsBar from './PaymentMadeActionsBar';
 import PaymentMadesAlerts from '../PaymentMadesAlerts';
 import PaymentMadesTable from './PaymentMadesTable';
 import { PaymentMadesListProvider } from './PaymentMadesListProvider';
 import PaymentMadeViewTabs from './PaymentMadeViewTabs';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withPaymentMades from './withPaymentMade';
 
 import { compose, transformTableStateToQuery } from 'utils';
@@ -17,18 +14,9 @@ import { compose, transformTableStateToQuery } from 'utils';
  * Payment mades list.
  */
 function PaymentMadeList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withPaymentMades
   paymentMadesTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'payment_made_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <PaymentMadesListProvider
       query={transformTableStateToQuery(paymentMadesTableState)}
@@ -37,7 +25,10 @@ function PaymentMadeList({
 
       <DashboardPageContent>
         <PaymentMadeViewTabs />
-        <PaymentMadesTable />
+
+        <DashboardContentTable>
+          <PaymentMadesTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <PaymentMadesAlerts />
@@ -46,7 +37,6 @@ function PaymentMadeList({
 }
 
 export default compose(
-  withDashboardActions,
   withPaymentMades(({ paymentMadesTableState }) => ({
     paymentMadesTableState,
   })),

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js

@@ -23,7 +23,7 @@ function PaymentMadesTable({
   addPaymentMadesTableQueries,
 
   // #withAlerts
-  openAlert
+  openAlert,
 }) {
   // Payment mades table columns.
   const columns = usePaymentMadesTableColumns();
@@ -42,7 +42,7 @@ function PaymentMadesTable({
 
   // Handles the delete payment made action.
   const handleDeletePaymentMade = (paymentMade) => {
-    openAlert('payment-made-delete', { paymentMadeId: paymentMade.id })
+    openAlert('payment-made-delete', { paymentMadeId: paymentMade.id });
   };
 
   // Handle datatable fetch data once the table state change.
@@ -52,37 +52,36 @@ function PaymentMadesTable({
     },
     [addPaymentMadesTableQueries],
   );
-    
+
+  // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <PaymentMadesEmptyStatus />;
   }
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        columns={columns}
-        data={paymentMades}
-        onFetchData={handleDataTableFetchData}
-        loading={isPaymentsLoading}
-        headerLoading={isPaymentsLoading}
-        progressBarLoading={isPaymentsFetching}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        pagination={true}
-        pagesCount={pagination.pagesCount}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-        ContextMenu={ActionsMenu}
-        payload={{
-          onEdit: handleEditPaymentMade,
-          onDelete: handleDeletePaymentMade,
-        }}
-      />
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentMades}
+      onFetchData={handleDataTableFetchData}
+      loading={isPaymentsLoading}
+      headerLoading={isPaymentsLoading}
+      progressBarLoading={isPaymentsFetching}
+      manualSortBy={true}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
+      pagination={true}
+      pagesCount={pagination.pagesCount}
+      autoResetSortBy={false}
+      autoResetPage={false}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentMade,
+        onDelete: handleDeletePaymentMade,
+      }}
+    />
   );
 }