fix: bugs in financial statements.

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import moment from 'moment';
 import { useIntl } from 'react-intl';
 
-import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
+import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -16,8 +16,6 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 import withTrialBalance from './withTrialBalance';
 import withSettings from 'containers/Settings/withSettings';
 
-
-
 function TrialBalanceSheet({
   // #withDashboard
   changePageTitle,
@@ -37,40 +35,36 @@ function TrialBalanceSheet({
     basis: 'accural',
     none_zero: false,
   });
-  const [refetch, setRefetch] = useState(false);
   const { formatMessage } = useIntl();
 
-  const fetchHook = useQuery(['trial-balance', filter],
+  const fetchHook = useQuery(
+    ['trial-balance', filter],
     (key, query) => fetchTrialBalanceSheet(query),
-    { manual: true });
+    { manual: true },
+  );
 
   // handle fetch data of trial balance table.
   const handleFetchData = useCallback(() => {
-    setRefetch(true);
-  }, [fetchHook]);
+    fetchHook.refetch({ force: true });
+  }, []);
 
   // Change page title of the dashboard.
   useEffect(() => {
-    changePageTitle(formatMessage({id:'trial_balance_sheet'}));
-  }, [changePageTitle,formatMessage]);
+    changePageTitle(formatMessage({ id: 'trial_balance_sheet' }));
+  }, [changePageTitle, formatMessage]);
 
-  const handleFilterSubmit = useCallback((filter) => {
-    const parsedFilter = {
-      ...filter,
-      from_date: moment(filter.from_date).format('YYYY-MM-DD'),
-      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
-    };
-    setFilter(parsedFilter);
-    setRefetch(true);
-  }, []);
-
-  // Refetch sheet effect.
-  useEffect(() => {
-    if (refetch) {
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const parsedFilter = {
+        ...filter,
+        from_date: moment(filter.from_date).format('YYYY-MM-DD'),
+        to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+      };
+      setFilter(parsedFilter);
       fetchHook.refetch({ force: true });
-      setRefetch(false);
-    }
-  }, [fetchHook]);
+    },
+    [fetchHook],
+  );
 
   return (
     <DashboardInsider>
@@ -80,19 +74,21 @@ function TrialBalanceSheet({
         <div class="financial-statement">
           <TrialBalanceSheetHeader
             pageFilter={filter}
-            onSubmitFilter={handleFilterSubmit} />
+            onSubmitFilter={handleFilterSubmit}
+          />
 
           <div class="financial-statement__body">
             <TrialBalanceSheetTable
               companyName={organizationSettings.name}
               trialBalanceQuery={filter}
               onFetchData={handleFetchData}
-              loading={trialBalanceSheetLoading} />
+              loading={trialBalanceSheetLoading}
+            />
           </div>
         </div>
       </DashboardPageContent>
     </DashboardInsider>
-  )
+  );
 }
 
 export default compose(
@@ -102,4 +98,4 @@ export default compose(
     trialBalanceSheetLoading,
   })),
   withSettings,
-)(TrialBalanceSheet);
+)(TrialBalanceSheet);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -1,19 +1,16 @@
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 
 import withTrialBalance from './withTrialBalance';
 
 import { compose } from 'utils';
 
-
 function TrialBalanceSheetTable({
   // #withTrialBalanceDetail
   trialBalanceAccounts,
@@ -26,40 +23,42 @@ function TrialBalanceSheetTable({
   loading,
   companyName,
 }) {
+  const { formatMessage } = useIntl();
 
-  const {formatMessage} =useIntl();
-
-  const columns = useMemo(() => [
-    {
-      Header: formatMessage({ id:'account_name' }),
-      accessor: 'name',
-      className: "name",
-    },
-    {
-      Header: formatMessage({ id:'code' }), 
-      accessor: 'code',
-      className: "code",
-      width: 120,
-    },
-    {
-      Header: formatMessage({ id:'credit' }),
-      accessor: r => (<Money amount={r.credit} currency="USD" />),
-      className: 'credit',
-      width: 120,
-    },
-    {
-      Header: formatMessage({ id:'debit' }),
-      accessor: r => (<Money amount={r.debit} currency="USD" />),
-      className: 'debit',
-      width: 120,
-    },
-    {
-      Header: formatMessage({ id:'balance' }),
-      accessor: r => (<Money amount={r.balance} currency="USD" />),
-      className: 'balance',
-      width: 120,
-    }
-  ], [formatMessage]);
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'name',
+      },
+      {
+        Header: formatMessage({ id: 'code' }),
+        accessor: 'code',
+        className: 'code',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: (r) => <Money amount={r.credit} currency="USD" />,
+        className: 'credit',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: (r) => <Money amount={r.debit} currency="USD" />,
+        className: 'debit',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'balance' }),
+        accessor: (r) => <Money amount={r.balance} currency="USD" />,
+        className: 'balance',
+        width: 120,
+      },
+    ],
+    [formatMessage],
+  );
 
   const handleFetchData = useCallback(() => {
     onFetchData && onFetchData();
@@ -68,21 +67,22 @@ function TrialBalanceSheetTable({
   return (
     <FinancialSheet
       companyName={companyName}
-      sheetType={'Trial Balance Sheet'}
+      sheetType={formatMessage({ id: 'trial_balance_sheet' })}
       fromDate={trialBalanceQuery.from_date}
       toDate={trialBalanceQuery.to_date}
       name="trial-balance"
-      loading={loading}>
-
+      loading={loading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={trialBalanceAccounts}
         onFetchData={handleFetchData}
         expandable={true}
-        expandToggleColumn={1} />
+        expandToggleColumn={1}
+      />
     </FinancialSheet>
-  ); 
+  );
 }
 
 const mapStateToProps = (state, props) => {
@@ -102,4 +102,4 @@ export default compose(
   withTrialBalance(({ trialBalanceAccounts }) => ({
     trialBalanceAccounts,
   })),
-)(TrialBalanceSheetTable);
+)(TrialBalanceSheetTable);