refactoring: account form.

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

client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
 
 import { compose } from 'utils';
-
 import { useExpensesListContext } from './ExpensesListProvider';
 
 import { Choose } from 'components';
@@ -39,6 +39,8 @@ function ExpensesDataTable({
     isEmptyStatus
   } = useExpensesListContext();
 
+  const history = useHistory();
+
   // Expenses table columns.
   const columns = useExpensesTableColumns();
 
@@ -59,7 +61,9 @@ function ExpensesDataTable({
     openAlert('expense-publish', { expenseId: expense.id });
   };
 
-  const handleEditExpense = (expense) => {
+  // Handle the expense edit action.
+  const handleEditExpense = ({ id }) => {
+    history.push(`/expenses/${id}/edit`);
   };
 
   // Handle the expense delete action.
@@ -67,49 +71,45 @@ function ExpensesDataTable({
     openAlert('expense-delete', { expenseId: expense.id });
   };
 
+  // Display empty status instead of the table.
+  if (isEmptyStatus) {
+    return <ExpensesEmptyStatus />;
+  }
+
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={isEmptyStatus}>
-          <ExpensesEmptyStatus />
-        </Choose.When>
+    <DataTable
+      columns={columns}
+      data={expenses}
+      
+      loading={isExpensesLoading}
+      headerLoading={isExpensesLoading}
+      progressBarLoading={isExpensesFetching}
 
-        <Choose.Otherwise>
-          <DataTable
-            columns={columns}
-            data={expenses}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
 
-            loading={isExpensesLoading}
-            headerLoading={isExpensesLoading}
-            progressBarLoading={isExpensesFetching}
+      onFetchData={handleFetchData}
+      
+      pagination={true}
+      manualSortBy={true}
+      manualPagination={true}
+      pagesCount={pagination.pagesCount}
 
-            selectionColumn={true}
-            noInitialFetch={true}
-            sticky={true}
+      autoResetSortBy={false}
+      autoResetPage={false}
 
-            onFetchData={handleFetchData}
-            
-            pagination={true}
-            manualSortBy={true}
-            manualPagination={true}
-            pagesCount={pagination.pagesCount}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
 
-            autoResetSortBy={false}
-            autoResetPage={false}
+      ContextMenu={ActionsMenu}
 
-            TableLoadingRenderer={TableSkeletonRows}
-            TableHeaderSkeletonRenderer={TableSkeletonHeader}
-
-            ContextMenu={ActionsMenu}
-
-            payload={{
-              onPublish: handlePublishExpense,
-              onDelete: handleDeleteExpense
-            }}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
+      payload={{
+        onPublish: handlePublishExpense,
+        onDelete: handleDeleteExpense,
+        onEdit: handleEditExpense
+      }}
+    />
   );
 }
 

client/src/containers/Expenses/ExpensesLanding/ExpensesList.js

@@ -1,16 +1,14 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 
 import 'style/pages/Expense/List.scss';
 
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import ExpenseActionsBar from './ExpenseActionsBar';
 import ExpenseViewTabs from './ExpenseViewTabs';
 import ExpenseDataTable from './ExpenseDataTable';
 import ExpensesAlerts from '../ExpensesAlerts';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withExpenses from './withExpenses';
 
 import { compose, transformTableStateToQuery } from 'utils';
@@ -20,19 +18,9 @@ import { ExpensesListProvider } from './ExpensesListProvider';
  * Expenses list.
  */
 function ExpensesList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withExpenses
   expensesTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  // Changes the page title once the page mount.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'expenses_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <ExpensesListProvider
       query={transformTableStateToQuery(expensesTableState)}
@@ -41,7 +29,10 @@ function ExpensesList({
 
       <DashboardPageContent>
         <ExpenseViewTabs />
-        <ExpenseDataTable />
+
+        <DashboardContentTable>
+          <ExpenseDataTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <ExpensesAlerts />
@@ -50,6 +41,5 @@ function ExpensesList({
 }
 
 export default compose(
-  withDashboardActions,
   withExpenses(({ expensesTableState }) => ({ expensesTableState })),
 )(ExpensesList);

client/src/containers/Expenses/ExpensesLanding/components.js

@@ -107,6 +107,24 @@ export function PublishAccessor(row) {
   );
 }
 
+/**
+ * Expense account accessor.
+ */
+export function ExpenseAccountAccessor(expense) {
+  if (expense.categories.length === 1) {
+    return expense.categories[0].expense_account.name;
+  } else if (expense.categories.length > 1) {
+    const mutliCategories = expense.categories.map((category) => (
+      <div>
+        - {category.expense_account.name} ${category.amount}
+      </div>
+    ));
+    return (
+      <Tooltip content={mutliCategories}>{'- Multi Categories -'}</Tooltip>
+    );
+  }
+}
+
 /**
  * Retrieve the expenses table columns.
  */
@@ -168,18 +186,3 @@ export function useExpensesTableColumns() {
     [],
   );
 }
-
-export function ExpenseAccountAccessor(expense) {
-  if (expense.categories.length === 1) {
-    return expense.categories[0].expense_account.name;
-  } else if (expense.categories.length > 1) {
-    const mutliCategories = expense.categories.map((category) => (
-      <div>
-        - {category.expense_account.name} ${category.amount}
-      </div>
-    ));
-    return (
-      <Tooltip content={mutliCategories}>{'- Multi Categories -'}</Tooltip>
-    );
-  }
-}