Saving Date/Time to UserDefaults through didSet on @Published var (from TimePicker component of SwiftUI)

Question

I am trying to save Checkin time preferences of a user (to send them notification reminders). So far I've been able to save a Bool and string to UserDefaults but I'm unable to figure out how to save the time preference. Here's my UserSettings class to store the preferences.

public class UserSettings: ObservableObject {
    
    
    @Published var eveningCheckin: Bool {
        didSet{
            UserDefaults.standard.set(eveningCheckin, forKey: "eveningCheckin")
            print("Evening checkin toggle value in didSET to \(self.eveningCheckin)")
            
        }
    }
    
    @Published var eveningCheckinTime: Date {
        didSet{
            UserDefaults.standard.set(eveningCheckinTime, forKey: "eveningCheckinTime")
            print("Evening checkin didSet to \(self.eveningCheckinTime)")
        }
    }
    
    
    init() {

        self.eveningCheckin = UserDefaults.standard.object(forKey: "eveningCheckin") as? Bool ?? false
        self.eveningCheckinTime = UserDefaults.standard.object(forKey: "eveningCheckinTime") as? Date ?? Date(timeIntervalSince1970: 64800)
        print("Evening checkin time init to \(self.eveningCheckinTime)")// --> To debug
        print("Evening checkin toggle value in init to \(self.eveningCheckin)")
    }
}

I want to set this Evening checkin time up with a Time picker that SwiftUI provides like this. Here are my Settings and Timepicker views.

import SwiftUI

struct SettingsMain: View {
    @ObservedObject var userSettings = UserSettings()
    @State private var showTimepickerEvening = false

    var body: some View {
        NavigationView{
            ScrollView {
                VStack {
                    //Evening checkins
                    Button(action: {
                        //Show  Evening time picker sheet
                        self.showTimepickerEvening.toggle()
                    }) {
                        HStack {
                            Text("\(userSettings.eveningCheckinTime.hour12):\(userSettings.eveningCheckinTime.minute0x) \(userSettings.eveningCheckinTime.amPM.lowercased()) ")
                            Text("Change >")
                        }
                    }
                    .sheet(isPresented: $showTimepickerEvening) {
                        //Sheet view with the Timepicker
                        TimePickerView(pickedTime: self.$userSettings.eveningCheckinTime)
                    }
                }
                .buttonStyle(PlainButtonStyle())
            }
            .navigationBarTitle("Preferences", displayMode: .inline)
        }
    }
}

struct TimePickerView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    @Binding var pickedTime: Date
    
    var body: some View {
        VStack {
            DatePicker("Checkin time", selection: $pickedTime, displayedComponents: .hourAndMinute)
            .labelsHidden()
            
            Button(action: {
                    //Dimiss. Should I actually update my UserDefaults here as well?
                self.presentationMode.wrappedValue.dismiss()
                }) {
                    ZStack {
                        ColorManager.buttonGrey
                        Text("Save time")
                            .font(.system(size: 20))
                            .fontWeight(.semibold)
                    }
                    .frame(height: 64)
                }
            .padding(.all)
            .buttonStyle(PlainButtonStyle())
        }
        .background(Color.white)
    }
}

My problem is that the Time picker does setup the time into the @Published var BUT it get's reset with the init statement. It does not happen with the Bool value. Why??

Here's the output from the print() statements above: Basically means that every time I'm trying to use the Datepicker to set the time -> didSet does choose the new time but init() resets it back to default.

Evening checkin didSet to 1970-01-01 12:12:00 +0000

Evening checkin time init to 1970-01-01 18:00:00 +0000

Evening checkin toggle value in init to true

Evening checkin didSet to 1970-01-01 12:13:00 +0000

Evening checkin time init to 1970-01-01 18:00:00 +0000

Evening checkin toggle value in init to true

Answer 1

The issue with how you store and annotate your view model. You should never be creating an @ObservedObject in the View itself, but rather injecting it. Whenever an @ObservedObject's @Published property changes, the View which stores that object will be reloaded - this means that if you are initialising that @ObservedObject inside the View, a new instance of that object will be created.

You need to inject the object into your view to avoid recreating it every time your view is refreshed.

struct SettingsMain: View {
    @ObservedObject var userSettings: UserSettings
    @State private var showTimepickerEvening = false
...

And from wherever you create SettingsMain (let's call it MainView as an illustration), create UserSettings there and annotate it as @State (or if you are creating it from something other than a View - say a ViewModel, then make it @Published):

struct MainView: View {
    @State var userSettings = UserSettings()

    var body: some View {
        SettingsMain(userSettings: userSettings)
    }
}