diff --git a/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx b/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx index 1c1d073..9d28137 100755 --- a/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx +++ b/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx @@ -96,6 +96,10 @@ export default function Dashboard() { const [gradientHeight, setGradientHeight] = useState(0); const [stickyBarLayout, setStickyBarLayout] = useState({ y: 0, height: 0 }); const [whiteSectionLayout, setWhiteSectionLayout] = useState({ y: 0 }); + const [displayedProducts, setDisplayedProducts] = useState([]); + const [page, setPage] = useState(1); + const [hasMore, setHasMore] = useState(true); + const [isLoadingMore, setIsLoadingMore] = useState(false); const { backgroundColor } = useStatusBarStore(); const { @@ -121,6 +125,47 @@ export default function Dashboard() { const defaultAddress = defaultAddressResponse?.data; const { getQuickestSlot } = useProductSlotIdentifier(); + // Function to load more products + const loadMoreProducts = () => { + if (!hasMore || isLoadingMore) return; + + setIsLoadingMore(true); + + // Simulate loading more products by taking the next batch + // In a real app, you would make an API call with pagination params + setTimeout(() => { + const batchSize = 10; + const startIndex = page * batchSize; + const endIndex = startIndex + batchSize; + + // Get the next batch of products + const nextBatch = products.slice(startIndex, endIndex); + + if (nextBatch.length > 0) { + setDisplayedProducts(prev => [...prev, ...nextBatch]); + setPage(prev => prev + 1); + setHasMore(endIndex < products.length); + } else { + setHasMore(false); + } + + setIsLoadingMore(false); + }, 500); // Simulate network delay + }; + + // Initialize with the first batch of products + React.useEffect(() => { + if (products.length > 0) { + const initialBatch = products.slice(0, 10); // First 10 products + setDisplayedProducts(initialBatch); + setHasMore(products.length > 10); + setPage(1); + } else { + setDisplayedProducts([]); + setHasMore(false); + } + }, [products]); + // Extract popular items IDs as an array to preserve order const popularItemIds = (() => { const popularItems = essentialConsts?.popularItems; @@ -202,7 +247,20 @@ export default function Dashboard() { { + handleScroll(e); + + // Check if we're near the end of the scroll for vertical loading + const { layoutMeasurement, contentOffset, contentSize } = e.nativeEvent; + const paddingToBottom = 40; + + if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) { + // Load more products when reaching near the end + if (!isLoadingMore && hasMore) { + loadMoreProducts(); + } + } + }} scrollEventThrottle={16} > - Delivery Slots + Upcoming Delivery Slots Plan your fresh deliveries ahead @@ -516,6 +574,49 @@ export default function Dashboard() { )} + + {/* All Products Section - Vertical Infinite Scroll */} + + + + + All Available Products + + + Browse our complete selection + + + + + {/* Product Grid */} + + {displayedProducts.map((item, index: number) => ( + + + router.push( + `/(drawer)/(tabs)/home/product-detail/${item.id}` + ) + } + showDeliveryInfo={true} + miniView={false} + nullIfNotAvailable={true} + containerComp={({children}) => {children}} + /> + ))} + + + {isLoadingMore && ( + + Loading more... + + )} + + diff --git a/apps/user-ui/components/ProductCard.tsx b/apps/user-ui/components/ProductCard.tsx index 95b9b53..5310e8a 100644 --- a/apps/user-ui/components/ProductCard.tsx +++ b/apps/user-ui/components/ProductCard.tsx @@ -21,6 +21,8 @@ interface ProductCardProps { onPress?: () => void; showDeliveryInfo?: boolean; miniView?: boolean; + nullIfNotAvailable?: boolean; + containerComp?: React.ComponentType | React.JSXElementConstructor; } const formatQuantity = (quantity: number, unit: string): { value: string; display: string } => { @@ -36,7 +38,9 @@ const ProductCard: React.FC = ({ onPress, showDeliveryInfo = true, miniView = false, -}) => { + nullIfNotAvailable = false, + containerComp: ContainerComp = React.Fragment, +}) => { const { data: cartData } = useGetCart(); const { getQuickestSlot } = useProductSlotIdentifier(); const updateCartItem = useUpdateCartItem({ @@ -63,6 +67,11 @@ const ProductCard: React.FC = ({ const slotId = getQuickestSlot(item.id); const displayIsOutOfStock = item.isOutOfStock || !slotId; + // Return null if nullIfNotAvailable is true and the product is out of stock + if (nullIfNotAvailable && displayIsOutOfStock) { + return null; + } + const handleQuantityChange = (newQuantity: number) => { if (newQuantity === 0 && cartItem) { removeFromCart.mutate({ itemId: cartItem.id }); @@ -79,95 +88,97 @@ const ProductCard: React.FC = ({ }; return ( - {/* TODO: Navigate to product detail */})} - activeOpacity={0.9} - > - - - {displayIsOutOfStock && ( - - - Out of Stock + + {/* TODO: Navigate to product detail */})} + activeOpacity={0.9} + > + + + {displayIsOutOfStock && ( + + + Out of Stock + + + )} + {miniView && ( + + {quantity > 0 ? ( + + ) : ( + handleQuantityChange(1)} + activeOpacity={0.8} + > + + + )} - - )} - {miniView && ( - - {quantity > 0 ? ( - - ) : ( - handleQuantityChange(1)} - activeOpacity={0.8} - > - - - )} - - )} - - - - - {item.name} - - - - ₹{item.price} - {item.marketPrice && Number(item.marketPrice) > Number(item.price) && ( - ₹{item.marketPrice} )} - - Quantity: {formatQuantity(item.productQuantity || 1, item.unitNotation).display} - - {showDeliveryInfo && item.nextDeliveryDate && ( - - - - {dayjs(item.nextDeliveryDate).format("ddd, DD MMM • h:mm A")} - - - )} + + + {item.name} + - {!miniView && ( - <> - {displayIsOutOfStock ? ( - - Unavailable - - ) : quantity > 0 ? ( - - ) : ( - handleQuantityChange(1)} - > - - - Add to Cart - - + + ₹{item.price} + {item.marketPrice && Number(item.marketPrice) > Number(item.price) && ( + ₹{item.marketPrice} )} - - )} - - + + + Quantity: {formatQuantity(item.productQuantity || 1, item.unitNotation).display} + + + {showDeliveryInfo && item.nextDeliveryDate && ( + + + + {dayjs(item.nextDeliveryDate).format("ddd, DD MMM • h:mm A")} + + + )} + + {!miniView && ( + <> + {displayIsOutOfStock ? ( + + Unavailable + + ) : quantity > 0 ? ( + + ) : ( + handleQuantityChange(1)} + > + + + Add to Cart + + + )} + + )} + + + ); };