Update the data stored on Firebase by inputting new values to TextFields where there have been default values - firebase

Question

I designed a method to show the data stored on Firebase in the textfields according to this link. Here is my solution:
import Foundation
import SwiftUI
struct TextFieldWithDefaultValue: View {
var model: userViewModel // Actual a more complex view model
var textFieldName: String
#State var editedValue: String
init(model: userViewModel, text: String) {
self.model = model
self.textFieldName = text
switch self.textFieldName {
case "Name": self._editedValue = State(wrappedValue: model.user.name)
case "Bio": self._editedValue = State(wrappedValue: model.user.bio)
case "Interest": self._editedValue = State(wrappedValue: model.user.interest)
default: self._editedValue = State(wrappedValue: "No records")
}
}
var body: some View {
TextField(textFieldName, text: $editedValue)
}
}
One of its shortages is that I cannot bind the value of the input of object State. Therefore, the value on Firebase is never changed. So my question is, is there a shortcut that allows me to update the value whenever a user's input is different from the original one? Here is the rest of my code:
#StateObject var currentUser: userViewModel
#State private var showingAlert = false
var body: some View {
TextFieldWithDefaultValue(model: currentUser, text: "Interest")
.padding()
.keyboardType(.numberPad)
.background(Color.white.opacity(0.06))
.cornerRadius(15)
Button(action: {
currentUser.updatePersonalInfo()
self.showingAlert = true
}, label: {
Text("Save")
.foregroundColor(Color("Color"))
.fontWeight(/*#START_MENU_TOKEN#*/.bold/*#END_MENU_TOKEN#*/)
.padding(.vertical)
.frame(width: UIScreen.main.bounds.width - 100)
.clipShape(Capsule())
})
.disabled(currentUser.getName() != "" || currentUser.getInterest() != "" || currentUser.getBio() != "" ? false : true)
.opacity(currentUser.getName() != "" || currentUser.getInterest() != "" || currentUser.getBio() != "" ? 1 : 0.5)
.alert(isPresented: $showingAlert) {
() -> Alert in
Alert(title: Text("Congratulations!"), message: Text("Saved successfully!"), dismissButton: .default(Text("OK")))
}
}

Answer 1

A workaround is to set the StateObject variable, which I pass to the TextField with the actual value in init() function in the View.
#StateObject var currentUser: userViewModel
init(currentUser: userViewModel) {
self._currentUser = StateObject(wrappedValue: currentUser)
}
TextField("Name", text: $currentUser.user.name)

Answer 2

You can use onChange modifier to track changes of the text and propagate it to view model like this
TextField(textFieldName, text: $editedValue)
.onChange(of: editedValue) { newValue in
viewModel.saveToFirebase(newValue)
}
The other thing you could do is make your view model anObservableObject and add editedValue there as a #Published property. Then from the View you do this:
struct TextFieldWithDefaultValue: View {
#ObservedObject var viewModel: UserViewModel
var body: some View {
TextField(textFieldName, text: viewModel.$editedValue)
}
}
and inside the view model you can use Combine to subscribe to value’s changes and save data like this:
class UserViewModel: ObservableObject {
#Published var editedValue = “”
init(…) {
// Init `editedValue` here
$editedValue
.sink { // Save data here }
.store(in: …)
}
}
The only other thing you might want to think about is that you probably don’t want to update value on Firebase every time a single character changes. But this is already out of scope of this question