WIP feature/expenses

client/src/containers/Expenses/ExpensesList.js

@@ -1,81 +1,243 @@
-import React, { useEffect, useState } from 'react';
-import { useAsync } from 'react-use';
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { Route, Switch, useHistory, useParams } from 'react-router-dom';
+import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import ExpensesActionsBar from 'components/Expenses/ExpensesActionsBar';
-import ExpensesViewsTabs from 'components/Expenses/ExpensesViewsTabs';
-import ExpensesTable from 'components/Expenses/ExpensesTable';
-import connector from 'connectors/ExpensesList.connector';
 import AppToaster from 'components/AppToaster';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import ExpenseViewTabs from 'containers/Expenses/ExpenseViewTabs';
+import ExpenseDataTable from 'containers/Expenses/ExpenseDataTable';
+import ExpenseActionsBar from 'containers/Expenses/ExpenseActionsBar';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withExpensesActions from 'containers/Expenses/withExpensesActions';
+import withViewsActions from 'containers/Views/withViewsActions';
+
+import { compose } from 'utils';
 
 function ExpensesList({
-  fetchExpenses,
-  deleteExpense,
-  // fetchViews,
-  expenses,
-  getResourceViews,
-  changePageTitle
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withViewsActions
+  requestFetchResourceViews,
+
+  //#withExpensesActions
+  requestFetchExpensesTable,
+  requestDeleteExpense,
+  requestPublishExpense,
+  requestDeleteBulkExpenses,
+  addExpensesTableQueries,
+  requestFetchExpense,
 }) {
-  const {formatMessage} =useIntl()
-  useEffect(() => {
-    changePageTitle(formatMessage({id:'expenses_list'}));
-  }, [changePageTitle,formatMessage]);
+  const history = useHistory();
+  const { id } = useParams();
+  const { formatMessage } = useIntl();
 
-  const [deleteExpenseState, setDeleteExpense] = useState();
+  const [deleteExpense, setDeleteExpense] = useState(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [bulkDelete, setBulkDelete] = useState(false);
 
-  const handleDeleteExpense = expense => {
-    setDeleteExpense(expense);
-  };
-  const handleCancelAccountDelete = () => {
-    setDeleteExpense(false);
-  };
-
-  const handleConfirmAccountDelete = () => {
-    deleteExpense(deleteExpenseState.id).then(() => {
-      setDeleteExpense(false);
-      AppToaster.show({
-        message: formatMessage({id:'the_expense_has_been_successfully_deleted'})
-      });
-    });
-  };
-
-  const fetchHook = useAsync(async () => {
-    await Promise.all([
-      fetchExpenses()
-      // getResourceViews('expenses'),
-    ]);
+  const fetchViews = useQuery('expenses-resource-views', () => {
+    return requestFetchResourceViews('expenses');
   });
 
+  const fetchExpenses = useQuery('expenses-table', () =>
+    requestFetchExpensesTable(),
+  );
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'expenses_list' }));
+  }, [changePageTitle, formatMessage]);
+
+  // Handle delete expense click.
+
+  const handleDeleteExpense = useCallback(
+    (expnese) => {
+      setDeleteExpense(expnese);
+    },
+    [setDeleteExpense],
+  );
+
+  // Handle cancel expense journal.
+
+  const handleCancelExpenseDelete = useCallback(() => {
+    setDeleteExpense(false);
+  }, [setDeleteExpense]);
+
+  // Handle confirm delete expense.
+  const handleConfirmExpenseDelete = useCallback(() => {
+    requestDeleteExpense(deleteExpense.id).then(() => {
+      AppToaster.show({
+        message: formatMessage(
+          {
+            id: 'the_expense_has_been_successfully_deleted',
+          },
+          {
+            number: deleteExpense.payment_account_id,
+          },
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setDeleteExpense(false);
+    });
+  }, [deleteExpense, requestDeleteExpense, formatMessage]);
+
+  // Calculates the selected rows count.
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
+    selectedRows,
+  ]);
+
+  const handleBulkDelete = useCallback(
+    (accountsIds) => {
+      setBulkDelete(accountsIds);
+    },
+    [setBulkDelete],
+  );
+
+  // Handle confirm journals bulk delete.
+  const handleConfirmBulkDelete = useCallback(() => {
+    requestDeleteBulkExpenses(bulkDelete)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage(
+            {
+              id: 'the_expenses_has_been_successfully_deleted',
+            },
+            {
+              count: selectedRowsCount,
+            },
+          ),
+          intent: Intent.SUCCESS,
+        });
+        setBulkDelete(false);
+      })
+      .catch((error) => {
+        setBulkDelete(false);
+      });
+  }, [requestDeleteBulkExpenses, bulkDelete, formatMessage, selectedRowsCount]);
+
+  // Handle cancel bulk delete alert.
+  const handleCancelBulkDelete = useCallback(() => {
+    setBulkDelete(false);
+  }, []);
+
+  const handleEidtExpense = useCallback(
+    (expense) => {
+      history.push(`/expenses/${expense.id}/edit`);
+    },
+    [history],
+  );
+
+  // Handle filter change to re-fetch data-table.
+  const handleFilterChanged = useCallback(() => {}, []);
+
+  // Handle fetch data of manual jouranls datatable.
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addExpensesTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+      });
+    },
+    [addExpensesTableQueries],
+  );
+
+  const handlePublishExpense = useCallback(
+    (expense) => {
+      requestPublishExpense(expense.id).then(() => {
+        AppToaster.show({
+          message: formatMessage({ id: 'the_expense_id_has_been_published' }),
+        });
+      });
+    },
+    [requestPublishExpense, formatMessage],
+  );
+
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback(
+    (accounts) => {
+      setSelectedRows(accounts);
+    },
+    [setSelectedRows],
+  );
+
   return (
-    <DashboardInsider loading={false}>
-      <ExpensesActionsBar />
-      <ExpensesViewsTabs />
+    <DashboardInsider
+      loading={fetchViews.isFetching || fetchExpenses.isFetching}
+      name={'expenses'}
+    >
+      <ExpenseActionsBar
+        onBulkDelete={handleBulkDelete}
+        selectedRows={selectedRows}
+        onFilterChanged={handleFilterChanged}
+      />
 
       <DashboardPageContent>
-        <ExpensesTable
-          expenses={expenses}
-          onDeleteExpense={handleDeleteExpense}
-        />
-      </DashboardPageContent>
+        <Switch>
+          <Route
+            // exact={true}
+            // path={[
+            //   '/expenses/:custom_view_id/custom_view',
+            //   '/expenses/new',
+            // ]}
+          >
+            <ExpenseViewTabs />
 
-      <Alert
-        cancelButtonText={<T id={'cancel'}/>}
-        confirmButtonText={<T id={'move_to_trash'}/>}
-        icon='trash'
-        intent={Intent.DANGER}
-        isOpen={deleteExpenseState}
-        onCancel={handleCancelAccountDelete}
-        onConfirm={handleConfirmAccountDelete}
-      >
-        <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be
-          able to restore it later, but it will become private to you.
-        </p>
-      </Alert>
+            <ExpenseDataTable
+              onDeleteExpense={handleDeleteExpense}
+              onFetchData={handleFetchData}
+              onEditExpense={handleEidtExpense}
+              onPublishExpense={handlePublishExpense}
+              onSelectedRowsChange={handleSelectedRowsChange}
+            />
+          </Route>
+        </Switch>
+
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={deleteExpense}
+          onCancel={handleCancelExpenseDelete}
+          onConfirm={handleConfirmExpenseDelete}
+        >
+          <p>
+            <T id={'once_delete_this_expense_you_will_able_to_restore_it'} />
+          </p>
+        </Alert>
+
+        {/* <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={
+            <T id={'delete_count'} values={{ count: selectedRowsCount }} />
+          }
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={bulkDelete}
+          onCancel={handleCancelBulkDelete}
+          onConfirm={handleConfirmBulkDelete}
+        >
+          <p>
+            <T
+              id={'once_delete_these_journalss_you_will_not_able_restore_them'}
+            />
+          </p>
+        </Alert> */}
+      </DashboardPageContent>
     </DashboardInsider>
   );
 }
 
-export default connector(ExpensesList);
+export default compose(
+  withDashboardActions,
+  withExpensesActions,
+  withViewsActions,
+)(ExpensesList);