fix: bugs in financial statements.

client/src/containers/FinancialStatements/Journal/Journal.js

@@ -15,13 +15,12 @@ import SettingsConnect from 'connectors/Settings.connect';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withJournalActions from './withJournalActions';
 
-
 function Journal({
   // #withJournalActions
   requestFetchJournalSheet,
 
   // #withDashboard
-  changePageTitle,  
+  changePageTitle,
 
   // #withPreferences
   organizationSettings,
@@ -29,76 +28,72 @@ function Journal({
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accural'
+    basis: 'accural',
   });
   const { formatMessage } = useIntl();
-  const [refetch, setRefetch] = useState(false);
 
   useEffect(() => {
-    changePageTitle(formatMessage({id:'journal_sheet'}));
-  }, [changePageTitle,formatMessage]);
+    changePageTitle(formatMessage({ id: 'journal_sheet' }));
+  }, [changePageTitle, formatMessage]);
 
-  const fetchHook = useQuery(['journal', filter],
+  const fetchHook = useQuery(
+    ['journal', filter],
     (key, query) => requestFetchJournalSheet(query),
-    { manual: true });
+    { manual: true },
+  );
 
   // Handle financial statement 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);
-  }, [fetchHook]);
+  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 });
+    },
+    [fetchHook],
+  );
 
-  const handlePrintClick = useCallback(() => {
+  const handlePrintClick = useCallback(() => {}, []);
 
-  }, []);
-
-  const handleExportClick = useCallback(() => {
-
-  }, []);
+  const handleExportClick = useCallback(() => {}, []);
 
   const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
-    setRefetch(true);
+    fetchHook.refetch({ force: true });
   }, []);
 
-  useEffect(() => {
-    if (refetch) {
-      fetchHook.refetch({ force: true });
-      setRefetch(false);
-    }
-  }, [refetch, fetchHook])
-
   return (
     <DashboardInsider>
       <JournalActionsBar
         onSubmitFilter={handleFilterSubmit}
         onPrintClick={handlePrintClick}
-        onExportClick={handleExportClick} />
+        onExportClick={handleExportClick}
+      />
 
       <DashboardPageContent>
         <div class="financial-statement financial-statement--journal">
-          <JournalHeader 
+          <JournalHeader
             pageFilter={filter}
-            onSubmitFilter={handleFilterSubmit} />
-          
+            onSubmitFilter={handleFilterSubmit}
+          />
+
           <div class="financial-statement__table">
             <JournalTable
               companyName={organizationSettings.name}
               journalQuery={filter}
-              onFetchData={handleFetchData} />
+              onFetchData={handleFetchData}
+            />
           </div>
         </div>
       </DashboardPageContent>
     </DashboardInsider>
-  )
+  );
 }
 
 export default compose(
   withDashboard,
   withJournalActions,
   SettingsConnect,
-)(Journal);
+)(Journal);

client/src/containers/FinancialStatements/Journal/JournalTable.js

@@ -1,20 +1,17 @@
 import React, { useCallback, useMemo } from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import moment from 'moment';
-import {  useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import {compose, defaultExpanderReducer} from 'utils';
+import { compose, defaultExpanderReducer } from 'utils';
 
 import Money from 'components/Money';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 
 import withJournal from './withJournal';
 
-
 function JournalSheetTable({
   // #withJournal
   journalSheetTableRows,
@@ -28,61 +25,80 @@ function JournalSheetTable({
   const { formatMessage } = useIntl();
 
   const rowTypeFilter = (rowType, value, types) => {
-    return (types.indexOf(rowType) === -1) ? '' : value;
+    return types.indexOf(rowType) === -1 ? '' : value;
   };
 
   const exceptRowTypes = (rowType, value, types) => {
-    return (types.indexOf(rowType) !== -1) ? '' : value;    
+    return types.indexOf(rowType) !== -1 ? '' : value;
   };
 
-  const columns = useMemo(() => [
-    {
-      Header: formatMessage({id:'date'}),
-      accessor: r => rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), ['first_entry']),
-      className: 'date',
-      width: 85,
-    },
-    {
-      Header: formatMessage({id:'transaction_type'}),
-      accessor: r => rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
-      className: "transaction_type",
-      width: 145,
-    },
-    {
-      Header: formatMessage({id:'num'}),
-      accessor: r => rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
-      className: 'reference_id',
-      width: 70,
-    },
-    {
-      Header: formatMessage({id:'description'}),
-      accessor: 'note',
-    },
-    {
-      Header: formatMessage({id:'acc_code'}),
-      accessor: 'account.code',
-      width: 120,
-      className: 'account_code',
-    },
-    {
-      Header: formatMessage({id:'account'}),
-      accessor: 'account.name',
-    },
-    {
-      Header: formatMessage({id:'credit'}),
-      accessor: r => exceptRowTypes(
-        r.rowType, (<Money amount={r.credit} currency={'USD'} />), ['space_entry']),
-    },
-    {
-      Header: formatMessage({id:'debit'}),
-      accessor: r => exceptRowTypes(
-        r.rowType, (<Money amount={r.debit} currency={'USD'} />), ['space_entry']),
-    },
-  ], [formatMessage]);
+  const columns = useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'date' }),
+        accessor: (r) =>
+          rowTypeFilter(r.rowType, moment(r.date).format('YYYY/MM/DD'), [
+            'first_entry',
+          ]),
+        className: 'date',
+        width: 85,
+      },
+      {
+        Header: formatMessage({ id: 'transaction_type' }),
+        accessor: (r) =>
+          rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
+        className: 'transaction_type',
+        width: 145,
+      },
+      {
+        Header: formatMessage({ id: 'num' }),
+        accessor: (r) =>
+          rowTypeFilter(r.rowType, r.reference_id, ['first_entry']),
+        className: 'reference_id',
+        width: 70,
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'note',
+      },
+      {
+        Header: formatMessage({ id: 'acc_code' }),
+        accessor: 'account.code',
+        width: 120,
+        className: 'account_code',
+      },
+      {
+        Header: formatMessage({ id: 'account' }),
+        accessor: 'account.name',
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        accessor: (r) =>
+          exceptRowTypes(
+            r.rowType,
+            <Money amount={r.credit} currency={'USD'} />,
+            ['space_entry'],
+          ),
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        accessor: (r) =>
+          exceptRowTypes(
+            r.rowType,
+            <Money amount={r.debit} currency={'USD'} />,
+            ['space_entry'],
+          ),
+      },
+    ],
+    [formatMessage],
+  );
 
-  const handleFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args)
-  }, [onFetchData]);
+  const handleFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
 
   // Default expanded rows of general journal table.
   const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
@@ -90,41 +106,45 @@ function JournalSheetTable({
   return (
     <FinancialSheet
       companyName={companyName}
-      sheetType={'Journal Sheet'}
+      sheetType={formatMessage({ id: 'journal_sheet' })}
       fromDate={journalSheetQuery.from_date}
       toDate={journalSheetQuery.to_date}
       name="journal"
-      loading={journalSheetLoading}>
- 
+      loading={journalSheetLoading}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={journalSheetTableRows}
         onFetchData={handleFetchData}
-        noResults={"This report does not contain any data between date period."}
-        expanded={expandedRows} />
+        noResults={formatMessage({
+          id: 'this_report_does_not_contain_any_data_between_date_period',
+        })}
+        expanded={expandedRows}
+      />
     </FinancialSheet>
   );
 }
 
-
 const mapStateToProps = (state, props) => {
   const { journalQuery } = props;
   return {
     journalIndex: getFinancialSheetIndexByQuery(
       state.financialStatements.journal.sheets,
       journalQuery,
-    ) 
+    ),
   };
-}
+};
 
 const withJournalTable = connect(mapStateToProps);
 
 export default compose(
   withJournalTable,
-  withJournal(({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
-    journalSheetTableRows,
-    journalSheetLoading,
-    journalSheetQuery,
-  })),
-)(JournalSheetTable);
+  withJournal(
+    ({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
+      journalSheetTableRows,
+      journalSheetLoading,
+      journalSheetQuery,
+    }),
+  ),
+)(JournalSheetTable);