Radical Application Development

I’ve had a longstanding issue in Retrospective Timelines. I have a simple EditButton on the list of timelines in my app. This button toggles the list into edit mode where the user can perform several actions.

1. Reorder timelines
2. Delete a timeline
3. Tap a button to open the timeline in a modal view so they can edit it.

The issue was that when I closed the modal view with a button, sometimes the EditButton on the list view would stop working. Looking at the view hierarchy in debug mode I could see that a containing object for the button was way out of position, and thus the button would stop working. I could sometimes get it snap back into position by swiping up and down on the list, but that is not really a viable solution. I needed a way to solve this.

I was once again banging my head on this issue today, trying to see if I could come up with a solution. While working through some options, I noticed that this only happed to SwiftUI Buttons, not to other types of objects in the navigation bar. I made a simple Text view and gave it an onTagGuesture modifier with a call to toggle the edit mode.

Text(self.listEditMode.isEditing ? "Done" : "Edit")
    .onTapGesture {
        self.listEditMode.isEditing ? .inactive : .active
    }

This worked, but I lost the nice animations that SwiftUI was taking care of for me. I came across this post on StackOverflow and modified my view to use this bool version of Edit Mode instead of the the default one that SwiftUI provides. Here is a rough approximation

struct ContentView: View {

    @State var isEditing = false

    var names = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationView {
            VStack {
                List(names, id: \.self) { name in
                    Text(name)
                }
                .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring())
                
            }
            .navigationBarItems(trailing: trailingButton)
        }
    }
    
    private var trailingButton: some View {
        
        Text(self.isEditing == true ? "Done" : "Edit")
            .contentShape(Rectangle())
            .frame(height: 44, alignment: .trailing)
            .onTapGesture {
                self.$isEditing.wrappedValue.toggle()
        }

    }
}

This sample code strips away all of the additional logic from my Timeline List view, but it shows how to implement the alternative version of the edit button as a Text view. Finally I have a reliable way to toggle edit mode in SwiftUI.

I’m making progress on the user interface for the app. Most of my time has been spent on making the Event List views look the way I want. I’ve also updated the Event Edit view with a new timeline picker and a long form text view for editing notes.

This morning I made a custom version of a picker for the events form. I needed a way for events to select a different timeline. The default picker in SwiftUI had some limitations so I set out to make my own. The only main difference is that it uses a sectioned list with timelines sorted into non-archived and archived sections. I made a binding variable to pass in the selected timeline. This allowed me to update the selected timeline from the picker view, then just close it when done.

struct TimelinePicker: View {

    @Binding var selectedTimeline: Timeline?
    @ObservedObject var dataSource = RADDataSource<Timeline>()
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body : some View {
        List {

            ForEach(dataSource.loadSectionedDataSource(sort: self.getSort(), predicate: nil, sectionKeyPathName: "isArchived"), id: \.name) { listSection in

                Section(header:

                    HStack {
                        Text(listSection.name == "1" ? "Archived Timelines" : "Timelines")
                    }
                    .font(.system(.headline, design: .rounded))

                ) {
                     ForEach(self.dataSource.objects(inSection: listSection)) { timeline in
                        
                        Button(action: ({
                            self.selectedTimeline = timeline
                            self.presentationMode.wrappedValue.dismiss()
                        })) {
                            
                            HStack {
                                TimelineListRowView(timeline: timeline)
                                .foregroundColor(.primary)
                                Spacer()
                                if(self.selectedTimeline == timeline) {
                                    Image(systemName: "checkmark")
                                }
                            }
                            
                        }
                    }
                }
            }
        }
    }

    public func getSort() -> [NSSortDescriptor] {
        ...
    }
}

It just would not work though. I tried several ways of passing in the timeline, binding, observed object, environment object, etc. Nothing would work. Every time I closed the picker the initial value remained set on the events form.

Turns out that’s because I’m an idiot. I was using a call to onAppear to load data from the event record into a View Model class. This was running every time I closed the timeline picker. I would set the initial value, go to the picker, select a new value, and then close the picker which would call onAppear to set the initial value again.

The fix for this was super simple. I just added a new state variable called onAppearCalled and initialized it to false. Then I could check this condition in the function that populates my form when onAppear is called, setting it to true when it is called.

func populateOnAppear() {
    if(self.onAppearCalled == false) {
        ...
        self.onAppearCalled = true
    }
}