State not updating correctly in SwiftUI - ios

Question

Am trying to implement like and unlike button, to allow a user to like a card and unlike. When a user likes a button the id is saved and the icon changes from line heart to filled heart. I can save the id correctly but the issue is that at times the icon does not switch to filled one to show the user the changes especially after selecting the first one. The subsequent card won't change state but remain the same, while it will add save the id correctly. To be able to see the other card I have to, unlike the first card it cand display both like at the same time. I have tried both Observable and Environmental.
My Class to handle like and unlike
import Foundation
import Disk
class FavouriteRest: ObservableObject {
#Published private var fav = [Favourite]()
init() {
getFav()
}
func getFav(){
if let retrievedFav = try? Disk.retrieve("MyApp/favourite.json", from: .documents, as: [Favourite].self) {
fav = retrievedFav
} else {
print("")
}
}
//Get single data
func singleFave(id: String) -> Bool {
for x in fav {
if id == x.id {
return true
}
return false
}
return false
}
func addFav(favourite: Favourite){
if singleFave(id: favourite.id) == false {
self.fav.append(favourite)
self.saveFave()
}
}
//Remove Fav
func removeFav(_ favourite: Favourite) {
if let index = fav.firstIndex(where: { $0.id == favourite.id }) {
fav.remove(at: index)
saveFave()
}
}
//Save Fav
func saveFave(){
do {
try Disk.save(self.fav, to: .documents, as: "SmartParking/favourite.json")
}
catch let error as NSError {
fatalError("""
Domain: \(error.domain)
Code: \(error.code)
Description: \(error.localizedDescription)
Failure Reason: \(error.localizedFailureReason ?? "")
Suggestions: \(error.localizedRecoverySuggestion ?? "")
""")
}
}
}
Single Card
#EnvironmentObject var favourite:FavouriteRest
HStack(alignment: .top){
VStack(alignment: .leading, spacing: 4){
Text(self.myViewModel.myModel.title)
.font(.title)
.fontWeight(.bold)
Text("Some text")
.foregroundColor(Color("Gray"))
.font(.subheadline)
.fontWeight(.bold)
}
Spacer()
VStack{
self.favourite.singleFave(id: self.myViewModel.myModel.id) ? Heart(image: "suit.heart.fill").foregroundColor(Color.red) : Heart(image: "suit.heart").foregroundColor(Color("Gray"))
}
.onTapGesture {
if self.favourite.singleFave(id: self.myViewModel.myModel.id) {
self.favourite.removeFav(Favourite(id: self.myViewModel.myModel.id))
} else {
self.favourite.addFav(favourite: Favourite(id: self.myViewModel.myModel.id))
}
}
}

Answer 1

I was able to solve the question by moving the code inside the card view and using #States as shown below.
#State private var fav = [Favourite]()
#State var liked = false
VStack{
// Heading
HStack(alignment: .top){
VStack{
self.liked ? Heart(image:"suit.heart.fill").foregroundColor(Color.red) : Heart(image: "suit.heart").foregroundColor(Color("Gray"))
}
.onTapGesture {
if self.liked {
self.removeFav(self.singleFav!)
} else {
let faveID = self.myViewModel.myModel.id
let myFav = Favourite(id:faveID)
self.fav.append(myFav)
self.saveFave()
}
}
}
In the method for fetch and remove, I updated the #State var liked. Everything working as expected now.