Debouncing and form validation improvements

This commit is contained in:
Arkadiusz Fal
2021-09-26 22:12:43 +02:00
parent f9396985c9
commit a0f74a5899
10 changed files with 168 additions and 96 deletions

15
Shared/Debounce.swift Normal file
View File

@@ -0,0 +1,15 @@
import Foundation
struct Debounce {
private var timer: Timer?
mutating func debouncing(_ interval: TimeInterval, action: @escaping () -> Void) {
timer = Timer.scheduledTimer(withTimeInterval: interval, repeats: false) { _ in
action()
}
}
func invalidate() {
timer?.invalidate()
}
}

View File

@@ -8,12 +8,12 @@ struct AccountsMenuView: View {
var body: some View {
Menu {
ForEach(instances, id: \.self) { instance in
ForEach(instances) { instance in
Button(accountButtonTitle(instance: instance, account: instance.anonymousAccount)) {
api.setAccount(instance.anonymousAccount)
}
ForEach(instance.accounts, id: \.self) { account in
ForEach(instance.accounts) { account in
Button(accountButtonTitle(instance: instance, account: account)) {
api.setAccount(account)
}

View File

@@ -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
)

View File

@@ -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) {

View File

@@ -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() {

View File

@@ -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)
}

View File

@@ -12,21 +12,21 @@ struct SearchView: View {
@State private var presentingClearConfirmation = false
@State private var recentsChanged = false
@State private var searchDebounce = Debounce()
@State private var recentsDebounce = Debounce()
@Environment(\.navigationStyle) private var navigationStyle
@EnvironmentObject<RecentsModel> private var recents
@EnvironmentObject<SearchModel> private var state
@State private var searchDebounceTimer: Timer?
@State private var recentSearchDebounceTimer: Timer?
init(_ query: SearchQuery? = nil) {
self.query = query
}
var body: some View {
VStack {
if navigationStyle == .tab && state.queryText.isEmpty {
if showRecentQueries {
recentQueries
} else {
#if os(tvOS)
@@ -40,15 +40,11 @@ struct SearchView: View {
VideosView(videos: state.store.collection)
#endif
if state.store.collection.isEmpty && !state.isLoading && !state.query.isEmpty {
if noResults {
Text("No results")
if searchFiltersActive {
Button("Reset search filters") {
self.searchSortOrder = .relevance
self.searchDate = .any
self.searchDuration = .any
}
Button("Reset search filters", action: resetFilters)
}
Spacer()
@@ -101,14 +97,14 @@ struct SearchView: View {
state.loadSuggestions(newQuery)
#if os(tvOS)
searchDebounceTimer?.invalidate()
recentSearchDebounceTimer?.invalidate()
searchDebounce.invalidate()
recentsDebounce.invalidate()
searchDebounceTimer = Timer.scheduledTimer(withTimeInterval: 2, repeats: false) { _ in
searchDebounce.debouncing(2) {
state.changeQuery { query in query.query = newQuery }
}
recentSearchDebounceTimer = Timer.scheduledTimer(withTimeInterval: 10, repeats: false) { _ in
recentsDebounce.debouncing(10) {
recents.addQuery(newQuery)
}
#endif
@@ -147,10 +143,24 @@ struct SearchView: View {
#endif
}
var filtersActive: Bool {
fileprivate var showRecentQueries: Bool {
navigationStyle == .tab && state.queryText.isEmpty
}
fileprivate var filtersActive: Bool {
searchDuration != .any || searchDate != .any
}
fileprivate func resetFilters() {
searchSortOrder = .relevance
searchDate = .any
searchDuration = .any
}
fileprivate var noResults: Bool {
state.store.collection.isEmpty && !state.isLoading && !state.query.isEmpty
}
var recentQueries: some View {
VStack {
List {
@@ -282,6 +292,7 @@ struct SearchView: View {
searchSortOrderButton
}
.frame(maxWidth: .infinity, alignment: .trailing)
HStack(spacing: 30) {
Text("Duration")
.foregroundColor(.secondary)