WIP / Fix_ExchangeRate / localize

client/src/containers/Accounts/AccountsChart.js

@@ -1,10 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import {
-  Route,
-  Switch,
-} from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { Alert, Intent } from '@blueprintjs/core';
-import { useQuery } from 'react-query'
+import { useQuery } from 'react-query';
 
 import AppToaster from 'components/AppToaster';
 
@@ -26,7 +23,6 @@ import { compose } from 'utils';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function AccountsChart({
-
   // #withDashboard
   changePageTitle,
 
@@ -54,7 +50,7 @@ function AccountsChart({
   const [selectedRows, setSelectedRows] = useState([]);
 
   const [tableLoading, setTableLoading] = useState(false);
-
+  const { formatMessage } = useIntl();
   // Fetch accounts resource views and fields.
   const fetchHook = useQuery('resource-accounts', () => {
     return Promise.all([
@@ -64,38 +60,49 @@ function AccountsChart({
   });
 
   // Fetch accounts list according to the given custom view id.
-  const fetchAccountsHook = useQuery(['accounts-table', accountsTableQuery],
-    () => requestFetchAccountsTable());
+  const fetchAccountsHook = useQuery(
+    ['accounts-table', accountsTableQuery],
+    () => requestFetchAccountsTable(),
+    { refetchInterval: 3000 }
+  );
 
   useEffect(() => {
-    changePageTitle('Chart of Accounts');
+    changePageTitle(formatMessage({ id: 'chart_of_accounts' }));
   }, [changePageTitle]);
-  
+
   // Handle click and cancel/confirm account delete
-  const handleDeleteAccount = (account) => { setDeleteAccount(account); };
-  
+  const handleDeleteAccount = (account) => {
+    setDeleteAccount(account);
+  };
+
   // handle cancel delete account alert.
-  const handleCancelAccountDelete = useCallback(() => { setDeleteAccount(false); }, []);
-  
+  const handleCancelAccountDelete = useCallback(() => {
+    setDeleteAccount(false);
+  }, []);
+
   // Handle confirm account delete
   const handleConfirmAccountDelete = useCallback(() => {
-    requestDeleteAccount(deleteAccount.id).then(() => {
-      setDeleteAccount(false);
-      AppToaster.show({ message: 'the_account_has_been_deleted' });
-    }).catch(errors => {
-      setDeleteAccount(false);
-      if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
-        AppToaster.show({
-          message: 'cannot_delete_predefined_account',
-          intent: Intent.DANGER,
-        });
-      }
-      if (errors.find((e) => e.type === 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS')) {
-        AppToaster.show({
-          message: 'cannot_delete_account_has_associated_transactions'
-        });
-      }
-    });
+    requestDeleteAccount(deleteAccount.id)
+      .then(() => {
+        setDeleteAccount(false);
+        AppToaster.show({ message: 'the_account_has_been_deleted' });
+      })
+      .catch((errors) => {
+        setDeleteAccount(false);
+        if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
+          AppToaster.show({
+            message: 'cannot_delete_predefined_account',
+            intent: Intent.DANGER,
+          });
+        }
+        if (
+          errors.find((e) => e.type === 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS')
+        ) {
+          AppToaster.show({
+            message: 'cannot_delete_account_has_associated_transactions',
+          });
+        }
+      });
   }, [deleteAccount, requestDeleteAccount]);
 
   // Handle cancel/confirm account inactive.
@@ -117,43 +124,44 @@ function AccountsChart({
     });
   }, [inactiveAccount, requestFetchAccountsTable, requestInactiveAccount]);
 
+  const handleEditAccount = (account) => {};
 
-  const handleEditAccount = (account) => {
+  const handleRestoreAccount = (account) => {};
 
-  };
-
-  const handleRestoreAccount = (account) => {
-    
-  };
-
-  const handleBulkDelete = useCallback((accountsIds) => {
-    setBulkDelete(accountsIds);
-  }, [setBulkDelete]);
+  const handleBulkDelete = useCallback(
+    (accountsIds) => {
+      setBulkDelete(accountsIds);
+    },
+    [setBulkDelete]
+  );
 
   const handleConfirmBulkDelete = useCallback(() => {
-    requestDeleteBulkAccounts(bulkDelete).then(() => {
-      setBulkDelete(false);
-      AppToaster.show({ message: 'the_accounts_have_been_deleted' });
-    }).catch((error) => {
-      setBulkDelete(false);
-    });
+    requestDeleteBulkAccounts(bulkDelete)
+      .then(() => {
+        setBulkDelete(false);
+        AppToaster.show({ message: 'the_accounts_have_been_deleted' });
+      })
+      .catch((error) => {
+        setBulkDelete(false);
+      });
   }, [requestDeleteBulkAccounts, bulkDelete]);
 
   const handleCancelBulkDelete = useCallback(() => {
     setBulkDelete(false);
   }, []);
 
-  const handleBulkArchive = useCallback((accounts) => {
-
-  }, []);
+  const handleBulkArchive = useCallback((accounts) => {}, []);
 
   // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback((accounts) => {
-    setSelectedRows(accounts);
-  }, [setSelectedRows]);
+  const handleSelectedRowsChange = useCallback(
+    (accounts) => {
+      setSelectedRows(accounts);
+    },
+    [setSelectedRows]
+  );
 
   // Refetches accounts data table when current custom view changed.
-  const handleFilterChanged = useCallback(() => { 
+  const handleFilterChanged = useCallback(() => {
     fetchAccountsHook.refetch();
   }, [fetchAccountsHook]);
 
@@ -169,25 +177,29 @@ function AccountsChart({
   }, [tableLoading, fetchAccountsHook.isFetching]);
 
   // Handle fetch data of accounts datatable.
-  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
-    addAccountsTableQueries({
-      ...(sortBy.length > 0) ? {
-        column_sort_by: sortBy[0].id,
-        sort_order: sortBy[0].desc ? 'desc' : 'asc',
-      } : {},
-    });
-    fetchAccountsHook.refetch();
-  }, [fetchAccountsHook, addAccountsTableQueries]);
+  const handleFetchData = useCallback(
+    ({ pageIndex, pageSize, sortBy }) => {
+      addAccountsTableQueries({
+        ...(sortBy.length > 0
+          ? {
+              column_sort_by: sortBy[0].id,
+              sort_order: sortBy[0].desc ? 'desc' : 'asc',
+            }
+          : {}),
+      });
+      fetchAccountsHook.refetch();
+    },
+    [fetchAccountsHook, addAccountsTableQueries]
+  );
 
   return (
-    <DashboardInsider
-      loading={fetchHook.isFetching}
-      name={'accounts-chart'}>
+    <DashboardInsider loading={fetchHook.isFetching} name={'accounts-chart'}>
       <DashboardActionsBar
         selectedRows={selectedRows}
         onFilterChanged={handleFilterChanged}
         onBulkDelete={handleBulkDelete}
-        onBulkArchive={handleBulkArchive} />
+        onBulkArchive={handleBulkArchive}
+      />
 
       <DashboardPageContent>
         <Switch>
@@ -196,9 +208,9 @@ function AccountsChart({
             path={[
               '/dashboard/accounts/:custom_view_id/custom_view',
               '/dashboard/accounts',
-            ]}>
-            <AccountsViewsTabs
-              onViewChanged={handleViewChanged} />
+            ]}
+          >
+            <AccountsViewsTabs onViewChanged={handleViewChanged} />
 
             <AccountsDataTable
               onDeleteAccount={handleDeleteAccount}
@@ -207,49 +219,53 @@ function AccountsChart({
               onEditAccount={handleEditAccount}
               onFetchData={handleFetchData}
               onSelectedRowsChange={handleSelectedRowsChange}
-              loading={tableLoading} />
+              loading={tableLoading}
+            />
           </Route>
         </Switch>
 
         <Alert
-          cancelButtonText="Cancel"
-          confirmButtonText="Move to Trash"
-          icon="trash"
+          cancelButtonText='Cancel'
+          confirmButtonText='Move to Trash'
+          icon='trash'
           intent={Intent.DANGER}
           isOpen={deleteAccount}
           onCancel={handleCancelAccountDelete}
-          onConfirm={handleConfirmAccountDelete}>
+          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.
+            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>
 
         <Alert
-          cancelButtonText={<T id={'cancel'}/>}
-          confirmButtonText={<T id={'inactivate'}/>}
-          icon="trash"
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'inactivate'} />}
+          icon='trash'
           intent={Intent.WARNING}
           isOpen={inactiveAccount}
           onCancel={handleCancelInactiveAccount}
-          onConfirm={handleConfirmAccountActive}>
+          onConfirm={handleConfirmAccountActive}
+        >
           <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.
+            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>
 
         <Alert
-       cancelButtonText={<T id={'cancel'}/>}
-          confirmButtonText={<T id={'delete'}/>}
-          icon="trash"
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'delete'} />}
+          icon='trash'
           intent={Intent.DANGER}
           isOpen={bulkDelete}
           onCancel={handleCancelBulkDelete}
-          onConfirm={handleConfirmBulkDelete}>
+          onConfirm={handleConfirmBulkDelete}
+        >
           <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.
+            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>
       </DashboardPageContent>
@@ -263,6 +279,7 @@ export default compose(
   withViewsActions,
   withResourceActions,
   withDashboardActions,
-
-  withAccounts,
-)(AccountsChart);
+  withAccounts(({ accountsTableQuery }) => ({
+    accountsTableQuery,
+  }))
+)(AccountsChart);

client/src/containers/Accounts/AccountsDataTable.js

@@ -21,16 +21,15 @@ import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 
-import {If} from 'components';
 
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function AccountsDataTable({
-  // # withAccounts  
+  // #withAccounts  
   accounts,
   accountsLoading,
   
-  // # withDialog.
+  // #withDialog.
   openDialog,
 
   // own properties
@@ -58,7 +57,7 @@ function AccountsDataTable({
 
   const actionMenuList = useCallback((account) => (
     <Menu>
-      <MenuItem text='View Details' />
+      <MenuItem text={<T id={'view_details'}/>} />
       <MenuDivider />
       <MenuItem
         text={<T id={'edit_account'}/>}
@@ -166,9 +165,6 @@ function AccountsDataTable({
 
   return (
     <LoadingIndicator loading={loading} mount={false}>
-      <If condition={loading}>
-        asdasdsadsa
-      </If>
       <DataTable
         noInitialFetch={true}
         columns={columns}
@@ -189,5 +185,8 @@ export default compose(
   DialogConnect,
   withDashboardActions,
   withAccountsActions,
-  withAccounts,
+  withAccounts(({ accountsLoading, accounts }) => ({
+    accountsLoading,
+    accounts,
+  })),
 )(AccountsDataTable);