Rezept-App mit Online-API (Teil 1)

import Foundation

struct MealResponse: Decodable {
    let meals: [Meal]?
}

struct Meal: Decodable, Identifiable, Hashable {
    let id: String
    let name: String
    let thumbnail: String?

    var thumbnailURL: URL? {
        thumbnail.flatMap { URL(string: $0) }
    }

    enum CodingKeys: String, CodingKey {
        case id = "idMeal"
        case name = "strMeal"
        case thumbnail = "strMealThumb"
    }
}

extension Meal {
    static let examples = [
        Meal(id: "52772", name: "Teriyaki Chicken Casserole", thumbnail: nil),
        Meal(id: "52771", name: "Spicy Arrabiata Penne", thumbnail: nil)
    ]
}

import Foundation

enum APIError: Error {
    case badStatus(Int)
}

struct MealAPI {
    private let baseURL = URL(string: "https://www.themealdb.com/api/json/v1/1/")!
    private let session: URLSession

    init(session: URLSession = .shared) {
        self.session = session
    }

    func meals(in category: String) async throws -> [Meal] {
        let response: MealResponse = try await fetch("filter.php", query: ["c": category])
        return response.meals ?? []
    }

    private func fetch<T: Decodable>(_ path: String, query: [String: String] = [:]) async throws -> T {
        var url = baseURL.appending(path: path)
        if !query.isEmpty {
            url.append(queryItems: query.map { URLQueryItem(name: $0.key, value: $0.value) })
        }

        let (data, response) = try await session.data(from: url)

        if let http = response as? HTTPURLResponse, !(200...299).contains(http.statusCode) {
            throw APIError.badStatus(http.statusCode)
        }

        return try JSONDecoder().decode(T.self, from: data)
    }
}

enum LoadState<Value> {
    case idle
    case loading
    case loaded(Value)
    case failed(String)
}

import Foundation

@MainActor
@Observable
class MealListViewModel {
    var state: LoadState<[Meal]> = .idle
    var category = "Dessert"

    private let api = MealAPI()

    func load() async {
        state = .loading
        do {
            let meals = try await api.meals(in: category)
            state = .loaded(meals)
        } catch {
            print("Laden fehlgeschlagen: \(error)")
            state = .failed("Die Rezepte konnten nicht geladen werden. Prüfe deine Internetverbindung und versuch es erneut.")
        }
    }
}

import SwiftUI

struct MealRow: View {
    let meal: Meal

    var body: some View {
        HStack(spacing: 12) {
            AsyncImage(url: meal.thumbnailURL) { image in
                image
                    .resizable()
                    .scaledToFill()
            } placeholder: {
                Color(.secondarySystemBackground)
            }
            .frame(width: 64, height: 64)
            .clipShape(.rect(cornerRadius: 10))

            Text(meal.name)
                .font(.headline)
                .lineLimit(2)
        }
        .padding(.vertical, 4)
    }
}

#Preview(traits: .sizeThatFitsLayout) {
    MealRow(meal: Meal.examples[0])
        .padding()
}

import SwiftUI

struct MealListView: View {
    @State private var viewModel = MealListViewModel()

    var body: some View {
        NavigationStack {
            content
                .navigationTitle(viewModel.category)
                .task {
                    await viewModel.load()
                }
        }
    }

    @ViewBuilder
    private var content: some View {
        switch viewModel.state {
        case .idle, .loading:
            ProgressView("Rezepte werden geladen…")

        case .failed(let message):
            ContentUnavailableView {
                Label("Keine Verbindung", systemImage: "wifi.exclamationmark")
            } description: {
                Text(message)
            } actions: {
                Button("Erneut versuchen") {
                    Task { await viewModel.load() }
                }
                .buttonStyle(.borderedProminent)
            }

        case .loaded(let meals) where meals.isEmpty:
            ContentUnavailableView(
                "Keine Rezepte",
                systemImage: "fork.knife",
                description: Text("In dieser Kategorie gibt es keine Rezepte.")
            )

        case .loaded(let meals):
            List(meals) { meal in
                MealRow(meal: meal)
            }
            .listStyle(.plain)
        }
    }
}

#Preview {
    MealListView()
}

init(state: LoadState<[Meal]> = .idle) {
    self.state = state
}

struct MealListView: View {
    @State private var viewModel: MealListViewModel

    init(viewModel: MealListViewModel = MealListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        NavigationStack {
            content
                .navigationTitle(viewModel.category)
                .task {
                    if case .idle = viewModel.state {
                        await viewModel.load()
                    }
                }
        }
    }

    // … content wie bisher …
}

#Preview("Daten") {
    MealListView(viewModel: MealListViewModel(state: .loaded(Meal.examples)))
}

#Preview("Laden") {
    MealListView(viewModel: MealListViewModel(state: .loading))
}

#Preview("Fehler") {
    MealListView(viewModel: MealListViewModel(state: .failed("Testfehler")))
}

#Preview("Leer") {
    MealListView(viewModel: MealListViewModel(state: .loaded([])))
}