Debouncing and form validation improvements

Shared/Settings/AccountFormView.swift

@@ -10,6 +10,7 @@ struct AccountFormView: View {
 
     @State private var valid = false
     @State private var validated = false
+    @State private var validationDebounce = Debounce()
 
     @FocusState private var focused: Bool
 
@@ -19,55 +20,10 @@ struct AccountFormView: View {
 
     var body: some View {
         VStack {
-            HStack(alignment: .center) {
-                Text("Add Account")
-                    .font(.title2.bold())
-
-                Spacer()
-
-                Button("Cancel") {
-                    dismiss()
-                }
-                #if !os(tvOS)
-                    .keyboardShortcut(.cancelAction)
-                #endif
-            }
-            .padding(.horizontal)
-
-            Form {
-                TextField("Name", text: $name, prompt: Text("Account Name (optional)"))
-                    .focused($focused)
-
-                TextField("SID", text: $sid, prompt: Text("Invidious SID Cookie"))
-            }
-            .onAppear(perform: initializeForm)
-            .onChange(of: sid) { _ in validate() }
-
-            #if os(macOS)
-                .padding(.horizontal)
-            #endif
-
-            HStack {
-                HStack(spacing: 4) {
-                    Image(systemName: valid ? "checkmark.circle.fill" : "xmark.circle.fill")
-                        .foregroundColor(valid ? .green : .red)
-                    VStack(alignment: .leading) {
-                        Text(valid ? "Account found" : "Invalid account details")
-                    }
-                }
-                .opacity(validated ? 1 : 0)
-                Spacer()
-
-                Button("Save", action: submitForm)
-                    .disabled(!valid)
-                #if !os(tvOS)
-                    .keyboardShortcut(.defaultAction)
-                #endif
-            }
-            .frame(minHeight: 35)
-            .padding(.horizontal)
+            header
+            form
+            footer
         }
-
         #if os(iOS)
             .padding(.vertical)
         #else
@@ -75,35 +31,97 @@ struct AccountFormView: View {
         #endif
     }
 
-    func initializeForm() {
+    var header: some View {
+        HStack(alignment: .center) {
+            Text("Add Account")
+                .font(.title2.bold())
+
+            Spacer()
+
+            Button("Cancel") {
+                dismiss()
+            }
+            #if !os(tvOS)
+                .keyboardShortcut(.cancelAction)
+            #endif
+        }
+        .padding(.horizontal)
+    }
+
+    var form: some View {
+        Form {
+            TextField("Name", text: $name, prompt: Text("Account Name (optional)"))
+                .focused($focused)
+
+            TextField("SID", text: $sid, prompt: Text("Invidious SID Cookie"))
+        }
+        .onAppear(perform: initializeForm)
+        .onChange(of: sid) { _ in validate() }
+        #if os(macOS)
+            .padding(.horizontal)
+        #endif
+    }
+
+    var footer: some View {
+        HStack {
+            validationStatus
+
+            Spacer()
+
+            Button("Save", action: submitForm)
+                .disabled(!valid)
+            #if !os(tvOS)
+                .keyboardShortcut(.defaultAction)
+            #endif
+        }
+        .frame(minHeight: 35)
+        .padding(.horizontal)
+    }
+
+    var validationStatus: some View {
+        HStack(spacing: 4) {
+            Image(systemName: valid ? "checkmark.circle.fill" : "xmark.circle.fill")
+                .foregroundColor(valid ? .green : .red)
+            VStack(alignment: .leading) {
+                Text(valid ? "Account found" : "Invalid account details")
+            }
+        }
+        .opacity(validated ? 1 : 0)
+    }
+
+    private func initializeForm() {
         focused = true
     }
 
-    func validate() {
+    private func validate() {
+        validationDebounce.invalidate()
+
         guard !sid.isEmpty else {
             validator.reset()
             return
         }
 
-        validator.validateAccount()
+        validationDebounce.debouncing(2) {
+            validator.validateAccount()
+        }
     }
 
-    func submitForm() {
+    private func submitForm() {
         guard valid else {
             return
         }
 
-        let account = instances.addAccount(instance: instance, name: name, sid: sid)
+        let account = instances.addAccount(instance: instance, name: name.serializationSafe, sid: sid)
         selectedAccount?.wrappedValue = account
 
         dismiss()
     }
 
-    private var validator: InstanceAccountValidator {
-        InstanceAccountValidator(
+    private var validator: AccountValidator {
+        AccountValidator(
             url: instance.url,
             account: Instance.Account(url: instance.url, sid: sid),
-            formObjectID: $sid,
+            id: $sid,
             valid: $valid,
             validated: $validated
         )

Shared/Settings/InstanceDetailsSettingsView.swift

@@ -15,7 +15,7 @@ struct InstanceDetailsSettingsView: View {
     var body: some View {
         List {
             Section(header: Text("Accounts")) {
-                ForEach(instance.accounts, id: \.self) { account in
+                ForEach(instance.accounts) { account in
                     Text(account.description)
                     #if !os(tvOS)
                         .swipeActions(edge: .trailing, allowsFullSwipe: false) {

Shared/Settings/InstanceFormView.swift

@@ -9,6 +9,7 @@ struct InstanceFormView: View {
     @State private var valid = false
     @State private var validated = false
     @State private var validationError: String?
+    @State private var validationDebounce = Debounce()
 
     @FocusState private var nameFieldFocused: Bool
 
@@ -78,14 +79,13 @@ struct InstanceFormView: View {
             .padding(.vertical)
         #else
             .frame(width: 400, height: 150)
-
         #endif
     }
 
-    var validator: InstanceAccountValidator {
-        InstanceAccountValidator(
+    var validator: AccountValidator {
+        AccountValidator(
             url: url,
-            formObjectID: $url,
+            id: $url,
             valid: $valid,
             validated: $validated,
             error: $validationError
@@ -93,15 +93,16 @@ struct InstanceFormView: View {
     }
 
     func validate() {
-        valid = false
-        validated = false
-        validationError = nil
+        validationDebounce.invalidate()
 
         guard !url.isEmpty else {
+            validator.reset()
             return
         }
 
-        validator.validateInstance()
+        validationDebounce.debouncing(2) {
+            validator.validateInstance()
+        }
     }
 
     func initializeForm() {

Shared/Settings/InstancesSettingsView.swift

@@ -27,7 +27,7 @@ struct InstancesSettingsView: View {
         Group {
             #if os(iOS)
                 Section(header: instancesHeader) {
-                    ForEach(instances, id: \.self) { instance in
+                    ForEach(instances) { instance in
                         Button(action: {
                             self.selectedInstanceID = instance.id
                             self.presentingInstanceDetails = true
@@ -62,7 +62,7 @@ struct InstancesSettingsView: View {
 
                     if !instances.isEmpty {
                         Picker("Instance", selection: $selectedInstanceID) {
-                            ForEach(instances, id: \.url) { instance in
+                            ForEach(instances) { instance in
                                 Text(instance.description).tag(Optional(instance.id))
                             }
                         }
@@ -81,7 +81,7 @@ struct InstancesSettingsView: View {
                         } else {
                             Text("Accounts")
                             List(selection: $selectedAccount) {
-                                ForEach(instance.accounts, id: \.self) { account in
+                                ForEach(instance.accounts) { account in
                                     AccountSettingsView(instance: instance, account: account,
                                                         selectedAccount: $selectedAccount)
                                 }