diff --git a/apps/mobile/src/app/(tabs)/index.tsx b/apps/mobile/src/app/(tabs)/index.tsx index 4c7d3e8..7209458 100644 --- a/apps/mobile/src/app/(tabs)/index.tsx +++ b/apps/mobile/src/app/(tabs)/index.tsx @@ -51,16 +51,22 @@ interface WhatToEatResponse { export default function WhatToEatScreen() { const [craving, setCraving] = useState(""); const [submittedCraving, setSubmittedCraving] = useState(""); + const [page, setPage] = useState(0); const { track } = useAnalytics(); const query = useQuery({ queryKey: ["what-to-eat", submittedCraving], queryFn: () => api( - `/v1/recommendations/what-to-eat?limit=5${submittedCraving ? `&craving=${encodeURIComponent(submittedCraving)}` : ""}`, + `/v1/recommendations/what-to-eat?limit=15${submittedCraving ? `&craving=${encodeURIComponent(submittedCraving)}` : ""}`, ), }); + const allRecs = query.data?.recommendations ?? []; + const shownRecs: Recommendation[] = allRecs.length + ? Array.from({ length: Math.min(5, allRecs.length) }, (_, i) => allRecs[(page * 5 + i) % allRecs.length]).filter((r): r is Recommendation => r != null) + : []; + useEffect(() => { if (query.data) { track( @@ -87,7 +93,7 @@ export default function WhatToEatScreen() { placeholder={t("wte.cravingPlaceholder")} value={craving} onChangeText={setCraving} - onSubmitEditing={() => setSubmittedCraving(craving)} + onSubmitEditing={() => { setSubmittedCraving(craving); setPage(0); }} returnKeyType="search" /> @@ -126,9 +132,9 @@ export default function WhatToEatScreen() { )} - {query.data.recommendations.length === 0 && } + {allRecs.length === 0 && } - {query.data.recommendations.map((rec, index) => ( + {shownRecs.map((rec, index) => ( router.push(`/recipe/${rec.recipeId}`)}> @@ -167,7 +173,8 @@ export default function WhatToEatScreen() {