fix: bugs in financial statements.

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -38,7 +38,6 @@ function GeneralLedger({
     basis: 'accural',
     none_zero: true,
   });
-  const [refetch, setRefetch] = useState(false);
 
   // Change page title of the dashboard.
   useEffect(() => {
@@ -52,17 +51,9 @@ function GeneralLedger({
     (key, query) => fetchGeneralLedger(query),
     { manual: true });
 
-  // Refetch general ledger sheet effect.
-  useEffect(() => {
-    if (refetch) {
-      fetchSheet.refetch({ force: true });
-      setRefetch(false);
-    }
-  }, [fetchSheet, refetch]);
-
   // Handle fetch data of trial balance table.
   const handleFetchData = useCallback(() => {
-    setRefetch(true);
+    fetchSheet.refetch({ force: true });
   }, []);
   
   // Handle financial statement filter change.
@@ -73,7 +64,7 @@ function GeneralLedger({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(parsedFilter);
-    setRefetch(true);
+    fetchSheet.refetch({ force: true });
   }, [setFilter]);
 
   const handleFilterChanged = () => { };

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -1,22 +1,16 @@
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import moment from 'moment';
 import { connect } from 'react-redux';
-import {
-  defaultExpanderReducer,
-  compose
-} from 'utils';
+import { defaultExpanderReducer, compose } from 'utils';
 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 withGeneralLedger from './withGeneralLedger';
 
-
 const ROW_TYPE = {
   CLOSING_BALANCE: 'closing_balance',
   OPENING_BALANCE: 'opening_balance',
@@ -32,121 +26,97 @@ function GeneralLedgerTable({
   generalLedgerTableRows,
   generalLedgerQuery,
 }) {
-  
+  const { formatMessage } = useIntl();
+
   // Account name column accessor.
-  const accountNameAccessor = useCallback((row) => {
-    switch (row.rowType) {
-      case ROW_TYPE.OPENING_BALANCE:
-        return 'Opening Balance';
-      case ROW_TYPE.CLOSING_BALANCE:
-        return 'Closing Balance';
-      default:
-        return row.name;
-    }
-  }, [ROW_TYPE]);
+  const accountNameAccessor = useCallback(
+    (row) => {
+      switch (row.rowType) {
+        case ROW_TYPE.OPENING_BALANCE:
+          return 'Opening Balance';
+        case ROW_TYPE.CLOSING_BALANCE:
+          return 'Closing Balance';
+        default:
+          return row.name;
+      }
+    },
+    [ROW_TYPE],
+  );
 
   // Date accessor.
-  const dateAccessor = useCallback((row) => {
-    const TYPES = [
-      ROW_TYPE.OPENING_BALANCE,
-      ROW_TYPE.CLOSING_BALANCE,
-      ROW_TYPE.TRANSACTION];
+  const dateAccessor = useCallback(
+    (row) => {
+      const TYPES = [
+        ROW_TYPE.OPENING_BALANCE,
+        ROW_TYPE.CLOSING_BALANCE,
+        ROW_TYPE.TRANSACTION,
+      ];
 
-    return (TYPES.indexOf(row.rowType) !== -1)
-      ? moment(row.date).format('DD-MM-YYYY') : '';
-  }, [moment, ROW_TYPE]);
+      return TYPES.indexOf(row.rowType) !== -1
+        ? moment(row.date).format('DD-MM-YYYY')
+        : '';
+    },
+    [moment, ROW_TYPE],
+  );
 
   // Amount cell
   const amountCell = useCallback(({ cell }) => {
-    const transaction = cell.row.original
+    const transaction = cell.row.original;
 
     if (transaction.rowType === ROW_TYPE.ACCOUNT) {
-      return (!cell.row.isExpanded) ?
-        (<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
+      return !cell.row.isExpanded ? (
+        <Money amount={transaction.closing.amount} currency={'USD'} />
+      ) : (
+        ''
+      );
     }
-    return (<Money amount={transaction.amount} currency={"USD"} />);
+    return <Money amount={transaction.amount} currency={'USD'} />;
   }, []);
 
   const referenceLink = useCallback((row) => {
-    return (<a href="">{row.referenceId}</a>);
+    return <a href="">{row.referenceId}</a>;
   });
-  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: accountNameAccessor,
-      className: "name",
-    },
-    {
-      Header: formatMessage({id:'date'}),
-      accessor: dateAccessor,
-      className: "date",
-    },
-    {
-      Header: formatMessage({id:'transaction_type'}),
-      accessor: 'referenceType',
-      className: 'transaction_type',
-    },
-    {
-      Header: formatMessage({id:'trans_num'}),
-      accessor: referenceLink,
-      className: 'transaction_number'
-    },
-    {
-      Header: formatMessage({id:'description'}),
-      accessor: 'note',
-      className: 'description',
-    },
-    {
-      Header: formatMessage({id:'amount'}),
-      Cell: amountCell,
-      className: 'amount'
-    },
-    {
-      Header: formatMessage({id:'balance'}),
-      Cell: amountCell,
-      className: 'balance',
-    },
-  ], []);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: accountNameAccessor,
+        className: 'name',
+      },
+      {
+        Header: formatMessage({ id: 'date' }),
+        accessor: dateAccessor,
+        className: 'date',
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: 'referenceType',
+        className: 'transaction_type',
+      },
+      {
+        Header: formatMessage({ id: 'trans_num' }),
+        accessor: referenceLink,
+        className: 'transaction_number',
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'note',
+        className: 'description',
+      },
+      {
+        Header: formatMessage({ id: 'amount' }),
+        Cell: amountCell,
+        className: 'amount',
+      },
+      {
+        Header: formatMessage({ id: 'balance' }),
+        Cell: amountCell,
+        className: 'balance',
+      },
+    ],
+    [],
+  );
 
   const handleFetchData = useCallback(() => {
     onFetchData && onFetchData();
@@ -155,23 +125,25 @@ function GeneralLedgerTable({
   // Default expanded rows of general ledger table.
   const expandedRows = useMemo(
     () => defaultExpanderReducer(generalLedgerTableRows, 1),
-    [generalLedgerTableRows]);
+    [generalLedgerTableRows],
+  );
 
-  const rowClassNames = (row) => ([
-    `row-type--${row.original.rowType}`,
-  ]);
+  const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
   return (
     <FinancialSheet
       companyName={companyName}
-      sheetType={'General Ledger Sheet'}
+      sheetType={formatMessage({ id: 'general_ledger_sheet' })}
       fromDate={generalLedgerQuery.from_date}
       toDate={generalLedgerQuery.to_date}
       name="general-ledger"
-      loading={generalLedgerSheetLoading}>
-
+      loading={generalLedgerSheetLoading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
+        noResults={formatMessage({
+          id: 'this_report_does_not_contain_any_data_between_date_period',
+        })}
         columns={columns}
         data={generalLedgerTableRows}
         onFetchData={handleFetchData}
@@ -181,9 +153,10 @@ function GeneralLedgerTable({
         fixedItemSize={37}
         fixedSizeHeight={1000}
         expandable={true}
-        expandToggleColumn={1} />
+        expandToggleColumn={1}
+      />
     </FinancialSheet>
-  ); 
+  );
 }
 
 const mapStateToProps = (state, props) => {
@@ -201,13 +174,15 @@ const withGeneralLedgerTable = connect(mapStateToProps);
 
 export default compose(
   withGeneralLedgerTable,
-  withGeneralLedger(({
-    generalLedgerTableRows,
-    generalLedgerSheetLoading,
-    generalLedgerQuery,
-  }) => ({
-    generalLedgerTableRows,
-    generalLedgerSheetLoading,
-    generalLedgerQuery
-  })),
+  withGeneralLedger(
+    ({
+      generalLedgerTableRows,
+      generalLedgerSheetLoading,
+      generalLedgerQuery,
+    }) => ({
+      generalLedgerTableRows,
+      generalLedgerSheetLoading,
+      generalLedgerQuery,
+    }),
+  ),
 )(GeneralLedgerTable);