WIP: Add type-route

[tllobregat]

Hello @amanteaux @lucas-amiaud @vincentdbs

Avant de me lancer dans l'ajout de type-route sur l'admin, voici déjà l'ajout de type-route sur le front. Si vous avez déjà des retours je suis preneur !

Quelques notes :

• J'ai supprimé le ConditionalRoute puise les conditions sont gérés "par défaut" par type-route
• Il faut encore que je vérifie avec @vincentdbs la compatibilité pour le storybook
• Sur le template front c'est globalement très simple, il y a peu d'exemple d'utilisation 😬

[tllobregat]

Hello @amanteaux @vincentdbs @lucas-amiaud

J'ai pris tous vos retours. Avec @lucas-amiaud, on a revu un tout petit peu l'API :

• Plutôt que de passer par le route.name === ROUTE_NAME && <Composant />, ce qui pouvait être en + être un peu compliquer à typer correctement en fonction des cas, on a fait un nouveau composant Route
• Le composant Route prend 3 paramètres :
  • shouldDisplayRoute : un observable (optionnel), permettant d'afficher la route conditionnellement
  • route: un nom de route, obligatoirement défini dans le router
  • Component: une fonction prenant en paramètre la route défini dans le router pour ce composant

Cela permet dans le fichier App.tsx de déclarer ses routes comme suit :

        <Route route={ROUTE_MESSAGES} Component={Communications} />
        <Route route={ROUTE_CASES} Component={Cases} />
        <Route route={ROUTE_CASE_DETAILS} Component={CaseDetails} />
        <Route route={ROUTE_STATS} Component={Statistics} />
        <Route
          shouldDisplayRoute={sessionService.hasPermission(Permission.ASSIGN_PERMISSIONS_TO_USER)}
          route={ROUTE_ADMINISTRATION}
          Component={Administration}
        />

J'ai également rappatrié le useRoute dans la NotFoundPage. La condition est donc à l'intérieur du composant et le fichier App.tsx peut l'utiliser directement sans logique supplémentaire

J'ai aussi rajouté une route HelloWorld pour l'exemple de l'utilisation des paramètres

Est-ce que vous avez d'autres remarques avant que j'attaque la partie admin ?

[amanteaux]

Hello @tllobregat, @vincentdbs et @lucas-amiaud ,

Je n'avais pas compris qu'on n'allait refaire un composant JSX <Route> comme dans React Router. Vous êtes sûrs que c'est le meilleur design ?

J'avais l'impression que l'une des deux approches suivantes était plus claires :

• route.name === ROUTE_NAME && <Composant />
• ou éventuellement la syntaxe un peu plus compliquée : { [ROUTE_NAME]: <Composant />}[route.name]

Ce qui me gène avec les routes en JSX (et le composant <Route>) c'est :

• A moins de lire l'implémentation de Route, on ne comprend pas comment ça marche, et le fonctionnement est magique
• Pour les cas simples, ça marche bien, mais dès qu'on veut faire des choses qui sortent du basique, il va falloir complexifier les choses comme l'a fait react router : gestion de la route par défaut, gestion des sous composants, etc. En fait, quand je vois ça, j'ai l'impression qu'on pourrait aussi faire des composants <If>, <Else>, etc. Alors que tout l'intérêt de React est justement de simplifier les choses et d'utiliser du vrai code JS quand on veut gérer des structures de contrôle

On peut organiser un point pour en discuter, ce sera peut être mieux que par écrit !

[lucas-amiaud]

Hello @tllobregat, @vincentdbs et @lucas-amiaud ,

Je n'avais pas compris qu'on n'allait refaire un composant JSX <Route> comme dans React Router. Vous êtes sûrs que c'est le meilleur design ?

J'avais l'impression que l'une des deux approches suivantes était plus claires :

• route.name === ROUTE_NAME && <Composant />
• ou éventuellement la syntaxe un peu plus compliquée : { [ROUTE_NAME]: <Composant />}[route.name]

Ce qui me gène avec les routes en JSX (et le composant <Route>) c'est :

• A moins de lire l'implémentation de Route, on ne comprend pas comment ça marche, et le fonctionnement est magique
• Pour les cas simples, ça marche bien, mais dès qu'on veut faire des choses qui sortent du basique, il va falloir complexifier les choses comme l'a fait react router : gestion de la route par défaut, gestion des sous composants, etc. En fait, quand je vois ça, j'ai l'impression qu'on pourrait aussi faire des composants <If>, <Else>, etc. Alors que tout l'intérêt de React est justement de simplifier les choses et d'utiliser du vrai code JS quand on veut gérer des structures de contrôle

On peut organiser un point pour en discuter, ce sera peut être mieux que par écrit !

Je suis plutôt d'accord avec toi sur le composant Route. Cependant la déclaration proposée avant qui était de déclarer autant d'observables de contrôles que de routes et de déclarer comme :

valeurObservableDAutorisation && route.name === route && <Composant />

ne me convient pas car la déclaration des observables / des useObservable + les conditions générées vont polluer la déclaration des routes.

donc je suis d'accord que la solution JSX n'est pas optimale, mais il ne faut pas tomber dans des routers à 500 lignes inbuvables