diff --git a/apps/mobile/src/app/swap-meal/[entryId].tsx b/apps/mobile/src/app/swap-meal/[entryId].tsx index f340e99..bf46e5a 100644 --- a/apps/mobile/src/app/swap-meal/[entryId].tsx +++ b/apps/mobile/src/app/swap-meal/[entryId].tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { router, useLocalSearchParams } from "expo-router"; import { Alert } from "react-native"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; @@ -8,13 +9,16 @@ import { Card, EmptyState, ErrorView, + Input, LoadingView, Row, Screen, Small, + Spacer, Tag, Title, } from "@/components/ui"; +import { spacing } from "@/lib/theme"; interface Rec { recipeId: string; @@ -32,13 +36,20 @@ export default function SwapMealScreen() { const mealType = String(params.mealType || "dinner"); const queryClient = useQueryClient(); + const [searchText, setSearchText] = useState(""); + const [submitted, setSubmitted] = useState(""); + const query = useQuery({ - queryKey: ["swap-options", mealType], - // view=swap: bredda urvalet – alla lämpliga rätter, inte bara det man har hemma. - queryFn: () => - api( - `/v1/recommendations/what-to-eat?limit=20&view=swap&mealType=${mealType}`, - ), + queryKey: ["swap-options", mealType, submitted], + // Med sökning: byt till VILKEN rätt som helst (mealType filtreras då bort på + // servern). Utan sökning: breda förslag för slotten (view=swap, låg täckningsvikt). + queryFn: () => { + const base = "/v1/recommendations/what-to-eat?limit=30&view=swap"; + const path = submitted + ? `${base}&search=${encodeURIComponent(submitted)}` + : `${base}&mealType=${mealType}`; + return api(path); + }, }); const swap = useMutation({ @@ -53,15 +64,35 @@ export default function SwapMealScreen() { }); const recs = query.data?.recommendations ?? []; - const mealLabel = mealType === "lunch" ? "lunchen" : mealType === "breakfast" ? "frukosten" : "middagen"; + const mealLabel = + mealType === "lunch" ? "lunchen" : mealType === "breakfast" ? "frukosten" : "middagen"; return ( Byt ut måltiden - Välj en annan rätt för {mealLabel}: + Välj en annan rätt för {mealLabel} – eller sök efter vilken rätt som helst. + + setSubmitted(searchText.trim())} + returnKeyType="search" + autoCorrect={false} + /> + {submitted ? ( + + Visar träffar för ”{submitted}”.{" "} + Rensa sökrutan och sök på tomt för att se förslag igen. + + ) : null} + + {query.isLoading && } {query.isError && void query.refetch()} />} - {query.data && recs.length === 0 && } + {query.data && recs.length === 0 && ( + + )} {recs.map((rec) => ( swap.mutate(rec.recipeId)}>