How to migrate to 0.6.0 with dynamic routes?

[fishcharlie]

I'm trying to upgrade to the new FlowStacks API in 0.6.0. But having some trouble with this previous code snippet:

As you can see in the updateRoutes function, the routes array is created dynamically. In the FlowStacks documentation example it looks like it's required that you have a base view. But I want that base view to be dynamic depending on if the user is logged in or not.

How can I achieve this?

enum RootScreen {
	case chooseServerView
	case login(URL, GetSiteResponse)
	case signup(URL, GetSiteResponse)

	case main
}

struct RootView: View {
	@EnvironmentObject private var secureStorage: SecureStorage
	@State var routes: Routes<RootScreen> = []

	var body: some View {
		Router($routes) { screen, _ in
			switch screen {
			case .chooseServerView:
				ChooseServerView()
			case .login(let url, let siteResponse):
				LoginView(url: url, siteResponse: siteResponse)
			case .signup(let url, let siteResponse):
				SignUpView(url: url, siteResponse: siteResponse)
			case .main:
				MainView()
			}
		}
		.onAppear {
			updateRoutes(noUser: $secureStorage.accounts.isEmpty)
		}
		.onReceive($secureStorage.$accounts.wrappedValue) { accounts in
			updateRoutes(noUser: accounts.isEmpty)
		}
	}

	private func updateRoutes(noUser: Bool) {
		if noUser {
			routes = [.root(.chooseServerView, embedInNavigationView: true)]
		} else {
			routes = [.root(.main)]
		}
	}
}

[johnpatrickmorgan]

Hi @fishcharlie !

Usually the best approach is to have a top-level view that either shows the logged out flow (with a FlowStack) or the logged in view (which might also have its own FlowStack), e.g.:

struct RootView: View {
  @EnvironmentObject private var secureStorage: SecureStorage

  var body: some View {
    if secureStorage.accounts.isEmpty {
      LoggedOutFlow()
    } else {
      MainView()
    }
  }
}

enum LoggedOutScreen: Hashable {
  case chooseServerView
  case login(URL, GetSiteResponse)
  case signup(URL, GetSiteResponse)
}

struct LoggedOutFlow: View {
  @State var routes: Routes<RootScreen> = []

  var body: some View {
    FlowStack($routes, withNavigation: true) {
      ChooseServerView()
        .flowDestination(for: LoggedOutScreen.self) { screen in
          switch screen {
          case .chooseServerView:
            ChooseServerView()
          case let .login(url, siteResponse):
            LoginView(url: url, siteResponse: siteResponse)
          case let .signup(url, siteResponse):
            SignUpView(url: url, siteResponse: siteResponse)
          }
        }
    }
  }
}

[fishcharlie]

Thank you so much @johnpatrickmorgan. Haven't tried this yet, but once I get a chance I will and let you know if I have any problems. I really appreciate your help here.