diff --git a/src/products/queries.ts b/src/products/queries.ts index 4eab8904b..e042f7b0d 100644 --- a/src/products/queries.ts +++ b/src/products/queries.ts @@ -150,10 +150,9 @@ const productListQuery = gql` } } `; -export const TypedProductListQuery = TypedQuery< - ProductList, - ProductListVariables ->(productListQuery); +export const useProductListQuery = makeQuery( + productListQuery +); const countAllProductsQuery = gql` query CountAllProducts { @@ -288,7 +287,7 @@ const availableInGridAttributes = gql` } } `; -export const AvailableInGridAttributesQuery = TypedQuery< +export const useAvailableInGridAttributesQuery = makeQuery< GridAttributes, GridAttributesVariables >(availableInGridAttributes); diff --git a/src/products/views/ProductList/ProductList.tsx b/src/products/views/ProductList/ProductList.tsx index 0f55ed6c0..e25ca42eb 100644 --- a/src/products/views/ProductList/ProductList.tsx +++ b/src/products/views/ProductList/ProductList.tsx @@ -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 = ({ 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,345 +307,259 @@ export const ProductList: React.FC = ({ params }) => { } ); - function filterColumnIds(columns: ProductListColumns[]) { - return columns - .filter(isAttributeColumnValue) - .map(getAttributeIdFromColumnValue); - } + const { loadNextPage, loadPreviousPage, pageInfo } = paginate( + maybe(() => data.products.pageInfo), + paginationState, + params + ); return ( - - {attributes => ( - - {({ 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(); + <> + attributes.data.availableInGrid.edges.map(edge => edge.node), + [] + )} + currencySymbol={currencySymbol} + currentTab={currentTab} + defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]} + filterOpts={filterOpts} + gridAttributes={maybe( + () => attributes.data.grid.edges.map(edge => edge.node), + [] + )} + totalGridAttributes={maybe( + () => attributes.data.availableInGrid.totalCount, + 0 + )} + settings={settings} + loading={attributes.loading} + hasMore={maybe( + () => attributes.data.availableInGrid.pageInfo.hasNextPage, + false + )} + onAdd={() => navigate(productAddUrl)} + disabled={loading} + products={maybe(() => data.products.edges.map(edge => edge.node))} + onFetchMore={() => + attributes.loadMore( + (prev, next) => { + if ( + prev.availableInGrid.pageInfo.endCursor === + next.availableInGrid.pageInfo.endCursor + ) { + return prev; } - }; - - const handleBulkPublish = (data: productBulkPublish) => { - if (data.productBulkPublish.errors.length === 0) { - closeModal(); - notify({ - status: "success", - text: intl.formatMessage(commonMessages.savedChanges) - }); - reset(); - refetch(); + return { + ...prev, + availableInGrid: { + ...prev.availableInGrid, + edges: [ + ...prev.availableInGrid.edges, + ...next.availableInGrid.edges + ], + pageInfo: next.availableInGrid.pageInfo + } + }; + }, + { + after: attributes.data.availableInGrid.pageInfo.endCursor + } + ) + } + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + pageInfo={pageInfo} + onRowClick={id => () => navigate(productUrl(id))} + onAll={resetFilters} + toolbar={ + <> + - - - openModal("delete", { - ids: listElements - }) - } - > - - - - } - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - onSearchChange={handleSearchChange} - onFilterChange={changeFilters} - onTabSave={() => openModal("save-search")} - onTabDelete={() => openModal("delete-search")} - onTabChange={handleTabChange} - initialSearch={params.query || ""} - tabs={getFilterTabs().map(tab => tab.name)} - onExport={() => openModal("export")} - /> - - productBulkDelete({ - variables: { ids: params.ids } - }) - } - title={intl.formatMessage({ - defaultMessage: "Delete Products", - description: "dialog header" - })} - variant="delete" - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - - productBulkPublish({ - variables: { - ids: params.ids, - isPublished: true - } - }) - } - title={intl.formatMessage({ - defaultMessage: "Publish Products", - description: "dialog header" - })} - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - - productBulkPublish({ - variables: { - ids: params.ids, - isPublished: false - } - }) - } - title={intl.formatMessage({ - defaultMessage: "Unpublish Products", - description: "dialog header" - })} - > - - params.ids.length), - displayQuantity: ( - - {maybe(() => params.ids.length)} - - ) - }} - /> - - - 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 || [] - } - productQuantity={{ - all: countAllProducts.data?.products.totalCount, - filter: data?.products.totalCount - }} - selectedProducts={listElements.length} - warehouses={ - warehouses.data?.warehouses.edges.map( - edge => edge.node - ) || [] - } - onClose={closeModal} - onSubmit={data => - exportProducts({ - variables: { - input: { - ...data, - filter, - ids: listElements - } - } - }) - } - /> - - tabs[currentTab - 1].name, - "..." - )} - /> - - )} - - )} - - ); - }} - - )} - + > + + + + + openModal("delete", { + ids: listElements + }) + } + > + + + + } + isChecked={isSelected} + selected={listElements.length} + toggle={toggle} + toggleAll={toggleAll} + onSearchChange={handleSearchChange} + onFilterChange={changeFilters} + onTabSave={() => openModal("save-search")} + onTabDelete={() => openModal("delete-search")} + onTabChange={handleTabChange} + initialSearch={params.query || ""} + tabs={getFilterTabs().map(tab => tab.name)} + onExport={() => openModal("export")} + /> + + productBulkDelete({ + variables: { ids: params.ids } + }) + } + title={intl.formatMessage({ + defaultMessage: "Delete Products", + description: "dialog header" + })} + variant="delete" + > + + params.ids.length), + displayQuantity: {maybe(() => params.ids.length)} + }} + /> + + + + productBulkPublish({ + variables: { + ids: params.ids, + isPublished: true + } + }) + } + title={intl.formatMessage({ + defaultMessage: "Publish Products", + description: "dialog header" + })} + > + + params.ids.length), + displayQuantity: {maybe(() => params.ids.length)} + }} + /> + + + + productBulkPublish({ + variables: { + ids: params.ids, + isPublished: false + } + }) + } + title={intl.formatMessage({ + defaultMessage: "Unpublish Products", + description: "dialog header" + })} + > + + params.ids.length), + displayQuantity: {maybe(() => params.ids.length)} + }} + /> + + + 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 || []} + productQuantity={{ + all: countAllProducts.data?.products.totalCount, + filter: data?.products.totalCount + }} + selectedProducts={listElements.length} + warehouses={ + warehouses.data?.warehouses.edges.map(edge => edge.node) || [] + } + onClose={closeModal} + onSubmit={data => + exportProducts({ + variables: { + input: { + ...data, + filter, + ids: listElements + } + } + }) + } + /> + + tabs[currentTab - 1].name, "...")} + /> + ); }; export default ProductList;