From 1881019c449a7fbb202a35c6cbe60daee1aa6f09 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Mon, 24 Jul 2023 18:07:06 +0200
Subject: [PATCH] Ajoute une jolie animation sur la liste des statuts
 disponibles

---
 site/package.json                                  |  1 +
 .../_components/StatutsDisponibles.tsx             | 14 ++++++++++----
 .../choix-du-statut/détails-activité.tsx           |  2 +-
 yarn.lock                                          | 11 +++++++++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/site/package.json b/site/package.json
index f5b3f5445..a60df9256 100644
--- a/site/package.json
+++ b/site/package.json
@@ -77,6 +77,7 @@
 		"react-day-picker": "^8.7.1",
 		"react-dom": "^18.2.0",
 		"react-easy-emoji": "^1.8.1",
+		"react-flip-move": "^3.0.5",
 		"react-helmet-async": "^1.3.0",
 		"react-i18next": "^12.1.5",
 		"react-instantsearch": "^6.38.1",
diff --git a/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx b/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx
index 7a639d444..3c27e87ab 100644
--- a/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx
@@ -1,4 +1,6 @@
 import { DottedName } from 'modele-social'
+import { forwardRef } from 'react'
+import FlipMove from 'react-flip-move'
 import styled from 'styled-components'
 
 import { StatutTag, StatutType } from '@/components/StatutTag'
@@ -35,7 +37,8 @@ export default function StatutsDisponibles() {
 				Les statuts disponibles diffèrent en fonction de l'activité
 				professionnelle que vous exercez
 			</SmallBody>
-			<StyledUl noMarker>
+
+			<StyledUl noMarker as={FlipMove}>
 				{statuts.map((statut) => (
 					<Statut key={statut} statut={statut} />
 				))}
@@ -74,7 +77,10 @@ const StyledMessage = styled(Message)`
 	}
 `
 
-function Statut({ statut }: { statut: DottedName }) {
+const Statut = forwardRef(function Statut(
+	{ statut }: { statut: DottedName },
+	ref: React.Ref<HTMLLIElement>
+) {
 	const engine = useEngine()
 	const disabled = engine.evaluate({ '=': [statut, 'non'] }).nodeValue === true
 
@@ -82,12 +88,12 @@ function Statut({ statut }: { statut: DottedName }) {
 		engine.getRule(statut).title.toLocaleLowerCase()) as StatutType
 
 	return (
-		<Li className={disabled ? 'disabled' : ''}>
+		<Li ref={ref} className={disabled ? 'disabled' : ''}>
 			<StyledSpan>{engine.getRule(statut).title}</StyledSpan>
 			<StatutTag statut={acronyme} text="acronym" showIcon />
 		</Li>
 	)
-}
+})
 
 const StyledSpan = styled.span``
 
diff --git a/site/source/pages/assistants/choix-du-statut/détails-activité.tsx b/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
index 156d36bb3..5395987b6 100644
--- a/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
+++ b/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
@@ -51,7 +51,7 @@ export default function DétailsActivité() {
 		) {
 			setCodeGuichet(defaultCodeGuichet)
 		}
-	}, [])
+	}, [guichetEntries])
 
 	// Wait for the update to be done before rendering the component
 	const isIdle = useEngineIsIdle()
diff --git a/yarn.lock b/yarn.lock
index 7e4991853..041254fb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22922,6 +22922,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-flip-move@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "react-flip-move@npm:3.0.5"
+  peerDependencies:
+    react: ">=16.3.x"
+    react-dom: ">=16.3.x"
+  checksum: d216ab35638d232f6ca994e52348f78464c3576c6036423795cbb87d4b25e31abb94685f5b645f34bf9adbaae6cb9d3b3d55fba99fa64d56aa05e7c3bf246655
+  languageName: node
+  linkType: hard
+
 "react-helmet-async@npm:^1.3.0":
   version: 1.3.0
   resolution: "react-helmet-async@npm:1.3.0"
@@ -24707,6 +24717,7 @@ __metadata:
     react-day-picker: ^8.7.1
     react-dom: ^18.2.0
     react-easy-emoji: ^1.8.1
+    react-flip-move: ^3.0.5
     react-helmet-async: ^1.3.0
     react-i18next: ^12.1.5
     react-instantsearch: ^6.38.1