apps/user-ui/app/(drawer)/(tabs)/home/index.tsx

@@ -113,7 +113,7 @@ export default function Dashboard() {
   const [stickyBarLayout, setStickyBarLayout] = useState({ y: 0, height: 0 });
   const [whiteSectionLayout, setWhiteSectionLayout] = useState({ y: 0 });
   const [displayedProducts, setDisplayedProducts] = useState<any[]>([]);
-  const [endIndex, setEndIndex] = useState(10);
+  const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const { backgroundColor } = useStatusBarStore();
@@ -136,21 +136,51 @@ export default function Dashboard() {
   const { data: slotsData } = trpc.user.slots.getSlotsWithProducts.useQuery();
 
   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)
   React.useEffect(() => {
     if (products.length > 0 && displayedProducts.length === 0) {
-      const initialBatchRaw = products;
+      const initialBatchRaw = products.slice(0, 10);
       
       // Filter to include only products with available slots
       const initialBatch = initialBatchRaw.filter(product => {
         const slot = getQuickestSlot(product.id);
-        return slot !== null && slot !== undefined && !product.isOutOfStock;
+        return slot !== null && slot !== undefined;
       });
       
       setDisplayedProducts(initialBatch);
       setHasMore(products.length > 10);
-      setEndIndex(10);
+      setPage(1);
     } 
   }, [productsData]);
 
@@ -236,7 +266,7 @@ export default function Dashboard() {
           if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
             // Load more products when reaching near the end
             if (!isLoadingMore && hasMore) {
-              // loadMoreProducts();
+              loadMoreProducts();
             }
           }
         }}
@@ -570,7 +600,6 @@ export default function Dashboard() {
 
             {/* Product List */}
             <MyFlatList
-              // data={products}
               data={displayedProducts}
               keyExtractor={(item) => item.id.toString()}
               numColumns={2}
@@ -588,16 +617,16 @@ export default function Dashboard() {
                     }
                     showDeliveryInfo={true}
                     miniView={false}
-
+                    // nullIfNotAvailable={true}
                     key={item.id}
                   />
                 </View>
               )}
-              // onEndReached={() => {
+              onEndReached={() => {
-              //   if (!isLoadingMore && hasMore) {
+                if (!isLoadingMore && hasMore) {
-              //     loadMoreProducts();
+                  loadMoreProducts();
-              //   }
+                }
-              // }}
+              }}
               onEndReachedThreshold={0.5}
               ListFooterComponent={
                 isLoadingMore ? (

apps/user-ui/components/ProductDetail.tsx

@@ -427,9 +427,7 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ productId, isFlashDeliver
           </View>
         )}
 
-        {false && // Don't remove this - Review section hidden temporarily
+        {/* Reviews Section */}
-        <>
-        {/* Reviews Section - Hidden temporarily */}
         <View style={tw`px-4 mb-8`}>
 
           {/* Review Form - Moved above or keep below? Usually users want to read reviews first, but if few reviews, writing is good. The original had form then reviews. I will keep format but make it nicer. */}
@@ -541,9 +539,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ productId, isFlashDeliver
             </View>
           </View>
         </View>
-        </>
-        }
-
       </ScrollView>
 
       {/* All Slots Dialog */}