QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 06:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring: migrating to react-query to manage service-side state.

Browse Source
This commit is contained in:
a.bouhuolia
2021-02-07 08:10:21 +02:00
parent e093be0663
commit adac2386bb
284 changed files with 8255 additions and 6610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
client/src/containers/Items/ItemsList.js
View File

@@ -1,96 +1,36 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import { useQuery } from 'react-query';
import { FormattedMessage as T, useIntl } from 'react-intl';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import React from 'react';
import { compose } from 'utils';
import 'style/pages/Items/List.scss';
import ItemsViewPage from './ItemsViewPage';
import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
import ItemsActionsBar from './ItemsActionsBar';
import ItemsAlerts from './ItemsAlerts';
import { ItemsListProvider } from './ItemsListProvider';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import withItems from 'containers/Items/withItems';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withItemsActions from 'containers/Items/withItemsActions';
import withViewsActions from 'containers/Views/withViewsActions';
import 'style/pages/Items/List.scss';
/**
* Items list.
*/
function ItemsList({
// #withDashboardActions
changePageTitle,
// #withResourceActions
requestFetchResourceViews,
requestFetchResourceFields,
// #withItems
itemsTableQuery,
// #withItemsActions
requestFetchItems,
addItemsTableQueries,
itemsTableQuery
}) {
const { formatMessage } = useIntl();
useEffect(() => {
changePageTitle(formatMessage({ id: 'items_list' }));
}, [changePageTitle, formatMessage]);
// Handle fetching the resource views.
const fetchResourceViews = useQuery(
['resource-views', 'items'],
(key, resourceName) => requestFetchResourceViews(resourceName),
);
// Handle fetching the resource fields.
const fetchResourceFields = useQuery(
['resource-fields', 'items'],
(key, resourceName) => requestFetchResourceFields(resourceName),
);
// Handle fetching the items table based on the given query.
const fetchItems = useQuery(['items-table', itemsTableQuery], (key, _query) =>
requestFetchItems({ ..._query }),
);
// Handle filter change to re-fetch the items.
const handleFilterChanged = useCallback(
(filterConditions) => {
addItemsTableQueries({
filter_roles: filterConditions || '',
});
},
[addItemsTableQueries],
);
return (
<DashboardInsider
loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
name={'items-list'}
>
<ItemsActionsBar onFilterChanged={handleFilterChanged} />
<ItemsListProvider query={itemsTableQuery}>
<ItemsActionsBar />
<DashboardPageContent>
<ItemsViewPage />
</DashboardPageContent>
<ItemsAlerts />
</DashboardInsider>
</ItemsListProvider>
);
}
export default compose(
withResourceActions,
withDashboardActions,
withItemsActions,
withViewsActions,
withItems(({ itemsTableQuery }) => ({
itemsTableQuery,
})),
withItems(({ itemsTableQuery }) => ({ itemsTableQuery })),
)(ItemsList);