diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index cdd9ac40680..1333309683d 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx @@ -17,6 +17,7 @@ import { CollectionDetailsQuery, useCollectionAssignProductMutation, useCollectionProductsQuery, + useReorderProductsInCollectionMutation, useUnassignCollectionProductMutation, } from "@dashboard/graphql"; import useBulkActions from "@dashboard/hooks/useBulkActions"; @@ -65,6 +66,8 @@ const CollectionProducts: React.FC = ({ const [paginationState, setPaginationState] = useLocalPaginationState(numberOfRows); const notify = useNotifier(); + const [reorder, reorderData] = useReorderProductsInCollectionMutation(); + const [assignProduct, assignProductOpts] = useCollectionAssignProductMutation({ onCompleted: data => { if (data.collectionAddProducts?.errors.length === 0) { @@ -134,7 +137,11 @@ const CollectionProducts: React.FC = ({ if (productIds.length > 0) { await assignProduct({ - variables: { ...baseVariables, productIds }, + variables: { + ...baseVariables, + productIds, + moves: productIds.map(id => ({ productId: id, sortOrder: 0 })), + }, }); } diff --git a/src/collections/components/CollectionProducts/useProductReorder.ts b/src/collections/components/CollectionProducts/useProductReorder.ts index 1376cb0653d..133c2f80c5d 100644 --- a/src/collections/components/CollectionProducts/useProductReorder.ts +++ b/src/collections/components/CollectionProducts/useProductReorder.ts @@ -26,7 +26,7 @@ export const useProductReorder = ({ paginationState }: ProductReorderProps) => { moves: [ { productId, - sortOrder: shift, + sortOrder: -shift, }, ], ...paginationState, diff --git a/src/collections/mutations.ts b/src/collections/mutations.ts index 09ee4cc4c42..ba828c98b0b 100644 --- a/src/collections/mutations.ts +++ b/src/collections/mutations.ts @@ -13,16 +13,35 @@ export const collectionUpdate = gql` } `; +/* + The mutation below has two simultaneous mutations: + - collectionAddProducts, for adding products to the collection + - collectionReorderProducts, for resetting its reorder position + + The collectionReorderProducts is used here as a workaround due to issues on the API. + It does the reorder by moving product by 0, which sets the initial reorder position. + + Additionally, collectionAddProducts gets only the errors as requested field, + while collectionReorderProducts takes the desired response (products and collection id) - this is + intentional as we are interested only in the response from reorder mutation, and + only that will invalidate the apollo cache (because of request collection id presence, required for cache key) +*/ export const assignCollectionProduct = gql` mutation CollectionAssignProduct( $collectionId: ID! $productIds: [ID!]! + $moves: [MoveProductInput!]! $first: Int $after: String $last: Int $before: String ) { collectionAddProducts(collectionId: $collectionId, products: $productIds) { + errors { + ...CollectionError + } + } + collectionReorderProducts(collectionId: $collectionId, moves: $moves) { collection { id products( @@ -30,7 +49,7 @@ export const assignCollectionProduct = gql` after: $after before: $before last: $last - sortBy: { field: COLLECTION, direction: DESC } + sortBy: { field: COLLECTION, direction: ASC } ) { edges { node { @@ -46,7 +65,7 @@ export const assignCollectionProduct = gql` } } errors { - ...CollectionError + message } } } @@ -92,7 +111,7 @@ export const unassignCollectionProduct = gql` after: $after before: $before last: $last - sortBy: { field: COLLECTION, direction: DESC } + sortBy: { field: COLLECTION, direction: ASC } ) { edges { node { @@ -151,7 +170,7 @@ export const reorderProductsInCollection = gql` after: $after before: $before last: $last - sortBy: { field: COLLECTION, direction: DESC } + sortBy: { field: COLLECTION, direction: ASC } ) { edges { node { diff --git a/src/collections/queries.ts b/src/collections/queries.ts index d5bc13604aa..90e3f427ade 100644 --- a/src/collections/queries.ts +++ b/src/collections/queries.ts @@ -54,7 +54,7 @@ export const collectionProducts = gql` after: $after before: $before last: $last - sortBy: { field: COLLECTION, direction: DESC } + sortBy: { field: COLLECTION, direction: ASC } ) { edges { node { diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts index d6956df139b..238c0d38f21 100644 --- a/src/graphql/hooks.generated.ts +++ b/src/graphql/hooks.generated.ts @@ -5420,8 +5420,13 @@ export type CollectionUpdateMutationHookResult = ReturnType; export type CollectionUpdateMutationOptions = Apollo.BaseMutationOptions; export const CollectionAssignProductDocument = gql` - mutation CollectionAssignProduct($collectionId: ID!, $productIds: [ID!]!, $first: Int, $after: String, $last: Int, $before: String) { + mutation CollectionAssignProduct($collectionId: ID!, $productIds: [ID!]!, $moves: [MoveProductInput!]!, $first: Int, $after: String, $last: Int, $before: String) { collectionAddProducts(collectionId: $collectionId, products: $productIds) { + errors { + ...CollectionError + } + } + collectionReorderProducts(collectionId: $collectionId, moves: $moves) { collection { id products( @@ -5429,7 +5434,7 @@ export const CollectionAssignProductDocument = gql` after: $after before: $before last: $last - sortBy: {field: COLLECTION, direction: DESC} + sortBy: {field: COLLECTION, direction: ASC} ) { edges { node { @@ -5445,12 +5450,12 @@ export const CollectionAssignProductDocument = gql` } } errors { - ...CollectionError + message } } } - ${CollectionProductFragmentDoc} -${CollectionErrorFragmentDoc}`; + ${CollectionErrorFragmentDoc} +${CollectionProductFragmentDoc}`; export type CollectionAssignProductMutationFn = Apollo.MutationFunction; /** @@ -5468,6 +5473,7 @@ export type CollectionAssignProductMutationFn = Apollo.MutationFunction | Scalars['ID']; + moves: Array | MoveProductInput; first?: InputMaybe; after?: InputMaybe; last?: InputMaybe; @@ -9307,7 +9308,7 @@ export type CollectionAssignProductMutationVariables = Exact<{ }>; -export type CollectionAssignProductMutation = { __typename: 'Mutation', collectionAddProducts: { __typename: 'CollectionAddProducts', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null, errors: Array<{ __typename: 'CollectionError', code: CollectionErrorCode, field: string | null, message: string | null }> } | null }; +export type CollectionAssignProductMutation = { __typename: 'Mutation', collectionAddProducts: { __typename: 'CollectionAddProducts', errors: Array<{ __typename: 'CollectionError', code: CollectionErrorCode, field: string | null, message: string | null }> } | null, collectionReorderProducts: { __typename: 'CollectionReorderProducts', collection: { __typename: 'Collection', id: string, products: { __typename: 'ProductCountableConnection', edges: Array<{ __typename: 'ProductCountableEdge', node: { __typename: 'Product', id: string, name: string, productType: { __typename: 'ProductType', id: string, name: string }, thumbnail: { __typename: 'Image', url: string } | null, channelListings: Array<{ __typename: 'ProductChannelListing', id: string, isPublished: boolean, publishedAt: any | null, isAvailableForPurchase: boolean | null, availableForPurchaseAt: any | null, visibleInListings: boolean, channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null } }>, pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null } } | null } | null, errors: Array<{ __typename: 'CollectionError', message: string | null }> } | null }; export type CreateCollectionMutationVariables = Exact<{ input: CollectionCreateInput;