djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use query hooks in product list

Browse source
This commit is contained in:
dominik-zeglen 2020-08-24 12:10:48 +02:00
parent 7726bacb77
commit 4df1c71a79
2 changed files with 305 additions and 347 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/products/queries.ts
View file

@ -150,10 +150,9 @@ const productListQuery = gql`
}
}
`;
export const TypedProductListQuery = TypedQuery<
ProductList,
ProductListVariables
>(productListQuery);
export const useProductListQuery = makeQuery<ProductList, ProductListVariables>(
productListQuery
);
const countAllProductsQuery = gql`
query CountAllProducts {
@ -288,7 +287,7 @@ const availableInGridAttributes = gql`
}
}
`;
export const AvailableInGridAttributesQuery = TypedQuery<
export const useAvailableInGridAttributesQuery = makeQuery<
GridAttributes,
GridAttributesVariables
>(availableInGridAttributes);

177
src/products/views/ProductList/ProductList.tsx
View file

@ -45,18 +45,16 @@ import { FormattedMessage, useIntl } from "react-intl";
import ProductListPage from "../../components/ProductListPage";
import {
TypedProductBulkDeleteMutation,
TypedProductBulkPublishMutation,
useProductBulkDeleteMutation,
useProductBulkPublishMutation,
useProductExport
} from "../../mutations";
import {
AvailableInGridAttributesQuery,
TypedProductListQuery,
useAvailableInGridAttributesQuery,
useCountAllProducts,
useInitialProductFilterDataQuery
useInitialProductFilterDataQuery,
useProductListQuery
} from "../../queries";
import { productBulkDelete } from "../../types/productBulkDelete";
import { productBulkPublish } from "../../types/productBulkPublish";
import {
productAddUrl,
productListUrl,
@ -235,6 +233,53 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
}),
[params, settings.rowNumber]
);
const { data, loading, refetch } = useProductListQuery({
displayLoader: true,
variables: queryVariables
});
function filterColumnIds(columns: ProductListColumns[]) {
return columns
.filter(isAttributeColumnValue)
.map(getAttributeIdFromColumnValue);
}
const attributes = useAvailableInGridAttributesQuery({
variables: { first: 6, ids: filterColumnIds(settings.columns) }
});
const [
productBulkDelete,
productBulkDeleteOpts
] = useProductBulkDeleteMutation({
onCompleted: data => {
if (data.productBulkDelete.errors.length === 0) {
closeModal();
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
reset();
refetch();
}
}
});
const [
productBulkPublish,
productBulkPublishOpts
] = useProductBulkPublishMutation({
onCompleted: data => {
if (data.productBulkPublish.errors.length === 0) {
closeModal();
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
reset();
refetch();
}
}
});
const filterOpts = getFilterOpts(
params,
@ -262,56 +307,13 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
}
);
function filterColumnIds(columns: ProductListColumns[]) {
return columns
.filter(isAttributeColumnValue)
.map(getAttributeIdFromColumnValue);
}
return (
<AvailableInGridAttributesQuery
variables={{ first: 6, ids: filterColumnIds(settings.columns) }}
>
{attributes => (
<TypedProductListQuery displayLoader variables={queryVariables}>
{({ data, loading, refetch }) => {
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.products.pageInfo),
paginationState,
params
);
const handleBulkDelete = (data: productBulkDelete) => {
if (data.productBulkDelete.errors.length === 0) {
closeModal();
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
reset();
refetch();
}
};
const handleBulkPublish = (data: productBulkPublish) => {
if (data.productBulkPublish.errors.length === 0) {
closeModal();
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
reset();
refetch();
}
};
return (
<TypedProductBulkDeleteMutation onCompleted={handleBulkDelete}>
{(productBulkDelete, productBulkDeleteOpts) => (
<TypedProductBulkPublishMutation
onCompleted={handleBulkPublish}
>
{(productBulkPublish, productBulkPublishOpts) => (
<>
<ProductListPage
activeAttributeSortId={params.attributeId}
@ -321,21 +323,15 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
}}
onSort={handleSort}
availableInGridAttributes={maybe(
() =>
attributes.data.availableInGrid.edges.map(
edge => edge.node
),
() => attributes.data.availableInGrid.edges.map(edge => edge.node),
[]
)}
currencySymbol={currencySymbol}
currentTab={currentTab}
defaultSettings={
defaultListSettings[ListViews.PRODUCT_LIST]
}
defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]}
filterOpts={filterOpts}
gridAttributes={maybe(
() =>
attributes.data.grid.edges.map(edge => edge.node),
() => attributes.data.grid.edges.map(edge => edge.node),
[]
)}
totalGridAttributes={maybe(
@ -345,16 +341,12 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
settings={settings}
loading={attributes.loading}
hasMore={maybe(
() =>
attributes.data.availableInGrid.pageInfo
.hasNextPage,
() => attributes.data.availableInGrid.pageInfo.hasNextPage,
false
)}
onAdd={() => navigate(productAddUrl)}
disabled={loading}
products={maybe(() =>
data.products.edges.map(edge => edge.node)
)}
products={maybe(() => data.products.edges.map(edge => edge.node))}
onFetchMore={() =>
attributes.loadMore(
(prev, next) => {
@ -377,9 +369,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
};
},
{
after:
attributes.data.availableInGrid.pageInfo
.endCursor
after: attributes.data.availableInGrid.pageInfo.endCursor
}
)
}
@ -463,11 +453,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
}}
/>
</DialogContentText>
@ -495,11 +481,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
}}
/>
</DialogContentText>
@ -527,40 +509,29 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
}}
/>
</DialogContentText>
</ActionDialog>
<ProductExportDialog
attributes={(
searchAttributes.result.data?.search.edges || []
).map(edge => edge.node)}
hasMore={
searchAttributes.result.data?.search.pageInfo
.hasNextPage
}
attributes={(searchAttributes.result.data?.search.edges || []).map(
edge => edge.node
)}
hasMore={searchAttributes.result.data?.search.pageInfo.hasNextPage}
loading={searchAttributes.result.loading}
onFetch={searchAttributes.search}
onFetchMore={searchAttributes.loadMore}
open={params.action === "export"}
confirmButtonState={exportProductsOpts.status}
errors={
exportProductsOpts.data?.exportProducts.errors || []
}
errors={exportProductsOpts.data?.exportProducts.errors || []}
productQuantity={{
all: countAllProducts.data?.products.totalCount,
filter: data?.products.totalCount
}}
selectedProducts={listElements.length}
warehouses={
warehouses.data?.warehouses.edges.map(
edge => edge.node
) || []
warehouses.data?.warehouses.edges.map(edge => edge.node) || []
}
onClose={closeModal}
onSubmit={data =>
@ -586,21 +557,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleFilterTabDelete}
tabName={maybe(
() => tabs[currentTab - 1].name,
"..."
)}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
)}
</TypedProductBulkPublishMutation>
)}
</TypedProductBulkDeleteMutation>
);
}}
</TypedProductListQuery>
)}
</AvailableInGridAttributesQuery>
);
};
export default ProductList;