#Ajouter un item

#Créer l’inventaire

Maintenant que nous avons deux vue, il serait temps de créer un inventaire partagé qui soit un peu plus réaliste que notre tableau de String.

Pour cela nous allons créer une classe Inventory qui contiendra pour le moment notre tableau de String.

Voici où nous en sommes après l’ajout naïf de notre Classe Inventory :

import SwiftUI

class Inventory {
    var loot = ["Epée", "Bouclier", "Armure"]
    
    func addItem(item: String) {
        loot.append(item)
    }
}

struct ContentView: View {
    var inventory = Inventory()
    
    @State var showAddItemView = false

    var body: some View {
        NavigationStack {
            List {
                Button(action: {
                    inventory.addItem(item: "Magie de feu")
                }, label: {
                    Text("Ajouter")
                })
                ForEach(inventory.loot, id: \.self) { item in
                    Text(item)
                }
            }
            .sheet(isPresented: $showAddItemView, content: {
                    AddItemView()
                })
            .navigationBarTitle("Loot") // Notre titre de page, choisissez le titre que vous voulez
                .toolbar(content: { // La barre d'outil de notre page
                    ToolbarItem(placement: ToolbarItemPlacement.automatic) {
                        Button(action: {
                            showAddItemView.toggle() // L'action de notre bouton
                        }, label: {
                            Image(systemName: "plus.circle.fill")
                        })
                    }
                })
        }
    }
}

#Preview {
    ContentView()
}

#🔧 Exercice 1

• Tester ce code, il devrait compiler.
• Cliquez sur le bouton “Ajouter”, que se passe-t-il ? Pourquoi cela ne marche pas ?

#🔧 Exercice 2

• Utiliser @StateObject, ObservableObject et @Published pour que l’ajout d’un item fonctionne.
• Pourquoi cela fonctionne de nouveau ?
• Pourquoi utiliser @StateObject plutôt que @ObservedObject ou @State ?
• Si vous ajoutez plusieurs items, que se passe-t-il dans la console XCode, vous devriez avoir un message d’erreur, expliquez ce qu’il signifie ?

#Ressources pour vous aider

• Basics SwiftUI
• How to use ObservableObject & @Published

#Utilisation de notre nouvelle vue

Maintenant que nous avons un inventaire fonctionnel, nous allons pouvoir l’utiliser dans notre vue d’ajout.

Il faut donc que la vue d’ajout puisse accéder au même inventaire que notre vue principale.

#🔧 Exercice 3

• Utiliser un @EnvironmentObject pour que notre vue d’ajout puisse accéder à l’inventaire.

Un indice pour vous aider : Pour passer un @EnvironmentObject à une vue, il faut utiliser .environmentObject(_:) sur la vue.

   AddItemView()
       .environmentObject(inventory)

• Récupérer l’inventaire dans la vue d’ajout et utiliser la fonction addItem(item:) pour ajouter un item avec son nom uniquement pour le moment, car votre inventaire ne gère que ça.

#Ressources pour vous aider

• Use EnvironmentObject to share data between views

#🔧 Exercice 4

• Utiliser un @Environment pour fermer la vue d’ajout d’elle même lorsque l’item est ajouté.

Un indice pour vous aider : Utiliser dismiss() pour fermer la vue. Et non pas presentationMode.wrappedValue.dismiss() qui est déprécié.

Pour passer à la suite votre app doit se comporter de cette manière :

🎉 Bravo si c’est le cas, vous avez une app avec des fonctionnalités qui utilisent les bases de SwiftUI, du passage de données et de la gestion d’état, mais aussi un peu de navigation !

La suite de l’app sera plus simple, car nous avons déjà vu les concepts importants.