PWA-3613: RI-Wishlist pagination fix

Author: del22123

packages/peregrine/lib/hooks/useCustomerWishlistSkus/customerWishlist.gql.ce.js

@@ -7,7 +7,7 @@ export const GET_WISHLIST_ITEMS = gql`
         customer {
             wishlists {
                 id
-                items_v2(currentPage: $currentPage, pageSize: 10) {
+                items_v2(currentPage: $currentPage, pageSize: 20) {
                     items {
                         id
                         # eslint-disable-next-line @graphql-eslint/require-id-when-available

packages/peregrine/lib/hooks/useCustomerWishlistSkus/useCustomerWishlistSkus.js

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { useUserContext } from '../../context/user';
 import mergeOperations from '../../util/shallowMerge';
@@ -16,19 +15,16 @@ export const useCustomerWishlistSkus = (props = {}) => {
     const operations = mergeOperations(defaultOperations, props.operations);
     const [{ isSignedIn }] = useUserContext();
 
-    const [currentPage, setCurrentPage] = useState(1);
-
     const {
         client,
         data: { customerWishlistProducts }
     } = useQuery(operations.getProductsInWishlistsQuery);
 
     useQuery(operations.getWishlistItemsQuery, {
-        fetchPolicy: 'cache-and-network',
+        fetchPolicy: 'cache-first',
         onCompleted: data => {
             const itemsToAdd = new Set();
             const wishlists = data.customer.wishlists;
-            let shouldFetchMore = false;
             wishlists.map(wishlist => {
                 const items = wishlist.items_v2.items;
                 items.map(item => {
@@ -37,12 +33,6 @@ export const useCustomerWishlistSkus = (props = {}) => {
                         itemsToAdd.add(sku);
                     }
                 });
-
-                const pageInfo = wishlist.items_v2.page_info;
-
-                if (pageInfo.total_pages > pageInfo.current_page) {
-                    shouldFetchMore = true;
-                }
             });
 
             if (itemsToAdd.size) {
@@ -57,13 +47,10 @@ export const useCustomerWishlistSkus = (props = {}) => {
                 });
             }
 
-            if (shouldFetchMore) {
-                setCurrentPage(current => ++current);
-            }
         },
         skip: !isSignedIn,
         variables: {
-            currentPage
+            currentPage: 1
         }
     });
 };

packages/peregrine/lib/talons/WishlistPage/__tests__/__snapshots__/useWishlist.spec.js.snap

@@ -36,9 +36,6 @@ Object {
     Object {
       "name": "item1",
     },
-    Object {
-      "name": "item2",
-    },
   ],
 }
 `;

packages/peregrine/lib/talons/WishlistPage/useWishlist.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLazyQuery } from '@apollo/client';
 import mergeOperations from '../../util/shallowMerge';
 import defaultOperations from './wishlist.gql';
@@ -21,15 +21,16 @@ export const useWishlist = (props = {}) => {
     const [fetchWishlistItems, queryResult] = useLazyQuery(
         operations.getCustomerWishlistItems,
         {
-            fetchPolicy: 'cache-and-network',
+            fetchPolicy: 'cache-first',
             nextFetchPolicy: 'cache-first',
             variables: {
                 id,
-                currentPage: 1
+                currentPage: 1,
+                pageSize: 20
             }
         }
     );
-    const { data, error, loading, fetchMore } = queryResult;
+    const { data, error, loading, fetchMore, called } = queryResult;
 
     const handleContentToggle = () => {
         setIsOpen(currentValue => !currentValue);
@@ -38,27 +39,83 @@ export const useWishlist = (props = {}) => {
     const handleLoadMore = useCallback(async () => {
         setIsFetchingMore(true);
         const currentPage = page + 1;
-        await fetchMore({
-            variables: {
-                id,
-                currentPage
-            }
-        });
 
-        setPage(currentPage);
-        setIsFetchingMore(false);
+        try {
+            await fetchMore({
+                variables: {
+                    id,
+                    currentPage,
+                    pageSize: 20
+                },
+                updateQuery: (prevResult, { fetchMoreResult }) => {
+                    if (!fetchMoreResult) {
+                        return prevResult;
+                    }
+
+                    const prevWishlist = prevResult.customer.wishlist_v2;
+                    const newWishlist = fetchMoreResult.customer.wishlist_v2;
+
+                    if (prevWishlist.id !== newWishlist.id) {
+                        return prevResult;
+                    }
+
+                    const prevItems = prevWishlist.items_v2.items || [];
+                    const newItems = newWishlist.items_v2.items || [];
+
+                    const existingIds = new Set(prevItems.map(item => item.id));
+                    const uniqueNewItems = newItems.filter(
+                        item => !existingIds.has(item.id)
+                    );
+
+                    return {
+                        ...prevResult,
+                        customer: {
+                            ...prevResult.customer,
+                            wishlist_v2: {
+                                ...prevWishlist,
+                                items_v2: {
+                                    ...prevWishlist.items_v2,
+                                    items: [...prevItems, ...uniqueNewItems]
+                                }
+                            }
+                        }
+                    };
+                }
+            });
+
+            setPage(currentPage);
+        } catch (error) {
+            console.error('Error loading more wishlist items:', error);
+        } finally {
+            setIsFetchingMore(false);
+        }
     }, [id, fetchMore, page]);
 
     useEffect(() => {
-        if (itemsCount >= 1 && isOpen === true && !data) {
+        if (itemsCount >= 1 && isOpen === true && !called) {
             fetchWishlistItems();
         }
-    }, [itemsCount, isOpen, fetchWishlistItems, data]);
+    }, [itemsCount, isOpen, called]);
+
+    const items = useMemo(() => {
+        if (!data || !data.customer || !data.customer.wishlist_v2) {
+            return [];
+        }
+
+        const allItems = data.customer.wishlist_v2.items_v2?.items || [];
+
+        const uniqueItems = [];
+        const seenIds = new Set();
+
+        for (const item of allItems) {
+            if (!seenIds.has(item.id)) {
+                seenIds.add(item.id);
+                uniqueItems.push(item);
+            }
+        }
 
-    const items =
-        data && data.customer.wishlist_v2.items_v2.items
-            ? data.customer.wishlist_v2.items_v2.items
-            : [];
+        return uniqueItems;
+    }, [data]);
 
     return {
         handleContentToggle,

packages/peregrine/lib/talons/WishlistPage/wishlist.gql.js

@@ -17,12 +17,12 @@ export const GET_CUSTOMER_WISHLIST = gql`
 `;
 
 export const GET_CUSTOMER_WISHLIST_ITEMS = gql`
-    query getCustomerWishlist($id: ID!, $currentPage: Int) {
+    query getCustomerWishlist($id: ID!, $currentPage: Int, $pageSize: Int) {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
             wishlist_v2(id: $id) {
                 id
-                items_v2(currentPage: $currentPage) {
+                items_v2(currentPage: $currentPage, pageSize: $pageSize) {
                     items {
                         id
                         ...WishlistItemFragment