feat(web): display previously entered data in urban project phase and…

… naming forms
incubateur-ademe · Jan 10, 2025 · e0f7853 · e0f7853
1 parent 5148783
commit e0f7853
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 28 deletions.
diff --git a/.../web/src/features/create-project/application/renewable-energy/renewableEnergy.selector.ts b/.../web/src/features/create-project/application/renewable-energy/renewableEnergy.selector.ts
@@ -14,6 +14,7 @@ import {
   computeDefaultPhotovoltaicYearlyTaxesAmount,
   PHOTOVOLTAIC_RATIO_M2_PER_KWC,
 } from "../../domain/photovoltaic";
+import { generateRenewableEnergyProjectName } from "../../domain/projectName";
 import {
   getBioversityAndClimateSensitiveSoilsSurfaceAreaDestroyed,
   getNonSuitableSoilsForPhotovoltaicPanels,
@@ -218,3 +219,16 @@ export const selectPhotovoltaicPlantElectricalPowerKWc = createSelector(
   selectCreationData,
   (creationData): number => creationData.photovoltaicInstallationElectricalPowerKWc ?? 0,
 );
+
+export const selectNameAndDescriptionInitialValues = createSelector(
+  selectCreationData,
+  (creationData) => {
+    if (creationData.name) {
+      return { name: creationData.name, description: creationData.description };
+    }
+    if (creationData.renewableEnergyType) {
+      return { name: generateRenewableEnergyProjectName(creationData.renewableEnergyType) };
+    }
+    return undefined;
+  },
+);
diff --git a/apps/web/src/features/create-project/application/urban-project/urbanProject.selectors.ts b/apps/web/src/features/create-project/application/urban-project/urbanProject.selectors.ts
@@ -12,6 +12,7 @@ import {
 import { RootState } from "@/app/application/store";
 import { selectAppSettings } from "@/shared/app-settings/core/appSettings";
 
+import { generateUrbanProjectName } from "../../domain/projectName";
 import {
   getUrbanProjectSoilsDistributionFromSpaces,
   UrbanSpacesByCategory,
@@ -285,3 +286,19 @@ export const selectFinancialAssistanceRevenues = createSelector(
     return creationData.financialAssistanceRevenues;
   },
 );
+
+export const selectProjectPhase = createSelector(
+  [selectCreationData],
+  (creationData) => creationData.projectPhase,
+);
+
+export const selectNameAndDescriptionInitialValues = createSelector(
+  [selectCreationData],
+  (creationData) => {
+    if (!creationData.name) return { name: generateUrbanProjectName() };
+    return {
+      name: creationData.name,
+      description: creationData.description,
+    };
+  },
+);
diff --git a/.../create-project/views/common-views/name-and-description/ProjectNameAndDescriptionForm.tsx b/.../create-project/views/common-views/name-and-description/ProjectNameAndDescriptionForm.tsx
@@ -11,16 +11,14 @@ export type FormValues = {
 };
 
 type Props = {
-  defaultProjectName: string;
+  initialValues?: FormValues;
   onSubmit: (data: FormValues) => void;
   onBack: () => void;
 };
 
-function ProjectNameAndDescriptionForm({ onSubmit, onBack, defaultProjectName }: Props) {
+function ProjectNameAndDescriptionForm({ onSubmit, onBack, initialValues }: Props) {
   const { register, handleSubmit, formState } = useForm<FormValues>({
-    defaultValues: {
-      name: defaultProjectName,
-    },
+    defaultValues: initialValues,
   });
 
   const nameError = formState.errors.name;

diff --git a/apps/web/src/features/create-project/views/common-views/project-phase/ProjectPhaseForm.tsx b/apps/web/src/features/create-project/views/common-views/project-phase/ProjectPhaseForm.tsx
@@ -5,6 +5,7 @@ import HorizontalCheckableTile from "@/shared/views/components/CheckableTile/Hor
 import WizardFormLayout from "@/shared/views/layout/WizardFormLayout/WizardFormLayout";
 
 type Props<T> = {
+  initialValues?: FormValues<T>;
   projectPhaseOptions: { value: T; label: string; hintText?: string; pictogram?: string }[];
   onSubmit: (data: FormValues<T>) => void;
   onBack: () => void;
@@ -42,11 +43,14 @@ const ProjectPhaseOption = ({
 };
 
 function ProjectPhaseForm<TProjectPhase extends string>({
+  initialValues,
   projectPhaseOptions,
   onSubmit,
   onBack,
 }: Props<TProjectPhase>) {
-  const { handleSubmit, watch, control } = useForm<FormValues<TProjectPhase>>();
+  const { handleSubmit, watch, control } = useForm<FormValues<TProjectPhase>>({
+    defaultValues: initialValues,
+  });
 
   return (
     <WizardFormLayout title="A quelle phase du projet êtes-vous ?">

diff --git a/...c/features/create-project/views/photovoltaic-power-station/name-and-description/index.tsx b/...c/features/create-project/views/photovoltaic-power-station/name-and-description/index.tsx
@@ -1,36 +1,27 @@
-import { AppDispatch } from "@/app/application/store";
 import {
   completeNaming,
   revertNaming,
 } from "@/features/create-project/application/renewable-energy/renewableEnergy.actions";
-import { selectCreationData } from "@/features/create-project/application/renewable-energy/renewableEnergy.selector";
+import { selectNameAndDescriptionInitialValues } from "@/features/create-project/application/renewable-energy/renewableEnergy.selector";
 import { useAppDispatch, useAppSelector } from "@/shared/views/hooks/store.hooks";
 
-import { ReconversionProjectCreationData } from "../../../domain/project.types";
-import { generateRenewableEnergyProjectName } from "../../../domain/projectName";
 import ProjectNameAndDescriptionForm, {
   FormValues,
 } from "../../common-views/name-and-description/ProjectNameAndDescriptionForm";
 
-const mapProps = (dispatch: AppDispatch, projectData: ReconversionProjectCreationData) => {
-  return {
-    defaultProjectName: generateRenewableEnergyProjectName(projectData.renewableEnergyType),
-    onSubmit: (formData: FormValues) => {
-      dispatch(completeNaming(formData));
-    },
-    onBack: () => {
-      dispatch(revertNaming());
-    },
-  };
-};
-
 function ProjectNameAndDescriptionFormContainer() {
   const dispatch = useAppDispatch();
-  const projectData = useAppSelector(selectCreationData);
+  const initialValues = useAppSelector(selectNameAndDescriptionInitialValues);
 
   return (
     <ProjectNameAndDescriptionForm
-      {...mapProps(dispatch, projectData as ReconversionProjectCreationData)}
+      initialValues={initialValues}
+      onSubmit={(formData: FormValues) => {
+        dispatch(completeNaming(formData));
+      }}
+      onBack={() => {
+        dispatch(revertNaming());
+      }}
     />
   );
 }

diff --git a/...c/features/create-project/views/urban-project/custom-forms/name-and-description/index.tsx b/...c/features/create-project/views/urban-project/custom-forms/name-and-description/index.tsx
@@ -2,15 +2,17 @@ import {
   namingCompleted,
   namingReverted,
 } from "@/features/create-project/application/urban-project/urbanProject.actions";
-import { generateUrbanProjectName } from "@/features/create-project/domain/projectName";
+import { selectNameAndDescriptionInitialValues } from "@/features/create-project/application/urban-project/urbanProject.selectors";
 import ProjectNameAndDescriptionForm from "@/features/create-project/views/common-views/name-and-description/ProjectNameAndDescriptionForm";
-import { useAppDispatch } from "@/shared/views/hooks/store.hooks";
+import { useAppDispatch, useAppSelector } from "@/shared/views/hooks/store.hooks";
 
 function ProjectNameAndDescriptionFormContainer() {
   const dispatch = useAppDispatch();
+  const initialValues = useAppSelector(selectNameAndDescriptionInitialValues);
+
   return (
     <ProjectNameAndDescriptionForm
-      defaultProjectName={generateUrbanProjectName()}
+      initialValues={initialValues}
       onBack={() => {
         dispatch(namingReverted());
       }}

diff --git a/.../web/src/features/create-project/views/urban-project/custom-forms/project-phase/index.tsx b/.../web/src/features/create-project/views/urban-project/custom-forms/project-phase/index.tsx
@@ -4,17 +4,19 @@ import {
   projectPhaseCompleted,
   projectPhaseReverted,
 } from "@/features/create-project/application/urban-project/urbanProject.actions";
+import { selectProjectPhase } from "@/features/create-project/application/urban-project/urbanProject.selectors";
 import {
   getHintTextForUrbanProjectPhase,
   getLabelForUrbanProjectPhase,
   getPictogramForProjectPhase,
 } from "@/shared/domain/projectPhase";
-import { useAppDispatch } from "@/shared/views/hooks/store.hooks";
+import { useAppDispatch, useAppSelector } from "@/shared/views/hooks/store.hooks";
 
 import ProjectPhaseForm from "../../../common-views/project-phase/ProjectPhaseForm";
 
 function ProjectPhaseFormContainer() {
   const dispatch = useAppDispatch();
+  const initialValues = useAppSelector(selectProjectPhase);
 
   const options = URBAN_PROJECT_PHASE_VALUES.map((phase) => ({
     value: phase,
@@ -25,6 +27,7 @@ function ProjectPhaseFormContainer() {
 
   return (
     <ProjectPhaseForm
+      initialValues={initialValues && { phase: initialValues }}
       projectPhaseOptions={options}
       onSubmit={({ phase }) => {
         dispatch(projectPhaseCompleted(phase ?? "unknown"));