@tapcart/mobile-components 0.12.10 → 0.12.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/hooks/use-infinite-wishlist.d.ts +27 -12
- package/dist/components/hooks/use-infinite-wishlist.d.ts.map +1 -1
- package/dist/components/hooks/use-infinite-wishlist.js +158 -37
- package/dist/components/hooks/use-infinite-wishlist.test.d.ts +2 -0
- package/dist/components/hooks/use-infinite-wishlist.test.d.ts.map +1 -0
- package/dist/components/hooks/use-infinite-wishlist.test.js +1244 -0
- package/dist/components/hooks/use-reviews.d.ts.map +1 -1
- package/dist/components/hooks/use-reviews.js +8 -7
- package/dist/components/ui/carousel.d.ts.map +1 -1
- package/dist/components/ui/carousel.js +48 -25
- package/dist/components/ui/text.js +1 -1
- package/dist/components/ui/virtual-grid.d.ts.map +1 -1
- package/dist/components/ui/virtual-grid.js +44 -2
- package/dist/lib/utils.d.ts +3 -1
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +4 -3
- package/dist/styles.css +12 -0
- package/package.json +1 -1
|
@@ -1,16 +1,40 @@
|
|
|
1
|
+
export type WishlistItemRef = {
|
|
2
|
+
productId: string;
|
|
3
|
+
variantId?: string;
|
|
4
|
+
};
|
|
1
5
|
type QueryVariables = {
|
|
2
6
|
language?: string;
|
|
3
7
|
country?: string;
|
|
4
8
|
appId?: string;
|
|
5
9
|
collectionId?: string;
|
|
6
10
|
};
|
|
11
|
+
/** Preferred: item-level refs. Legacy: parallel arrays (converted to initialItems internally). */
|
|
7
12
|
type UseInFiniteProductsOptions = {
|
|
8
|
-
|
|
13
|
+
/** Item-level refs (productId + optional variantId). Use this for multi-variant support. */
|
|
14
|
+
initialItems?: WishlistItemRef[];
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated Use initialItems instead. If initialItems is not provided, these are converted to initialItems (with variantIds by position).
|
|
17
|
+
*/
|
|
18
|
+
initialProductIds?: string[];
|
|
19
|
+
/**
|
|
20
|
+
* @deprecated Use initialItems instead. When using with initialProductIds, same-length array by position.
|
|
21
|
+
*/
|
|
22
|
+
variantIds?: string[];
|
|
9
23
|
chunkSize: number;
|
|
10
24
|
apiUrl: string;
|
|
11
25
|
shouldMock: boolean;
|
|
12
26
|
queryVariables?: QueryVariables;
|
|
13
|
-
|
|
27
|
+
};
|
|
28
|
+
/** Return type of useInfiniteWishlist. Do not remove fields — forked blocks may depend on them. */
|
|
29
|
+
export type UseInfiniteWishlistResult = {
|
|
30
|
+
products: Product[];
|
|
31
|
+
isLoading: boolean;
|
|
32
|
+
isLoadingMore: boolean;
|
|
33
|
+
error: Error | null;
|
|
34
|
+
hasMore: boolean;
|
|
35
|
+
loadMore: () => Promise<void>;
|
|
36
|
+
loadMoreRef: (node?: Element | null) => void;
|
|
37
|
+
reset: () => void;
|
|
14
38
|
};
|
|
15
39
|
type ProductVariant = {
|
|
16
40
|
id: string;
|
|
@@ -49,15 +73,6 @@ type Product = {
|
|
|
49
73
|
height: number;
|
|
50
74
|
};
|
|
51
75
|
};
|
|
52
|
-
export declare function useInfiniteWishlist(
|
|
53
|
-
products: Product[];
|
|
54
|
-
isLoading: boolean;
|
|
55
|
-
isLoadingMore: boolean;
|
|
56
|
-
error: Error | null;
|
|
57
|
-
hasMore: boolean;
|
|
58
|
-
loadMore: () => Promise<void>;
|
|
59
|
-
loadMoreRef: (node?: Element | null | undefined) => void;
|
|
60
|
-
reset: () => void;
|
|
61
|
-
};
|
|
76
|
+
export declare function useInfiniteWishlist(options: UseInFiniteProductsOptions): UseInfiniteWishlistResult;
|
|
62
77
|
export {};
|
|
63
78
|
//# sourceMappingURL=use-infinite-wishlist.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-infinite-wishlist.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-wishlist.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-infinite-wishlist.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-wishlist.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,eAAe,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEvE,KAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,kGAAkG;AAClG,KAAK,0BAA0B,GAAG;IAChC,4FAA4F;IAC5F,YAAY,CAAC,EAAE,eAAe,EAAE,CAAA;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC,CAAA;AAED,mGAAmG;AACnG,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7B,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,cAAc,EAAE;QACd,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,gBAAgB,EAAE,OAAO,CAAA;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,eAAe,EAAE,KAAK,CAAC;QACrB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAC,CAAA;IACF,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,CAAA;AAED,KAAK,OAAO,GAAG;IACb,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,OAAO,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,cAAc,EAAE,CAAA;IAC1B,aAAa,CAAC,EAAE;QACd,GAAG,EAAE,MAAM,CAAA;QACX,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF,CAAA;AAgDD,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,0BAA0B,GAClC,yBAAyB,CAmW3B"}
|
|
@@ -8,20 +8,53 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
9
|
});
|
|
10
10
|
};
|
|
11
|
-
import {
|
|
11
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
12
12
|
import { useInView } from "react-intersection-observer";
|
|
13
|
-
import { getProductGidsFromIds } from "../../lib/utils";
|
|
13
|
+
import { getProductGidsFromIds, getVariantGidsFromIds } from "../../lib/utils";
|
|
14
14
|
import { useCollection } from "./use-collection";
|
|
15
15
|
const extractVariantId = (fullId) => fullId.split("/").pop() || "";
|
|
16
|
-
|
|
16
|
+
const ensureVariantGID = (id) => getVariantGidsFromIds([id])[0];
|
|
17
|
+
const toItemKey = (item) => item.variantId
|
|
18
|
+
? ensureVariantGID(item.variantId)
|
|
19
|
+
: getProductGidsFromIds([item.productId])[0];
|
|
20
|
+
/** Unique key for a product card: variant GID when narrowed to one variant, else product GID. */
|
|
21
|
+
const getProductOrVariantKey = (p) => { var _a; return ((_a = p === null || p === void 0 ? void 0 : p.variants) === null || _a === void 0 ? void 0 : _a.length) === 1 ? p.variants[0].id : p.id; };
|
|
22
|
+
const buildIdSnapshot = (ids) => ({
|
|
23
|
+
ids,
|
|
24
|
+
key: ids.join("\0"),
|
|
25
|
+
set: new Set(ids),
|
|
26
|
+
indexMap: new Map(ids.map((id, i) => [id, i])),
|
|
27
|
+
});
|
|
28
|
+
/** Normalize options: prefer initialItems; fall back to legacy initialProductIds + variantIds. */
|
|
29
|
+
function normalizeInitialItems(options) {
|
|
30
|
+
var _a, _b;
|
|
31
|
+
if (options.initialItems != null && Array.isArray(options.initialItems)) {
|
|
32
|
+
return options.initialItems;
|
|
33
|
+
}
|
|
34
|
+
const ids = (_a = options.initialProductIds) !== null && _a !== void 0 ? _a : [];
|
|
35
|
+
const variantIds = (_b = options.variantIds) !== null && _b !== void 0 ? _b : [];
|
|
36
|
+
return ids.map((productId, i) => ({
|
|
37
|
+
productId,
|
|
38
|
+
variantId: variantIds[i],
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
export function useInfiniteWishlist(options) {
|
|
17
42
|
var _a;
|
|
43
|
+
const { chunkSize, apiUrl, shouldMock = false, queryVariables = {} } = options;
|
|
44
|
+
const initialItems = normalizeInitialItems(options);
|
|
18
45
|
const isInitialMount = useRef(true);
|
|
19
|
-
const
|
|
46
|
+
const itemKeys = initialItems.map(toItemKey);
|
|
47
|
+
const prevSnapshotRef = useRef(buildIdSnapshot(itemKeys));
|
|
48
|
+
const loadedIndexRef = useRef(0);
|
|
49
|
+
const [allItemKeys, setAllItemKeys] = useState(itemKeys);
|
|
20
50
|
const [loadedIndex, setLoadedIndex] = useState(0);
|
|
21
51
|
const [products, setProducts] = useState([]);
|
|
22
52
|
const [isLoading, setIsLoading] = useState(false);
|
|
23
53
|
const [error, setError] = useState(null);
|
|
24
54
|
const loadingRef = useRef(false);
|
|
55
|
+
// Kept in sync via a dedicated effect so loadMore callbacks can detect
|
|
56
|
+
// whether the wishlist changed while an async fetch was in-flight.
|
|
57
|
+
const allItemKeysRef = useRef(allItemKeys);
|
|
25
58
|
//Fetching collections are necessary only for the mock data. Since we pass the collectionId to the API, it will return the products for the collection.
|
|
26
59
|
const { collections } = useCollection({
|
|
27
60
|
apiUrl: apiUrl,
|
|
@@ -32,16 +65,83 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
|
|
|
32
65
|
limit: 1,
|
|
33
66
|
});
|
|
34
67
|
const collectionToFetchID = (_a = collections[0]) === null || _a === void 0 ? void 0 : _a.id;
|
|
68
|
+
// Keep loadedIndexRef in sync so the delta-detection effect below can read
|
|
69
|
+
// the current value without adding loadedIndex as a dependency (which would
|
|
70
|
+
// cause the effect to re-run on every pagination step).
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
loadedIndexRef.current = loadedIndex;
|
|
73
|
+
}, [loadedIndex]);
|
|
74
|
+
// Keep allItemKeysRef in sync so in-flight loadMore callbacks can bail out
|
|
75
|
+
// when the wishlist changes before their fetch completes.
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
allItemKeysRef.current = allItemKeys;
|
|
78
|
+
}, [allItemKeys]);
|
|
79
|
+
// Stable key so the delta effect runs only when list content changes, not on every
|
|
80
|
+
// new initialItems reference (avoids CPU spike from repeated effect runs after removal).
|
|
81
|
+
const itemKeysKey = useMemo(() => initialItems.map(toItemKey).join("\0"), [initialItems]);
|
|
35
82
|
useEffect(() => {
|
|
83
|
+
var _a;
|
|
84
|
+
const nextKeys = initialItems.map(toItemKey);
|
|
36
85
|
if (isInitialMount.current) {
|
|
37
86
|
isInitialMount.current = false;
|
|
87
|
+
prevSnapshotRef.current = buildIdSnapshot(nextKeys);
|
|
88
|
+
return;
|
|
38
89
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
90
|
+
// Webbridge data has no stable refs (JSON deserialization always produces
|
|
91
|
+
// new objects). Build a snapshot for the incoming item keys so all
|
|
92
|
+
// comparisons use O(1) Set/Map lookups rather than repeated array walks.
|
|
93
|
+
const prev = prevSnapshotRef.current;
|
|
94
|
+
const next = buildIdSnapshot(nextKeys);
|
|
95
|
+
prevSnapshotRef.current = next;
|
|
96
|
+
// O(1) same-content check via precomputed key — avoids walking the array
|
|
97
|
+
// on every variables/updated notification (cart, customer, etc.).
|
|
98
|
+
if (next.key === prev.key)
|
|
99
|
+
return;
|
|
100
|
+
const isPureRemoval = next.ids.length < prev.ids.length &&
|
|
101
|
+
next.ids.every((id) => prev.set.has(id)); // O(1) per lookup
|
|
102
|
+
const currentLoadedIndex = loadedIndexRef.current;
|
|
103
|
+
const isPureAddition = next.ids.length > prev.ids.length &&
|
|
104
|
+
prev.ids.every((id) => next.set.has(id));
|
|
105
|
+
if (isPureRemoval) {
|
|
106
|
+
// Filter removed items out of the current list without resetting,
|
|
107
|
+
// so the grid never goes to skeleton for a simple item removal.
|
|
108
|
+
const removedKeys = new Set(prev.ids.filter((k) => !next.set.has(k)));
|
|
109
|
+
setProducts((curr) => curr.filter((p) => !removedKeys.has(getProductOrVariantKey(p))));
|
|
110
|
+
setAllItemKeys(next.ids);
|
|
111
|
+
// Recalculate loadedIndex: count surviving keys that were already in the
|
|
112
|
+
// loaded range of the old array. O(1) per lookup via prev.indexMap.
|
|
113
|
+
const newLoadedIndex = next.ids.filter((id) => { var _a; return ((_a = prev.indexMap.get(id)) !== null && _a !== void 0 ? _a : Infinity) < currentLoadedIndex; }).length;
|
|
114
|
+
setLoadedIndex(newLoadedIndex);
|
|
115
|
+
return;
|
|
43
116
|
}
|
|
44
|
-
|
|
117
|
+
if (isPureAddition) {
|
|
118
|
+
// Walk next.ids from the start to find the new contiguous loaded prefix.
|
|
119
|
+
// We stop at the first ID that either (a) wasn't fetched yet in the old
|
|
120
|
+
// list or (b) is one of the newly added items. Everything from that point
|
|
121
|
+
// onwards will be picked up by the next loadMore.
|
|
122
|
+
let newLoadedIndex = 0;
|
|
123
|
+
for (const id of next.ids) {
|
|
124
|
+
if (prev.set.has(id) &&
|
|
125
|
+
((_a = prev.indexMap.get(id)) !== null && _a !== void 0 ? _a : Infinity) < currentLoadedIndex) {
|
|
126
|
+
newLoadedIndex++;
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
break;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
setAllItemKeys(next.ids);
|
|
133
|
+
setLoadedIndex(newLoadedIndex);
|
|
134
|
+
// products are unchanged — scroll position preserved, no skeleton.
|
|
135
|
+
// The inView effect re-evaluates after these state updates and will
|
|
136
|
+
// auto-trigger loadMore if the sentinel is already in view.
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
setAllItemKeys(next.ids);
|
|
140
|
+
setLoadedIndex(0);
|
|
141
|
+
setProducts([]);
|
|
142
|
+
// Intentionally depend on itemKeysKey (not initialItems) so we only run when list content changes, not on every new array ref
|
|
143
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
144
|
+
}, [itemKeysKey]);
|
|
45
145
|
const handleFetchError = (err, context) => {
|
|
46
146
|
const error = err instanceof Error ? err : new Error(`Failed to ${context}`);
|
|
47
147
|
setError(error);
|
|
@@ -84,14 +184,13 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
|
|
|
84
184
|
queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.country,
|
|
85
185
|
queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.appId,
|
|
86
186
|
]);
|
|
87
|
-
const fetchProducts = useCallback((
|
|
88
|
-
if (!
|
|
187
|
+
const fetchProducts = useCallback((chunkItemKeys, chunkProductGids) => __awaiter(this, void 0, void 0, function* () {
|
|
188
|
+
if (!chunkItemKeys.length)
|
|
89
189
|
return [];
|
|
90
190
|
if (shouldMock)
|
|
91
191
|
return fetchMockedProducts();
|
|
92
192
|
const queryParams = new URLSearchParams();
|
|
93
|
-
queryParams.set("ids",
|
|
94
|
-
// Add country and language parameters for correct currency/pricing
|
|
193
|
+
queryParams.set("ids", chunkProductGids.join(","));
|
|
95
194
|
if (queryVariables === null || queryVariables === void 0 ? void 0 : queryVariables.country) {
|
|
96
195
|
queryParams.set("country", queryVariables.country);
|
|
97
196
|
}
|
|
@@ -104,36 +203,47 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
|
|
|
104
203
|
if (!response.ok) {
|
|
105
204
|
throw new Error(`HTTP error: ${response.status}`);
|
|
106
205
|
}
|
|
107
|
-
const products = yield response.json();
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
206
|
+
const products = (yield response.json());
|
|
207
|
+
// One card per item key, in chunkItemKeys order. Variant keys get
|
|
208
|
+
// product narrowed to that variant; product keys get product as-is.
|
|
209
|
+
const keyVariantId = (k) => { var _a; return (_a = k.split("/").pop()) !== null && _a !== void 0 ? _a : k; };
|
|
210
|
+
return chunkItemKeys
|
|
211
|
+
.map((key) => {
|
|
212
|
+
var _a;
|
|
213
|
+
const isVariantKey = key.includes("ProductVariant");
|
|
214
|
+
if (isVariantKey) {
|
|
215
|
+
const keyId = keyVariantId(key);
|
|
112
216
|
const product = products.find((p) => {
|
|
113
217
|
var _a;
|
|
114
|
-
return (_a = p.variants) === null || _a === void 0 ? void 0 : _a.some((v) =>
|
|
218
|
+
return (_a = p.variants) === null || _a === void 0 ? void 0 : _a.some((v) => v.id === key || keyVariantId(v.id) === keyId);
|
|
115
219
|
});
|
|
116
220
|
if (!product)
|
|
117
221
|
return null;
|
|
118
|
-
const matchingVariant = (_a = product.variants) === null || _a === void 0 ? void 0 : _a.find((v) =>
|
|
222
|
+
const matchingVariant = (_a = product.variants) === null || _a === void 0 ? void 0 : _a.find((v) => v.id === key || keyVariantId(v.id) === keyId);
|
|
119
223
|
if (!matchingVariant)
|
|
120
224
|
return null;
|
|
121
225
|
return Object.assign(Object.assign({}, product), { variants: [matchingVariant] });
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
226
|
+
}
|
|
227
|
+
const product = products.find((p) => p.id === key);
|
|
228
|
+
return product !== null && product !== void 0 ? product : null;
|
|
229
|
+
})
|
|
230
|
+
.filter((p) => p !== null);
|
|
126
231
|
}
|
|
127
232
|
catch (err) {
|
|
128
233
|
handleFetchError(err, "fetch products");
|
|
129
234
|
return [];
|
|
130
235
|
}
|
|
131
|
-
}), [apiUrl, shouldMock, fetchMockedProducts,
|
|
236
|
+
}), [apiUrl, shouldMock, fetchMockedProducts, queryVariables]);
|
|
237
|
+
const itemKeyToProductGid = useMemo(() => new Map(initialItems.map((item) => [
|
|
238
|
+
toItemKey(item),
|
|
239
|
+
getProductGidsFromIds([item.productId])[0],
|
|
240
|
+
])), [initialItems]);
|
|
132
241
|
const loadMore = useCallback(() => __awaiter(this, void 0, void 0, function* () {
|
|
133
242
|
if (loadingRef.current ||
|
|
134
|
-
(!shouldMock && !(
|
|
243
|
+
(!shouldMock && !(allItemKeys.length - loadedIndex > 0))) {
|
|
135
244
|
return;
|
|
136
245
|
}
|
|
246
|
+
const capturedAllItemKeys = allItemKeysRef.current;
|
|
137
247
|
loadingRef.current = true;
|
|
138
248
|
setIsLoading(true);
|
|
139
249
|
try {
|
|
@@ -145,13 +255,25 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
|
|
|
145
255
|
}
|
|
146
256
|
}
|
|
147
257
|
else {
|
|
148
|
-
const remainingItems =
|
|
258
|
+
const remainingItems = allItemKeys.length - loadedIndex;
|
|
149
259
|
const loadCount = Math.min(remainingItems, chunkSize);
|
|
150
|
-
const
|
|
151
|
-
if (
|
|
260
|
+
const chunkItemKeys = allItemKeys.slice(loadedIndex, loadedIndex + loadCount);
|
|
261
|
+
if (chunkItemKeys.length === 0)
|
|
152
262
|
return;
|
|
153
|
-
const
|
|
154
|
-
|
|
263
|
+
const chunkProductGids = Array.from(new Set(chunkItemKeys.map((k) => itemKeyToProductGid.get(k))));
|
|
264
|
+
const newProducts = yield fetchProducts(chunkItemKeys, chunkProductGids);
|
|
265
|
+
if (allItemKeysRef.current !== capturedAllItemKeys)
|
|
266
|
+
return;
|
|
267
|
+
setProducts((prev) => {
|
|
268
|
+
const merged = new Map(prev.map((p) => [getProductOrVariantKey(p), p]));
|
|
269
|
+
for (let i = 0; i < newProducts.length; i++) {
|
|
270
|
+
merged.set(chunkItemKeys[i], newProducts[i]);
|
|
271
|
+
}
|
|
272
|
+
return capturedAllItemKeys.flatMap((key) => {
|
|
273
|
+
const p = merged.get(key);
|
|
274
|
+
return p ? [p] : [];
|
|
275
|
+
});
|
|
276
|
+
});
|
|
155
277
|
setLoadedIndex((prev) => prev + loadCount);
|
|
156
278
|
}
|
|
157
279
|
}
|
|
@@ -164,11 +286,12 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
|
|
|
164
286
|
}
|
|
165
287
|
}), [
|
|
166
288
|
shouldMock,
|
|
167
|
-
|
|
289
|
+
allItemKeys,
|
|
168
290
|
loadedIndex,
|
|
169
291
|
chunkSize,
|
|
170
292
|
fetchProducts,
|
|
171
293
|
fetchMockedProducts,
|
|
294
|
+
itemKeyToProductGid,
|
|
172
295
|
]);
|
|
173
296
|
useEffect(() => {
|
|
174
297
|
if (shouldMock && collectionToFetchID && products.length === 0) {
|
|
@@ -182,16 +305,14 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
|
|
|
182
305
|
useEffect(() => {
|
|
183
306
|
if (inView &&
|
|
184
307
|
!loadingRef.current &&
|
|
185
|
-
(shouldMock
|
|
186
|
-
? products.length < 2
|
|
187
|
-
: allProductIds.length - loadedIndex > 0)) {
|
|
308
|
+
(shouldMock ? products.length < 2 : allItemKeys.length - loadedIndex > 0)) {
|
|
188
309
|
loadMore();
|
|
189
310
|
}
|
|
190
311
|
}, [
|
|
191
312
|
inView,
|
|
192
313
|
shouldMock,
|
|
193
314
|
products.length,
|
|
194
|
-
|
|
315
|
+
allItemKeys.length,
|
|
195
316
|
loadedIndex,
|
|
196
317
|
loadMore,
|
|
197
318
|
]);
|
|
@@ -202,7 +323,7 @@ export function useInfiniteWishlist({ initialProductIds, chunkSize, apiUrl, shou
|
|
|
202
323
|
error,
|
|
203
324
|
hasMore: shouldMock
|
|
204
325
|
? products.length < 2
|
|
205
|
-
:
|
|
326
|
+
: allItemKeys.length - loadedIndex > 0,
|
|
206
327
|
loadMore,
|
|
207
328
|
loadMoreRef,
|
|
208
329
|
reset: () => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-infinite-wishlist.test.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-wishlist.test.ts"],"names":[],"mappings":""}
|