How to force page loading based on some condition?

[IgorWolkov]

The main idea is to have two different page: login page and restricted page. The start page is login page. When a user is successfully authorised, I want to load restricted page. Debug shows that callLoginApi returns successful result on valid credentials, and I can reach the branch with forcePage but Routing.router.forcePage(RestrictedPageView.page) is ignored. Looks like I'm calling forcePage in a wrong context.
Thanks in advance.

Brief overview on my solution.

class PageRouter[Page : Encoder : Decoder](routes: List[Route[_ <: Page, _]], notFoundPage: Page, getPageTitle: Page => String) extends waypoint.Router[Page](
  routes = routes,
  getPageTitle,
  serializePage = page => page.asJson.spaces2,
  deserializePage = pageStr => parser.parse(pageStr) flatMap { _.as[Page] } getOrElse(throw RuntimeException()),
  routeFallback = _ => notFoundPage
)(
  popStateEvents = windowEvents(_.onPopState), // this is how Waypoint avoids an explicit dependency on Laminar
  owner = unsafeWindowOwner // this router will live as long as the window
) 

object Page:
  given Configuration = Configuration.default
    .withDiscriminator("kind")
    .withTransformConstructorNames(name => s"${renaming.kebabCase(name)}")

  given Codec[Page] = Codec.AsObject.derivedConfigured

enum Page(val title: String):
  case LoginPage extends Page("Login Page")
  case RestrictedPage extends Page("Restricted Page")

trait PageView:
  val page: Page

object Routing:

  val router: PageRouter[Page] = PageRouter[Page](
    List(
      Route.static(LoginPageView.page, root / "login" / endOfSegments),
      Route.static(RestrictedPageView.page, root / "restricted" / endOfSegments),
    ),
    Page.NotFoundPage,
    _.title
  )

  val views: Signal[PageView] = SplitRender(router.currentPageSignal)
    .collectStatic(LoginPageView.page)(LoginPageView)
    .collectStatic(RestrictedPageView.page)(RestrictedPageView)
    .signal

object LoginPageView extends PageView:
  val page: Page = Page.LoginPage
...
  enum Command:
    case SetLogin(value: String) extends Command
    case SetPassword(value: String) extends Command
    case SendLoginRequest extends Command

  private val commandObserver = Observer[Command] {
    case Command.SetLogin(value) => state.update(_.copy(login = value))
    case Command.SetPassword(value) => state.update(_.copy(password = value))
    case Command.SendLoginRequest =>
      rest.callLoginApi(state.now().login, state.now().password)
        .foreach {
          case ApiResponse.Result(_) =>
            js.timers.setTimeout(0) {
              Routing.router.forcePage(RestrictedPageView.page)
            }
          case _  =>
        }(OneTimeOwner(() => {}))
  }

[raquo]

Why do you need forcePage? That method's purpose does not seem to match your use case.

Are you perhaps looking for router.pushState(RestrictedPageView.page)?

BTW, unrelatedly, OneTimeOwner(() => {}) is a memory leak. on every request you're creating an owner and a subscription that you never clean up. For network requests you can do something like:

  val owner = new ManualOwner()
  rest.callLoginApi(state.now().login, state.now().password)
        .foreach {
          case ApiResponse.Result(_) =>
            owner.killSubscriptions()
            ...
          case _  =>
            owner.killSubscriptions()
        }(owner)

that way when you get the response, you clean up the subscription.

Note – normally manually managing owners like this isn't needed in Laminar – most of your subscriptions use --> and <-- methods, and are scoped to their elements' lifetimes, but for global services like yours here, the more manual approach is fine, to guarantee execution of observer's code even if the user navigates away from the page while the request is processing.

[IgorWolkov]

I tried JsRouter.pushState(CounterPage) in laminar-full-stack-demo project:

object HomePageView {

  // Find and import the LESS (CSS) file for this component.
  // See https://github.com/raquo/vite-plugin-glob-resolver
  // See https://github.com/raquo/vite-plugin-import-side-effect
  @JSImport("@find/**/HomePageView.less", JSImport.Namespace)
  @js.native private object Stylesheet extends js.Object

  useImport(Stylesheet)

  JsRouter.pushState(CounterPage)
  
  ...

As a result the title was changed to Counter, the url in browser was changed to http://127.0.0.1:3000/app/basic/counter but the rest of the page remained the same. Only after manual page refreshing the Counter page was loaded.

[IgorWolkov]

It works as expected if I replace

JsRouter.pushState(CounterPage)

with

dom.window.location.replace("http://127.0.0.1:3000/app/basic/counter")

[raquo]

pushState should work, even if placed into HomePageView like you did. Are you sure you don't have any other local changes in the demo project that could cause this problem? Make sure you're on master with no changes. BTW do you see any errors in the browser dev console? This behaviour could be indicative of some exception happening.

If it still doesn't work, please try checking out the next-v0.17 branch. I tried that locally myself, and your pushState in HomePageView works for me there.

Also, not directly relevant to the problem, but note the difference between "push" and "replace" semantics when it comes to URL history:

• https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState
• https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

[IgorWolkov]

@raquo thank you again.
I've found the issue in my App.main rendering part, so now looks like it works as expected.