SwiftUIの状態管理の基礎

@MainActor
final class SmoothieState: ObservableObject {
  @Published private(set) var smoothies: [Smoothie] = []
  let dataSource: SmoothieDataSource

  init(dataSource: SmoothieDataSource) {
    self.dataSource = dataSource
  }

  func fetchSmoothies() async {
    do {
      smoothies = try await dataSource.smoothies()
    } catch {
      // TODO: Handle error
    }
  }
}

struct SmoothieListPage: View {
  @StateObject private var smoothieState: SmoothieState = .init(dataSource: .live)
  var body: some View {
    List {
      ForEach(smoothieState.smoothies) { smoothie in
        SmoothieRow(smoothie: smoothie)
      }
    }
    .navigationTitle("Menu")
    .task {
      await smoothieState.fetchSmoothies()
    }
  }
}

struct SmoothieRow: View {
  let smoothie: Smoothie

  var body: some View {
    HStack(alignment: .top) {
      smoothie.image
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: 60, height: 60)
        .clipShapeForImage()

      VStack(alignment: .leading) {
        Text(smoothie.title)
          .font(.headline)

        Spacer()

        Text("¥\(smoothie.price)")
          .font(.callout)
          .foregroundStyle(.secondary)
      }
      .padding(.vertical, 8)
    }
  }
}

struct SmoothieListPage: View {
+ @State private var selectedSmoothie: Smoothie.ID?
  @StateObject private var smoothieState: SmoothieState = .init(dataSource: .live)

  var body: some View {
    List {
      ForEach(smoothieState.smoothies) { smoothie in
+       NavigationLink(
+         tag: smoothie.id,
+         selection: $selectedSmoothie
+       ) {
+         // 今回はテキストだけ表示する詳細画面
+         Text(smoothie.title)
+       } label: {
+         SmoothieRow(smoothie: smoothie)
+       }
-       SmoothieRow(smoothie: smoothie)
      }
    }
    .navigationTitle("Menu")
    .task {
      await smoothieState.fetchSmoothies()
    }
  }
}

struct SmoothieListPage: View {
  @State private var selectedSmoothie: Smoothie.ID?
+ @State private var filterKeyword: String = ""
  @StateObject private var smoothieState: SmoothieState = .init(dataSource: .live)

  var body: some View {
    List {
      ForEach(smoothieState.smoothies) { smoothie in
        NavigationLink(
          tag: smoothie.id,
          selection: $selectedSmoothie
        ) {
          Text(smoothie.title)
        } label: {
          SmoothieRow(smoothie: smoothie)
        }
      }
    }
+   .searchable(text: $filterKeyword)
    .navigationTitle("Menu")
    .task {
      await smoothieState.fetchSmoothies()
    }
  }
}

struct SmoothieListPage: View {
+ private struct UIState {
+   var selectedSmoothie: Smoothie.ID?
+   var filterKeyword: String = ""
+ }
- @State private var selectedSmoothie: Smoothie.ID?
- @State private var filterKeyword: String = ""
+ @State private var uiState = UIState()
  @StateObject private var smoothieState: SmoothieState = .init(dataSource: .live)

  var body: some View {
    List {
      ForEach(smoothieState.smoothies) { smoothie in
        NavigationLink(
          tag: smoothie.id,
-         selection: $selectedSmoothie
+         selection: $uiState.selectedSmoothie
        ) {
          Text(smoothie.title)
        } label: {
          SmoothieRow(smoothie: smoothie)
        }
      }
    }
-   .searchable(text: $filterKeyword)
+   .searchable(text: $uiState.filterKeyword)
    .navigationTitle("Menu")
    .task {
      await smoothieState.fetchSmoothies()
    }
  }
}

enum SmoothieListPageLogic {
  static func toString(from date: Date) -> String {
    let formatter: DateFormatter = .slash
    return formatter.string(from: date)
  }
}

Text("~ \(SmoothieListPageLogic.toString(from: smoothie.endDate))")
  .font(.callout)
  .foregroundStyle(.secondary)

enum SmoothieListPageLogic {
  static func toString(from date: Date) -> String {
    let formatter: DateFormatter = .slash
    return formatter.string(from: date)
  }

+ static func filter(with keyword: String, target: [Smoothie]) -> [Smoothie] {
+   guard !keyword.isEmpty else { return target }
+   return target.filter { $0.title.contains(keyword) }
+ }
}

- ForEach(smoothieState.smoothies) { smoothie in
+ ForEach(
+   SmoothieListPageLogic.filter(
+     with: uiState.filterKeyword,
+     target: smoothieState.smoothies
+   )
+ ) { smoothie in

@MainActor
final class FavoriteSmoothieState: ObservableObject {
  @Published var favoriteSmoothies: Set<Smoothie> = []

  func update(_ smoothie: Smoothie) {
    if favoriteSmoothies.contains(smoothie) {
      favoriteSmoothies.remove(smoothie)
    } else {
      favoriteSmoothies.insert(smoothie)
    }
  }
}

struct SmoothieListPage: View {
  private struct UIState {
    var selectedSmoothie: Smoothie.ID?
    var filterKeyword: String = ""
  }

  @State private var uiState = UIState()
  @StateObject private var smoothieState: SmoothieState = .init(dataSource: .live)
+ @ObservedObject private var favoriteSmoothieState: FavoriteSmoothieState

+ init(favoriteSmoothieState: FavoriteSmoothieState) {
+   self.favoriteSmoothieState = favoriteSmoothieState
+ }
  var body: some View {
    List {
      ForEach(
        SmoothieListPageLogic.filter(
          with: uiState.filterKeyword,
          target: smoothieState.smoothies
        )
      ) { smoothie in
        NavigationLink(
          tag: smoothie.id,
          selection: $uiState.selectedSmoothie
        ) {
          Text(smoothie.title)
        } label: {
          SmoothieRow(smoothie: smoothie)
        }
+       .swipeActions(edge: .trailing) {
+         Button {
+           favoriteSmoothieState.update(smoothie)
+         } label: {
+           favoriteSmoothieState.favoriteSmoothies.contains(smoothie)
+             ? Image(systemName: "heart.slash")
+             : Image(systemName: "heart")
+         }
+         .tint(.pink)
        }
      }
    }
    .searchable(text: $uiState.filterKeyword)
    .navigationTitle("Menu")
    .task {
      await smoothieState.fetchSmoothies()
    }
  }
}

struct FavoritesPage: View {
  @ObservedObject private var favoriteSmoothieState: FavoriteSmoothieState

  init(favoriteSmoothieState: FavoriteSmoothieState) {
    self.favoriteSmoothieState = favoriteSmoothieState
  }
  var body: some View {
    // 省略
  }
}