-
@@ -238,7 +251,7 @@ const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'item-category-form');
return {
- name: 'account-form',
+ name: 'item-category-form',
payload: {action: 'new', id: null, ...dialogPayload},
itemCategoryId: dialogPayload?.id || null,
@@ -248,10 +261,12 @@ const mapStateToProps = (state, props) => {
const withItemCategoryDialog = connect(mapStateToProps);
export default compose(
+ withItemCategoryDialog,
DialogConnect,
DialogReduxConnect,
- withItemCategoryDialog,
withItemCategoryDetail,
- withItemCategories,
+ withItemCategories(({ categoriesList }) => ({
+ categoriesList
+ })),
withItemCategoriesActions
)(ItemCategoryDialog);
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
index b40228332..ad0f3408b 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -1,23 +1,34 @@
import React, {useEffect, useMemo, useCallback, useState} from 'react';
-import DashboardConnect from 'connectors/Dashboard.connector';
+
import {compose} from 'utils';
-import useAsync from 'hooks/async';
-import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
-import {useIntl} from 'react-intl';
+import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
+import moment from 'moment';
+
import BalanceSheetHeader from './BalanceSheetHeader';
import BalanceSheetTable from './BalanceSheetTable';
-import moment from 'moment';
+
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
import SettingsConnect from 'connectors/Settings.connect';
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withBalanceSheetActions from './withBalanceSheetActions';
+import withBalanceSheetDetail from './withBalanceSheetDetail';
+
+
function BalanceSheet({
- fetchBalanceSheet,
+ // #withDashboard
changePageTitle,
- balanceSheetLoading,
- getBalanceSheetIndex,
- getBalanceSheet,
+
+ // #withBalanceSheetActions
+ fetchBalanceSheet,
+
+ // #withBalanceSheetDetail
+ balanceSheetLoading,
+
+ // #withPreferences
organizationSettings
}) {
const intl = useIntl();
@@ -30,24 +41,18 @@ function BalanceSheet({
none_zero: false,
});
- const fetchHook = useAsync(async (query = filter) => {
- await Promise.all([
- fetchBalanceSheet({ ...query }),
- ]);
- }, false);
+ const fetchHook = useQuery(['balance-sheet', filter],
+ (key, query) => { fetchBalanceSheet({ ...query }); });
// Handle fetch the data of balance sheet.
- const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
+ const handleFetchData = useCallback(() => {
+ fetchHook.refetch();
+ }, [fetchHook]);
useEffect(() => {
changePageTitle('Balance Sheet');
}, []);
- // Retrieve balance sheet index by the given filter query.
- const balanceSheetIndex = useMemo(() =>
- getBalanceSheetIndex(filter),
- [filter, getBalanceSheetIndex]);
-
// Handle re-fetch balance sheet after filter change.
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
@@ -56,8 +61,7 @@ function BalanceSheet({
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter({ ..._filter });
- fetchHook.execute(_filter);
- }, [setFilter, fetchHook]);
+ }, [setFilter]);
return (
@@ -73,7 +77,7 @@ function BalanceSheet({
@@ -83,7 +87,11 @@ function BalanceSheet({
}
export default compose(
- DashboardConnect,
- BalanceSheetConnect,
+ withDashboard,
+ withBalanceSheetActions,
+ withBalanceSheetDetail(({ balanceSheetLoading }) => ({
+ balanceSheetLoading,
+ })),
+ // BalanceSheetConnect,
SettingsConnect,
)(BalanceSheet);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
index 33fb699f9..8e82e57c2 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -1,23 +1,30 @@
-import React, {useMemo, useState, useCallback, useEffect} from 'react';
-import moment from 'moment';
+import React, {useMemo, useCallback } from 'react';
+import { connect } from 'react-redux';
+
import Money from 'components/Money';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
-import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
-import BalanceSheetTableConnect from 'connectors/BalanceSheetTable.connect';
-import {
- compose,
- defaultExpanderReducer,
-} from 'utils';
+
import SettingsConnect from 'connectors/Settings.connect';
+import withBalanceSheetDetail from './withBalanceSheetDetail';
+import {
+ getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+import { compose, defaultExpanderReducer } from 'utils';
+
function BalanceSheetTable({
+ // #withPreferences
organizationSettings,
+
+ // #withBalanceSheetDetail
balanceSheetAccounts,
balanceSheetColumns,
balanceSheetQuery,
+
+ // #ownProps
onFetchData,
- asDate,
loading,
}) {
const columns = useMemo(() => [
@@ -130,8 +137,27 @@ function BalanceSheetTable({
);
}
+const mapStateToProps = (state, props) => {
+ const { balanceSheetQuery } = props;
+ return {
+ balanceSheetIndex: getFinancialSheetIndexByQuery(
+ state.financialStatements.balanceSheet.sheets,
+ balanceSheetQuery,
+ ),
+ };
+};
+
+const withBalanceSheetTable = connect(mapStateToProps);
+
export default compose(
- BalanceSheetConnect,
- BalanceSheetTableConnect,
+ withBalanceSheetTable,
+ withBalanceSheetDetail(({
+ balanceSheetAccounts,
+ balanceSheetColumns,
+ balanceSheetQuery }) => ({
+ balanceSheetAccounts,
+ balanceSheetColumns,
+ balanceSheetQuery,
+ })),
SettingsConnect,
)(BalanceSheetTable);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
new file mode 100644
index 000000000..9f435df40
--- /dev/null
+++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import {
+ fetchBalanceSheet,
+} from 'store/financialStatement/financialStatements.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+ fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
+});
+
+export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
new file mode 100644
index 000000000..8482f09b4
--- /dev/null
+++ b/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import {
+ getFinancialSheet,
+ getFinancialSheetAccounts,
+ getFinancialSheetColumns,
+ getFinancialSheetQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export default (mapState) => {
+ const mapStateToProps = (state, props) => {
+ const { balanceSheetIndex } = props;
+ const mapped = {
+ balanceSheet: getFinancialSheet(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+ balanceSheetAccounts: getFinancialSheetAccounts(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+ balanceSheetColumns: getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+ balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+ balanceSheetLoading: state.financialStatements.balanceSheet.loading,
+ };
+ return mapState ? mapState(mapped, state, props) : mapped;
+ };
+
+ return connect(mapStateToProps);
+}
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/containers/FinancialStatements/Journal/Journal.js b/client/src/containers/FinancialStatements/Journal/Journal.js
index 8678d432f..58906df36 100644
--- a/client/src/containers/FinancialStatements/Journal/Journal.js
+++ b/client/src/containers/FinancialStatements/Journal/Journal.js
@@ -1,23 +1,32 @@
-import React, {useState, useCallback, useEffect, useMemo} from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
+import { useQuery } from 'react-query';
import {compose} from 'utils';
-import JournalConnect from 'connectors/Journal.connect';
-import JournalHeader from 'containers/FinancialStatements/Journal/JournalHeader';
-import useAsync from 'hooks/async';
-import {useIntl} from 'react-intl';
+
import moment from 'moment';
import JournalTable from './JournalTable';
-import DashboardConnect from 'connectors/Dashboard.connector';
+
+import JournalHeader from './JournalHeader';
import JournalActionsBar from './JournalActionsBar';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import SettingsConnect from 'connectors/Settings.connect';
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withJournal from './withJournal';
+import withJournalActions from './withJournalActions';
+
+
function Journal({
- fetchJournalSheet,
- getJournalSheet,
- getJournalSheetIndex,
- changePageTitle,
+ // #withJournalActions
+ requestFetchJournalSheet,
+
+ // #withDashboard
+ changePageTitle,
+
+ // #withJournal
journalSheetLoading,
+
+ // #withPreferences
organizationSettings,
}) {
const [filter, setFilter] = useState({
@@ -30,21 +39,8 @@ function Journal({
changePageTitle('Journal Sheet');
}, []);
- const fetchHook = useAsync((query = filter) => {
- return Promise.all([
- fetchJournalSheet(query),
- ]);
- }, false);
-
- // Retrieve journal sheet index by the given filter query.
- const journalSheetIndex = useMemo(() =>
- getJournalSheetIndex(filter),
- [getJournalSheetIndex, filter]);
-
- // Retrieve journal sheet by the given sheet index.
- const journalSheet = useMemo(() =>
- getJournalSheet(journalSheetIndex),
- [getJournalSheet, journalSheetIndex]);
+ const fetchHook = useQuery(['journal', filter],
+ (key, query) => { requestFetchJournalSheet(query); });
// Handle financial statement filter change.
const handleFilterSubmit = useCallback((filter) => {
@@ -54,7 +50,6 @@ function Journal({
to_date: moment(filter.to_date).format('YYYY-MM-DD'),
};
setFilter(_filter);
- fetchHook.execute(_filter);
}, [fetchHook]);
const handlePrintClick = useCallback(() => {
@@ -66,7 +61,7 @@ function Journal({
}, []);
const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
- fetchHook.execute();
+ fetchHook.refetch();
}, [fetchHook]);
return (
@@ -85,12 +80,9 @@ function Journal({