fix: bugs in financial statements.

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -16,8 +16,7 @@ import withSettings from 'containers/Settings/withSettings';
 import withBalanceSheetActions from './withBalanceSheetActions';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 
-import {useIntl } from 'react-intl';
-
+import { useIntl } from 'react-intl';
 
 function BalanceSheet({
   // #withDashboard
@@ -30,7 +29,7 @@ function BalanceSheet({
   balanceSheetLoading,
 
   // #withPreferences
-  organizationSettings
+  organizationSettings,
 }) {
   const { formatMessage } = useIntl();
   const [filter, setFilter] = useState({
@@ -41,39 +40,35 @@ function BalanceSheet({
     display_columns_by: '',
     none_zero: false,
   });
-  const [refetch, setRefetch] = useState(false);
- 
-  const fetchHook = useQuery(['balance-sheet', filter],
+
+  const fetchHook = useQuery(
+    ['balance-sheet', filter],
     (key, query) => fetchBalanceSheet({ ...query }),
-    { manual: true });
+    { manual: true },
+  );
 
   // Handle fetch the data of balance sheet.
   const handleFetchData = useCallback(() => {
-    setRefetch(true);
+    fetchHook.refetch({ force: true });
   }, []);
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'balance_sheet' }));
-  }, [changePageTitle,formatMessage]);
+  }, [changePageTitle, formatMessage]);
 
   // Handle re-fetch balance sheet after filter change.
-  const handleFilterSubmit = useCallback((filter) => {
-    const _filter = {
-      ...filter,
-      from_date: moment(filter.from_date).format('YYYY-MM-DD'),
-      to_date: moment(filter.to_date).format('YYYY-MM-DD'),
-    };
-    setFilter({ ..._filter });
-    setRefetch(true);
-  }, [setFilter]);
-
-  // Refetch sheet effect.
-  useEffect(() => {
-    if (refetch) {
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const _filter = {
+        ...filter,
+        from_date: moment(filter.from_date).format('YYYY-MM-DD'),
+        to_date: moment(filter.to_date).format('YYYY-MM-DD'),
+      };
+      setFilter({ ..._filter });
       fetchHook.refetch({ force: true });
-      setRefetch(false);
-    }    
-  }, [refetch])
+    },
+    [setFilter],
+  );
 
   return (
     <DashboardInsider>
@@ -83,14 +78,16 @@ function BalanceSheet({
         <div class="financial-statement">
           <BalanceSheetHeader
             pageFilter={filter}
-            onSubmitFilter={handleFilterSubmit} />
+            onSubmitFilter={handleFilterSubmit}
+          />
 
           <div class="financial-statement__body">
             <BalanceSheetTable
               companyName={organizationSettings.name}
               loading={balanceSheetLoading}
               balanceSheetQuery={filter}
-              onFetchData={handleFetchData} />
+              onFetchData={handleFetchData}
+            />
           </div>
         </div>
       </DashboardPageContent>
@@ -105,4 +102,4 @@ export default compose(
     balanceSheetLoading,
   })),
   withSettings,
-)(BalanceSheet);
+)(BalanceSheet);

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -1,4 +1,4 @@
-import React, {useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { useIntl } from 'react-intl';
 
@@ -8,13 +8,10 @@ import DataTable from 'components/DataTable';
 
 import SettingsConnect from 'connectors/Settings.connect';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 
 import { compose, defaultExpanderReducer } from 'utils';
 
-
 function BalanceSheetTable({
   // #withPreferences
   organizationSettings,
@@ -28,113 +25,85 @@ function BalanceSheetTable({
   onFetchData,
   loading,
 }) {
-
-  const {formatMessage} = useIntl();
-  const columns = useMemo(() => [
-    {
-      // Build our expander column
-      id: 'expander', // Make sure it has an ID
-      className: 'expander',
-      Header: ({
-        getToggleAllRowsExpandedProps,
-        isAllRowsExpanded
-      }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
-          }
-        </span>
-      ),
-      Cell: ({ row }) =>
-        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
-        // to build the toggle for expanding a row
-        row.canExpand ? (
-          <span
-            {...row.getToggleRowExpandedProps({
-              style: {
-                // We can even use the row.depth property
-                // and paddingLeft to indicate the depth
-                // of the row
-                paddingLeft: `${row.depth * 2}rem`,
-              },
-              className: 'toggle',
-            })}
-          >
-            {row.isExpanded ?
-              (<span class="arrow-down" />) :
-              (<span class="arrow-right" />)
-            }
-          </span>
-        ) : null,
-      width: 20,
-      disableResizing: true,
-    },
-    {
-      Header: formatMessage({id:'account_name'}),
-      accessor: 'name',
-      className: "account_name",
-    },
-    {
-      Header: formatMessage({id:'code'}),
-      accessor: 'code',
-      className: "code",
-    },
-    ...(balanceSheetQuery.display_columns_type === 'total') ? [
+  const { formatMessage } = useIntl();
+  const columns = useMemo(
+    () => [
       {
-        Header: formatMessage({id:'total'}),
-        accessor: 'balance.formatted_amount',
-        Cell: ({ cell }) => {
-          const row = cell.row.original;
-          if (row.total) {
-            return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
-          }
-          return '';          
-        },
-        className: "credit",
-      }
-    ] : [],
-    ...(balanceSheetQuery.display_columns_type === 'date_periods') ? 
-      (balanceSheetColumns.map((column, index) => ({
-        id: `date_period_${index}`,
-        Header: column,
-        accessor: (row) => {
-          if (row.total_periods && row.total_periods[index]) {
-            const amount = row.total_periods[index].formatted_amount;
-            return (<Money amount={amount} currency={'USD'} />);
-          }
-          return '';
-        },
-        width: 100,
-      })))
-    : [],
-  ], [balanceSheetQuery, balanceSheetColumns,formatMessage]);
-  
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'account_name',
+      },
+      {
+        Header: formatMessage({ id: 'code' }),
+        accessor: 'code',
+        className: 'code',
+      },
+      ...(balanceSheetQuery.display_columns_type === 'total'
+        ? [
+            {
+              Header: formatMessage({ id: 'total' }),
+              accessor: 'balance.formatted_amount',
+              Cell: ({ cell }) => {
+                const row = cell.row.original;
+                if (row.total) {
+                  return (
+                    <Money
+                      amount={row.total.formatted_amount}
+                      currency={'USD'}
+                    />
+                  );
+                }
+                return '';
+              },
+              className: 'credit',
+            },
+          ]
+        : []),
+      ...(balanceSheetQuery.display_columns_type === 'date_periods'
+        ? balanceSheetColumns.map((column, index) => ({
+            id: `date_period_${index}`,
+            Header: column,
+            accessor: (row) => {
+              if (row.total_periods && row.total_periods[index]) {
+                const amount = row.total_periods[index].formatted_amount;
+                return <Money amount={amount} currency={'USD'} />;
+              }
+              return '';
+            },
+            width: 100,
+          }))
+        : []),
+    ],
+    [balanceSheetQuery, balanceSheetColumns, formatMessage],
+  );
+
   const handleFetchData = useCallback(() => {
     onFetchData && onFetchData();
   }, [onFetchData]);
 
   // Calculates the default expanded rows of balance sheet table.
-  const expandedRows = useMemo(() => 
-    defaultExpanderReducer(balanceSheetAccounts, 1),
-    [balanceSheetAccounts]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(balanceSheetAccounts, 1),
+    [balanceSheetAccounts],
+  );
 
   return (
     <FinancialSheet
       companyName={organizationSettings.name}
-      sheetType={'Balance Sheet'}
+      sheetType={formatMessage({ id: 'balance_sheet' })}
       fromDate={balanceSheetQuery.from_date}
       toDate={balanceSheetQuery.to_date}
       basis={balanceSheetQuery.basis}
-      loading={loading}>
-      
+      loading={loading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={balanceSheetAccounts}
         onFetchData={handleFetchData}
         expanded={expandedRows}
-        expandSubRows={true} />
+        expandSubRows={true}
+      />
     </FinancialSheet>
   );
 }
@@ -153,13 +122,12 @@ const withBalanceSheetTable = connect(mapStateToProps);
 
 export default compose(
   withBalanceSheetTable,
-  withBalanceSheetDetail(({
-    balanceSheetAccounts,
-    balanceSheetColumns,
-    balanceSheetQuery }) => ({
+  withBalanceSheetDetail(
+    ({ balanceSheetAccounts, balanceSheetColumns, balanceSheetQuery }) => ({
       balanceSheetAccounts,
       balanceSheetColumns,
       balanceSheetQuery,
-    })),
+    }),
+  ),
   SettingsConnect,
-)(BalanceSheetTable);
+)(BalanceSheetTable);