Trying to Model a File Backup Status Tree with TCA

[ajdali]

Hi All,
I have been stuck for a while on something I have been trying to build in TCA:

Use Case: Need to show a hierarchical drop down list of a user's backed up file system from a backend service and then listen to a stream of "deltas" aka any changes to the backend to update the file system and update the view accordingly (like status of a file changed, file added, file deleted, etc)

What I Have Tried: Two different flavors of SwiftUI's representation of hierarchal lists:
https://www.iosdevie.com/p/swiftui-groupbox-outlinegroup-disclosuregroup
Outline Group you just pass a nested array into a list view. In TCA i can listen for changes to this array and run reducer actions based on the streamed changes to the trie structure and the view gets nicely re-rendered. I do not have access to on expanded events though, so I cannot use lazy loading. This would put strain on the backend service to retrieve ALL the watched files and folders at once.
https://swiftuirecipes.com/blog/file-tree-with-expanding-list-in-swiftui

Disclosure Group I can listen to on expand and collapse events, but I am having trouble isolating state into the root node. I am recursively creating new views for the children with their own stores to track a directory and its children based on the expanded/collapsed status. Right now I have a store per node in the trie and do not know how to communicate between them. My hope is to keep the state of this trie in one place and not have child states.
Here is my tree reducer and tree view for the disclosure group

case let .expandButtonChanged:
        //load the children and the views
        state.isExpanded.toggle()
        print("Expanded variable? \(state.isExpanded)")
        if state.isExpanded == true {
            state.isChildrenRequestInFlight = true
            let nameSearch = state.currNode.name
            return .task {
                .childrenResponse(
                    await TaskResult {
                        try await environment.grpcClient.getWatchedContent(path: nameSearch)
                    })
            }
        } else {
            state.isChildrenRequestInFlight = false
            if state.currNode.children != nil {
                state.currNode.children = []
            }
            return .none
    }
    case let .childrenResponse(.success(watchedItems)):
        state.isChildrenRequestInFlight = false
        var newChildren: [TreeNode] = watchedItems.map { (watchedItem) in
            if watchedItem.isFile {
                return TreeNode(name: watchedItem.endPath, children: nil, level: state.currNode.level + 1, backupStatus: watchedItem.backupStatus)
            } else {
                 return TreeNode(name: watchedItem.endPath, children: [], level: state.currNode.level + 1, backupStatus: watchedItem.backupStatus)
            }
        }
        state.currNode.children = newChildren
        return .none
    case let .childrenResponse(.failure(error)):
        state.isChildrenRequestInFlight = false
        return .none
    case let .childrenResponse(_):
        return .none

---

struct TreeView: View {
    let store: Store<TreeState, TreeAction>
    
    var body: some View {
        WithViewStore(self.store) {viewStore in
            if viewStore.currNode.isFile {
                ZStack {
                    Label("\(viewStore.currNode.name)", systemImage: viewStore.currNode.icon).frame(maxWidth: .infinity, alignment: .leading).padding([.leading], CGFloat(13)).padding([.top], CGFloat(5))
                }
            } else {
                DisclosureGroup(isExpanded: viewStore.binding(get: {$0.isExpanded}, send: .expandButtonChanged),
                                content: {
                    if viewStore.isChildrenRequestInFlight && viewStore.isExpanded {
                        ProgressView().frame(maxWidth: .infinity, alignment: .leading).padding([.leading], CGFloat(45))
                    } else {
                        ForEach(viewStore.currNode.children ?? [], id: \.self) { childNode in
                            TreeView(store: Store(initialState: TreeState(newNode: childNode), reducer: treeReducer, environment: TreeEnvironment(grpcClient: GRPCClient())))
                        }.padding(.leading)
                        
                    }
                }, label: {Label("\(viewStore.currNode.name)", systemImage: viewStore.currNode.icon)}).onTapGesture {
                    print("All tapped")
                }
            }
        }
    }
}

Problem with Implementation: You can see I am creating new state for children with their own separate view so I cannot drill down into subchildren of children and update them. This will cause inconsistencies and require every node to gave its own TCP connection established

What I'm Looking For: An efficient way to use TCA to store a hierarchal file system and dynamically change it over time without putting too much strain on a backend service and any additional considerations I need to make. Please reach out to me here if you have any ideas or need more clarifications. I really appreciate it.

[ajdali]

@stephencelis @mbrandonw any advice would be appreciated :)