1

I'm using JetBrains Compose framework on a desktop application project, and for routing they suggest in the official documentation arkivanov-Decompose library for routing between views (Composables).

Works like a charm, but the more views you have, the longer your routing file gets. I was wondering if I could make it look a little bit better.

I'm only familiar with web routing like in Angular, when we can define the routes inside the modules. There, every module can have a module-routes.ts file with something like:

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

This way I can manage all elements that concern the module inside the module, and the routes are imported into a global Router module.

In Decompose I'm trying to do something along those lines, so I can encapsulate certain views in their respective modules (some views only interact with views of the same module, but I'm having a hard time having my router to be distributed between the modules. Does anyone have an idea on how to do it?

I have my router and my child set:

private val router =
    router<Configuration, Content>(
        initialConfiguration = Configuration.Auth, // Starting with Login
        childFactory = ::createChild // The Router calls this function, providing the child Configuration and ComponentContext
    )

and my child factory:

private fun createChild(configuration: Configuration, context: ComponentContext): Content =
    when (configuration) {
        is Configuration.Auth -> auth(configuration)
        is Configuration.UserList -> userList()
        is Configuration.NewUser-> newUser()

can I get those configs from the modules to make it cleaner? Can I have different routes for different types of user (admin, normalUser, etc...)?

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Pstr
  • 777
  • 1
  • 8
  • 17

1 Answers1

1

Can I get those configs from the modules to make it cleaner?

Yes, you can move the Configuration sealed class and all its subclasses into a separate file, and make it internal. You can also move the createChild function.

Can I have different routes for different types of user (admin, normalUser, etc...)?

You can define separate configuration classes for each route.

PS: also please note that you can organise your components into a tree. So on each component you will have just a few routes and limited responsibility.

Something like this:

              Root
          /          \
     Auth              Main
    /    \            /    \
SignIn  SignUp  UserList  UserProfile
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Arkadii Ivanov
  • 146
  • 4
  • Awesome, thank you. How do I manage to use them on the Root element? How do I direct the application in Root to use the createChildren in the subsequent modules? I Instance new routers, or do I pass the router as argument to the modules...? I understand the general idea, but I'm confused about the implementation. Can you enlighten me? Thank you again! – Pstr Mar 15 '22 at 18:33
  • 1
    The idea with the tree structure is that each level manages only its direct children. In this particular example `Root` would only navigate between `Auth` and `Main`, `Auth` only between `SignIn` and `SignUp`, `Main` only between `UserList` and `UserProfile`. So you will need one `Router` in `Root`, another `Router` in `Auth`, and same for `Main`. Communication between nodes can be done via usual callbacks: `SignIn(onFinished: () -> Unit)`, `Auth(onFinished: () -> Unit)`. – Arkadii Ivanov Mar 16 '22 at 20:59