🐛 Corriger les composants RSC Gestionnaire Réseau

MTES-MCT · Jul 8, 2024 · 9d72372 · 9d72372
1 parent 4ac3c9f
commit 9d72372
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 176 deletions.
diff --git a/...tions/ssr/src/components/pages/attestation-conformité/FormulaireAttestationConformité.tsx b/...tions/ssr/src/components/pages/attestation-conformité/FormulaireAttestationConformité.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { FC, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';

diff --git a/...c/components/pages/attestation-conformité/modifier/modifierAttestationConformité.page.tsx b/...c/components/pages/attestation-conformité/modifier/modifierAttestationConformité.page.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { FC } from 'react';
 
 import { PageTemplate } from '@/components/templates/Page.template';

diff --git a/...s/ssr/src/components/pages/réseau/gestionnaire/ajouter/AjouterGestionnaireRéseau.form.tsx b/...s/ssr/src/components/pages/réseau/gestionnaire/ajouter/AjouterGestionnaireRéseau.form.tsx
@@ -0,0 +1,71 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { Input } from '@codegouvfr/react-dsfr/Input';
+import { useState } from 'react';
+
+import { Routes } from '@potentiel-applications/routes';
+
+import { SubmitButton } from '@/components/atoms/form/SubmitButton';
+import { Form } from '@/components/atoms/form/Form';
+
+import { ajouterGestionnaireRéseauAction } from './ajouterGestionnaireRéseau.action';
+
+export const AjouterGestionnaireRéseauForm = () => {
+  const router = useRouter();
+
+  const [validationErrors, setValidationErrors] = useState<Array<string>>([]);
+  return (
+    <Form
+      action={ajouterGestionnaireRéseauAction}
+      method="post"
+      encType="multipart/form-data"
+      onSuccess={() => router.push(Routes.Gestionnaire.lister)}
+      onValidationError={(validationErrors) => setValidationErrors(validationErrors)}
+    >
+      <Input
+        label="Code EIC ou gestionnaire"
+        id="identifiantGestionnaireReseau"
+        nativeInputProps={{ name: 'identifiantGestionnaireReseau' }}
+        state={validationErrors.includes('identifiantGestionnaireReseau') ? 'error' : 'default'}
+        stateRelatedMessage="Code EIC ou gestionnaire à préciser"
+      />
+
+      <Input
+        label="Raison sociale"
+        id="raisonSociale"
+        nativeInputProps={{ name: 'raisonSociale' }}
+        state={validationErrors.includes('raisonSociale') ? 'error' : 'default'}
+        stateRelatedMessage="Raison sociale à préciser"
+      />
+
+      <Input
+        label="Format de l'identifiant du dossier de raccordement (optionnel)"
+        id="format"
+        nativeInputProps={{ name: 'format' }}
+        state={validationErrors.includes('format') ? 'error' : 'default'}
+        stateRelatedMessage="Format à préciser"
+        hintText="Exemple : XXX-RP-AAAA-999999"
+      />
+
+      <Input
+        label="Aide à la saisie de l'identifiant du dossier de raccordement (optionnel)"
+        id="legende"
+        nativeInputProps={{ name: 'legende' }}
+        state={validationErrors.includes('legende') ? 'error' : 'default'}
+        stateRelatedMessage="Légende à préciser"
+        hintText="Exemple : X = caractère alphabétique en majuscule, AAAA = Année, 9 = caractère numérique de 0 à 9"
+      />
+
+      <Input
+        label="Expression régulière (optionnel)"
+        id="expressionReguliere"
+        nativeInputProps={{ name: 'expressionReguliere' }}
+        state={validationErrors.includes('expressionReguliere') ? 'error' : 'default'}
+        stateRelatedMessage="expression régulière à préciser"
+        hintText="Exemple : [a-zA-Z]{3}-RP-2[0-9]{3}-[0-9]{6}"
+      />
+
+      <SubmitButton>Envoyer</SubmitButton>
+    </Form>
+  );
+};
diff --git a/...s/ssr/src/components/pages/réseau/gestionnaire/ajouter/AjouterGestionnaireRéseau.page.tsx b/...s/ssr/src/components/pages/réseau/gestionnaire/ajouter/AjouterGestionnaireRéseau.page.tsx
@@ -1,78 +1,16 @@
-'use client';
-
-import { FC, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Input from '@codegouvfr/react-dsfr/Input';
-
-import { Routes } from '@potentiel-applications/routes';
+import { FC } from 'react';
 
 import { Heading1 } from '@/components/atoms/headings';
 import { PageTemplate } from '@/components/templates/Page.template';
-import { Form } from '@/components/atoms/form/Form';
-import { SubmitButton } from '@/components/atoms/form/SubmitButton';
 
-import { ajouterGestionnaireRéseauAction } from './ajouterGestionnaireRéseau.action';
+import { AjouterGestionnaireRéseauForm } from './AjouterGestionnaireRéseau.form';
 
 export const AjouterGestionnaireRéseauPage: FC = () => {
-  const router = useRouter();
-
-  const [validationErrors, setValidationErrors] = useState<Array<string>>([]);
   return (
     <PageTemplate
       banner={<Heading1 className="text-theme-white">Ajouter un gestionnaire de réseau</Heading1>}
     >
-      <Form
-        action={ajouterGestionnaireRéseauAction}
-        method="post"
-        encType="multipart/form-data"
-        onSuccess={() => router.push(Routes.Gestionnaire.lister)}
-        onValidationError={(validationErrors) => setValidationErrors(validationErrors)}
-      >
-        <Input
-          label="Code EIC ou gestionnaire"
-          id="identifiantGestionnaireReseau"
-          nativeInputProps={{ name: 'identifiantGestionnaireReseau' }}
-          state={validationErrors.includes('identifiantGestionnaireReseau') ? 'error' : 'default'}
-          stateRelatedMessage="Code EIC ou gestionnaire à préciser"
-        />
-
-        <Input
-          label="Raison sociale"
-          id="raisonSociale"
-          nativeInputProps={{ name: 'raisonSociale' }}
-          state={validationErrors.includes('raisonSociale') ? 'error' : 'default'}
-          stateRelatedMessage="Raison sociale à préciser"
-        />
-
-        <Input
-          label="Format de l'identifiant du dossier de raccordement (optionnel)"
-          id="format"
-          nativeInputProps={{ name: 'format' }}
-          state={validationErrors.includes('format') ? 'error' : 'default'}
-          stateRelatedMessage="Format à préciser"
-          hintText="Exemple : XXX-RP-AAAA-999999"
-        />
-
-        <Input
-          label="Aide à la saisie de l'identifiant du dossier de raccordement (optionnel)"
-          id="legende"
-          nativeInputProps={{ name: 'legende' }}
-          state={validationErrors.includes('legende') ? 'error' : 'default'}
-          stateRelatedMessage="Légende à préciser"
-          hintText="Exemple : X = caractère alphabétique en majuscule, AAAA = Année, 9 = caractère numérique de 0 à 9"
-        />
-
-        <Input
-          label="Expression régulière (optionnel)"
-          id="expressionReguliere"
-          nativeInputProps={{ name: 'expressionReguliere' }}
-          state={validationErrors.includes('expressionReguliere') ? 'error' : 'default'}
-          stateRelatedMessage="expression régulière à préciser"
-          hintText="Exemple : [a-zA-Z]{3}-RP-2[0-9]{3}-[0-9]{6}"
-        />
-
-        <SubmitButton>Envoyer</SubmitButton>
-      </Form>
+      <AjouterGestionnaireRéseauForm />
     </PageTemplate>
   );
 };
diff --git a/...ssr/src/components/pages/réseau/gestionnaire/modifier/ModifierGestionnaireRéseau.form.tsx b/...ssr/src/components/pages/réseau/gestionnaire/modifier/ModifierGestionnaireRéseau.form.tsx
@@ -0,0 +1,125 @@
+'use client';
+import Input from '@codegouvfr/react-dsfr/Input';
+import { FC, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { Routes } from '@potentiel-applications/routes';
+import { PlainType } from '@potentiel-domain/core';
+import { ExpressionRegulière, Email } from '@potentiel-domain/common';
+import { Option } from '@potentiel-libraries/monads';
+import { GestionnaireRéseau } from '@potentiel-domain/reseau';
+
+import { Form } from '@/components/atoms/form/Form';
+import { SubmitButton } from '@/components/atoms/form/SubmitButton';
+
+import { modifierGestionnaireRéseauAction } from './modifierGestionnaireRéseau.action';
+
+export type ModifierGestionnaireRéseauProps =
+  PlainType<GestionnaireRéseau.ConsulterGestionnaireRéseauReadModel>;
+
+export const ModifierGestionnaireRéseauForm: FC<ModifierGestionnaireRéseauProps> = ({
+  identifiantGestionnaireRéseau,
+  raisonSociale,
+  aideSaisieRéférenceDossierRaccordement: { format, légende, expressionReguliere },
+  contactEmail,
+}) => {
+  const router = useRouter();
+  const [validationErrors, setValidationErrors] = useState<Array<string>>([]);
+
+  // Ici on match bind pour montrer un cas d'utilisation simple vu que c'est
+  // la première mise en place de Option et ValueType en mode Isomorphique.
+  // Utiliser bind uniquement si besoin d'une fonctionnalité avancée du ValueType (exemple: comparaison de date)
+  const contactEmailValue = Option.match(contactEmail)
+    .some((email) => {
+      const emailValueType = Email.bind(email);
+      return emailValueType.formatter();
+    })
+    .none(() => '');
+
+  const expressionReguliereValue = ExpressionRegulière.bind(expressionReguliere).formatter();
+
+  const identifiantGestionnaireReseauValue = GestionnaireRéseau.IdentifiantGestionnaireRéseau.bind(
+    identifiantGestionnaireRéseau,
+  ).formatter();
+  return (
+    <Form
+      action={modifierGestionnaireRéseauAction}
+      method="post"
+      encType="multipart/form-data"
+      onSuccess={() => router.push(Routes.Gestionnaire.lister)}
+      onValidationError={(validationErrors) => setValidationErrors(validationErrors)}
+    >
+      <div className="mb-6">
+        <label>Code EIC ou Gestionnaire: {identifiantGestionnaireReseauValue}</label>
+      </div>
+
+      <input
+        type={'hidden'}
+        value={identifiantGestionnaireReseauValue}
+        name="identifiantGestionnaireReseau"
+      />
+
+      <input type={'hidden'} value={contactEmailValue} name="contactEmail" />
+
+      <Input
+        label="Raison sociale"
+        id="raisonSociale"
+        nativeInputProps={{
+          name: 'raisonSociale',
+          defaultValue: raisonSociale,
+        }}
+        state={validationErrors.includes('raisonSociale') ? 'error' : 'default'}
+        stateRelatedMessage="Raison sociale à préciser"
+      />
+
+      <Input
+        label="Courriel de contact"
+        id="contactEmail"
+        nativeInputProps={{
+          name: 'contactEmail',
+          defaultValue: contactEmailValue,
+        }}
+        state={validationErrors.includes('contactEmail') ? 'error' : 'default'}
+        stateRelatedMessage="Contact à préciser"
+      />
+
+      <Input
+        label="Format de l'identifiant du dossier de raccordement (optionnel)"
+        id="format"
+        nativeInputProps={{
+          name: 'format',
+          defaultValue: format,
+        }}
+        state={validationErrors.includes('format') ? 'error' : 'default'}
+        stateRelatedMessage="Format à préciser"
+        hintText="Exemple : XXX-RP-AAAA-999999"
+      />
+
+      <Input
+        label="Aide à la saisie de l'identifiant du dossier de raccordement (optionnel)"
+        id="legende"
+        nativeInputProps={{
+          name: 'legende',
+          defaultValue: légende,
+        }}
+        state={validationErrors.includes('legende') ? 'error' : 'default'}
+        stateRelatedMessage="Légende à préciser"
+        hintText="Exemple : X = caractère alphabétique en majuscule, AAAA = Année, 9 = caractère numérique de 0 à 9"
+      />
+
+      <Input
+        label="Expression régulière (optionnel)"
+        id="expressionReguliere"
+        nativeInputProps={{
+          name: 'expressionReguliere',
+          value: expressionReguliereValue,
+        }}
+        state={validationErrors.includes('expressionReguliere') ? 'error' : 'default'}
+        stateRelatedMessage="Expression régulière à préciser"
+        hintText="Exemple : [a-zA-Z]{3}-RP-2[0-9]{3}-[0-9]{6}"
+      />
+
+      <SubmitButton>Envoyer</SubmitButton>
+    </Form>
+  );
+};