Skip to content

Instantly share code, notes, and snippets.

@pom421
Last active February 2, 2023 14:28
Show Gist options
  • Save pom421/eecea3f432d4473a06403a687f0ab805 to your computer and use it in GitHub Desktop.
Save pom421/eecea3f432d4473a06403a687f0ab805 to your computer and use it in GitHub Desktop.
Reste à faire fusion des fronts

Étapes pour la fusion de fronts Egapro

  • Migration des pages Mon espace dans app
    • utiliser useUser pour l'accès à l'authentification
    • dsfr (faisable car les pages sont simples et surtout accessibles aux membres du staff)
  • Passage de la Consultation de l'index en DSFR (devrait être assez rapide) + homogénéité des headers et footer avec la Repeq
  • Migration des pages Simulateur dans app
    • v1. Ajouter le simulateur dans app.
      • migrer les routes de React Router en routes Next
      • créer un layout pour les pages de simulateur (avec header et footer unifié avec la Repeq)
      • utiliser les primitives useUser (qui va simplifier énormément la gestion dans Simulateur)
      • Supprimer l'aide à droite et en faire à la place, une page séparée. Ajouter les liens avec des ancres sur toutes les pages qui doivent y faire référence.
    • v2. DSFR + RHF
      • utiliser la primitive useFormManager (qui synchronise avec le localStorage) à la place de AppReducer et limiter le prop drilling de state et dispatch.
      • stockage en db à la fin d'une page uniquement et plus toutes les 2 secondes
      • utiliser les composants DSFR
      • remplacer React Final Form + validation custom par React Hook Form + zod
        • réécrire certains composants génériques (ex: InputGroup) pour ne plus utiliser RFF mais avec un forwardRef
        • réécrire certains composants métiers (ex: FieldSiren) pour ne plus utiliser RFF mais faire un schéma zod qui sera utilisé par les forms
        • réécrire les pages forms, pour qu'elles aient toutes un schéma zod unique par form, plus facile à raisonner dessus. (Ex: ecarts-cadres.tsx de la Repeq)
        • réutilisation de schéma zod déjà existant (ex: zodSirenSchema)
        • conséquences
          • fin des problèmes avec RFF, car les données peuvent être désynchronisées entre le state du reducer et ce qui est affiché dans les inputs
          • plus d'API obscures et peu documentées de RFF : FormSpy, decorator, mutator, react-final-form-arrays, Tools.
      • simplifier la gestion du wizard actuel en mettant le même genre de stepper que pour la Repeq. Assumer le fait qu'on régresse fonctionnellement en contrepartie de l'avantage de simplifier drastiquement le code.
      • voir si l'on garde l'affichage avec la note à droite, quand on sort du mode édition. Le problème actuellement est d'avoir la note à droite, pas adapté à l'affichage mobile.
    • v3. Simulateur anonyme et délégation de la déclaration au front de déclaration directe
      • se raccorder avec la décla directe v2. C'est à dire supprimer les pages déclarant, entreprise, et déclaration. à la place, à la fin du récapitulatif, stocker une déclaration en db en mode draft et rerouter sur le front de déclaration avec ce siren/year.
      • conséquence :
        • plus de besoin d'être connecté pour faire une simulation !
        • une simulation est vraiment anonyme : il n'y a plus de Siren, plus de déclarant, plus de règles métier sur le ownership. On se base juste sur l'effectif pour savoir quels forms afficher.
        • les responsabilités sont séparées entre simu et décla, donc moins d'overlap fonctionnel.
  • Réécriture de la déclaration directe dans app
    • construire la solution en laissant la possibilité de s'interfacer avec la simulation v3. En gros à la fin de la simulation v3, on passerait à une déclaration avec le maximum de champs préremplis.
    • utiliser les primitives déjà utilisées pour la Repeq (useUser, useFormManager, AuthenticatedOnly, ParamsChecker)
    • utiliser les composants DSFR
    • même utilisation de l'API normalement.

Divers

  • typer le retour fetch des API
  • Utiliser des ErrorBoundary pour simplifier le code (moins besoin de catch les erreurs provenant de l'API notamment)
  • Utiliser suspense + les React server components (quand Next aura stabilisé son implémentation)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment