enh
This commit is contained in:
parent
400ba61866
commit
4e54a8c6ee
1 changed files with 12 additions and 41 deletions
|
|
@ -113,7 +113,7 @@ export default function Dashboard() {
|
||||||
const [stickyBarLayout, setStickyBarLayout] = useState({ y: 0, height: 0 });
|
const [stickyBarLayout, setStickyBarLayout] = useState({ y: 0, height: 0 });
|
||||||
const [whiteSectionLayout, setWhiteSectionLayout] = useState({ y: 0 });
|
const [whiteSectionLayout, setWhiteSectionLayout] = useState({ y: 0 });
|
||||||
const [displayedProducts, setDisplayedProducts] = useState<any[]>([]);
|
const [displayedProducts, setDisplayedProducts] = useState<any[]>([]);
|
||||||
const [page, setPage] = useState(1);
|
const [endIndex, setEndIndex] = useState(10);
|
||||||
const [hasMore, setHasMore] = useState(true);
|
const [hasMore, setHasMore] = useState(true);
|
||||||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||||||
const { backgroundColor } = useStatusBarStore();
|
const { backgroundColor } = useStatusBarStore();
|
||||||
|
|
@ -137,50 +137,20 @@ export default function Dashboard() {
|
||||||
|
|
||||||
const products = productsData?.products || [];
|
const products = productsData?.products || [];
|
||||||
|
|
||||||
// Function to load more products
|
|
||||||
const loadMoreProducts = () => {
|
|
||||||
if (!hasMore || isLoadingMore) return;
|
|
||||||
|
|
||||||
setIsLoadingMore(true);
|
|
||||||
|
|
||||||
const batchSize = 10;
|
|
||||||
const startIndex = page * batchSize;
|
|
||||||
const endIndex = startIndex + batchSize;
|
|
||||||
|
|
||||||
// Get the next batch of products
|
|
||||||
const nextBatchRaw = products.slice(startIndex, endIndex);
|
|
||||||
|
|
||||||
// Filter products to only include those with available slots
|
|
||||||
const nextBatch = nextBatchRaw.filter(product => {
|
|
||||||
const slot = getQuickestSlot(product.id);
|
|
||||||
return slot !== null && slot !== undefined;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (nextBatch.length > 0) {
|
|
||||||
setDisplayedProducts(prev => [...prev, ...nextBatch]);
|
|
||||||
setPage(prev => page + 1);
|
|
||||||
setHasMore(endIndex < products.length);
|
|
||||||
} else {
|
|
||||||
setHasMore(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsLoadingMore(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initialize with the first batch of products (only those with available slots)
|
// Initialize with the first batch of products (only those with available slots)
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (products.length > 0 && displayedProducts.length === 0) {
|
if (products.length > 0 && displayedProducts.length === 0) {
|
||||||
const initialBatchRaw = products.slice(0, 10);
|
const initialBatchRaw = products;
|
||||||
|
|
||||||
// Filter to include only products with available slots
|
// Filter to include only products with available slots
|
||||||
const initialBatch = initialBatchRaw.filter(product => {
|
const initialBatch = initialBatchRaw.filter(product => {
|
||||||
const slot = getQuickestSlot(product.id);
|
const slot = getQuickestSlot(product.id);
|
||||||
return slot !== null && slot !== undefined;
|
return slot !== null && slot !== undefined && !product.isOutOfStock;
|
||||||
});
|
});
|
||||||
|
|
||||||
setDisplayedProducts(initialBatch);
|
setDisplayedProducts(initialBatch);
|
||||||
setHasMore(products.length > 10);
|
setHasMore(products.length > 10);
|
||||||
setPage(1);
|
setEndIndex(10);
|
||||||
}
|
}
|
||||||
}, [productsData]);
|
}, [productsData]);
|
||||||
|
|
||||||
|
|
@ -266,7 +236,7 @@ export default function Dashboard() {
|
||||||
if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
|
if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
|
||||||
// Load more products when reaching near the end
|
// Load more products when reaching near the end
|
||||||
if (!isLoadingMore && hasMore) {
|
if (!isLoadingMore && hasMore) {
|
||||||
loadMoreProducts();
|
// loadMoreProducts();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
@ -600,6 +570,7 @@ export default function Dashboard() {
|
||||||
|
|
||||||
{/* Product List */}
|
{/* Product List */}
|
||||||
<MyFlatList
|
<MyFlatList
|
||||||
|
// data={products}
|
||||||
data={displayedProducts}
|
data={displayedProducts}
|
||||||
keyExtractor={(item) => item.id.toString()}
|
keyExtractor={(item) => item.id.toString()}
|
||||||
numColumns={2}
|
numColumns={2}
|
||||||
|
|
@ -617,16 +588,16 @@ export default function Dashboard() {
|
||||||
}
|
}
|
||||||
showDeliveryInfo={true}
|
showDeliveryInfo={true}
|
||||||
miniView={false}
|
miniView={false}
|
||||||
// nullIfNotAvailable={true}
|
|
||||||
key={item.id}
|
key={item.id}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
onEndReached={() => {
|
// onEndReached={() => {
|
||||||
if (!isLoadingMore && hasMore) {
|
// if (!isLoadingMore && hasMore) {
|
||||||
loadMoreProducts();
|
// loadMoreProducts();
|
||||||
}
|
// }
|
||||||
}}
|
// }}
|
||||||
onEndReachedThreshold={0.5}
|
onEndReachedThreshold={0.5}
|
||||||
ListFooterComponent={
|
ListFooterComponent={
|
||||||
isLoadingMore ? (
|
isLoadingMore ? (
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue