From 17d711c3b77f8f3f8d5e70ae00e97f9970dd4bbd Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Wed, 27 Nov 2024 12:06:02 +0100
Subject: [PATCH 1/2] feat: fix comments debounce, add loading feedback on
 briefing, hide reporting legend if no reportings selected

---
 .../DashboardForm/Comments/index.tsx          | 23 +++++---
 .../components/Pdf/Comments/index.tsx         |  8 ++-
 .../components/Pdf/GeneratePdfButton.tsx      |  4 +-
 .../components/Pdf/Reportings/index.tsx       | 52 ++++++++++---------
 4 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx
index 71020f7a5..73b8f7aa0 100644
--- a/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx
+++ b/frontend/src/features/Dashboard/components/DashboardForm/Comments/index.tsx
@@ -2,7 +2,7 @@ import { dashboardActions } from '@features/Dashboard/slice'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { Textarea } from '@mtes-mct/monitor-ui'
 import { debounce } from 'lodash'
-import { forwardRef, useState } from 'react'
+import { forwardRef, useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
 import { Accordion } from '../Accordion'
@@ -19,14 +19,21 @@ export const Comments = forwardRef<HTMLDivElement, CommentsProps>(
     const dispatch = useAppDispatch()
     const [commentsValue, setCommentsValue] = useState(comments)
 
-    const onQuery = debounce((value: string | undefined) => {
-      dispatch(dashboardActions.setComments({ comments: value, key: dashboardKey }))
-    }, 500)
+    const onQuery = useMemo(
+      () =>
+        debounce((value: string | undefined) => {
+          dispatch(dashboardActions.setComments({ comments: value, key: dashboardKey }))
+        }, 500),
+      [dashboardKey, dispatch]
+    )
 
-    const updateComments = (value: string | undefined) => {
-      setCommentsValue(value)
-      onQuery(value)
-    }
+    const updateComments = useCallback(
+      (value: string | undefined) => {
+        setCommentsValue(value)
+        onQuery(value)
+      },
+      [onQuery]
+    )
 
     return (
       <Accordion
diff --git a/frontend/src/features/Dashboard/components/Pdf/Comments/index.tsx b/frontend/src/features/Dashboard/components/Pdf/Comments/index.tsx
index 985875c42..e2de25fa7 100644
--- a/frontend/src/features/Dashboard/components/Pdf/Comments/index.tsx
+++ b/frontend/src/features/Dashboard/components/Pdf/Comments/index.tsx
@@ -28,7 +28,13 @@ export function Comments({ comments }: { comments: string | undefined }) {
     <>
       <Text style={layoutStyle.title}>Commentaires</Text>
       <View style={{ flexDirection: 'row', gap: 10.5 }}>
-        {!!comments && getPrettyComments(comments).map(comment => <Text style={styles.comments}>{comment}</Text>)}
+        {!!comments &&
+          getPrettyComments(comments).map((comment, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Text key={index} style={styles.comments}>
+              {comment}
+            </Text>
+          ))}
       </View>
     </>
   )
diff --git a/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx b/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx
index abf2774e5..06ba8b052 100644
--- a/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx
+++ b/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx
@@ -87,8 +87,8 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
   }
 
   return (
-    <StyledLinkButton Icon={Icon.Document} onClick={handleDownload}>
-      Générer un brief
+    <StyledLinkButton disabled={pdf.loading} Icon={Icon.Document} onClick={handleDownload}>
+      {pdf.loading ? 'Chargement du brief' : 'Générer un brief'}
     </StyledLinkButton>
   )
 }
diff --git a/frontend/src/features/Dashboard/components/Pdf/Reportings/index.tsx b/frontend/src/features/Dashboard/components/Pdf/Reportings/index.tsx
index 4e4e6072f..63e783e87 100644
--- a/frontend/src/features/Dashboard/components/Pdf/Reportings/index.tsx
+++ b/frontend/src/features/Dashboard/components/Pdf/Reportings/index.tsx
@@ -173,35 +173,37 @@ export function Reportings({
         <Text style={layoutStyle.selected}>{reportings.length} sélectionnée(s)</Text>
       </View>
       <View style={layoutStyle.cardWrapper}>
-        <View style={styles.legendCard}>
-          <View style={layoutStyle.row}>
-            <View style={{ flex: 1 }}>
-              <Text style={{ fontWeight: 'bold' }}>Signalements en cours</Text>
-              <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
-                <Flag color={THEME.color.blueGray} />
-                <Text>Observation</Text>
+        {reportings.length > 0 && (
+          <View style={styles.legendCard}>
+            <View style={layoutStyle.row}>
+              <View style={{ flex: 1 }}>
+                <Text style={{ fontWeight: 'bold' }}>Signalements en cours</Text>
+                <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
+                  <Flag color={THEME.color.blueGray} />
+                  <Text>Observation</Text>
+                </View>
+                <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
+                  <Flag color={THEME.color.maximumRed} /> <Text>Suspicion d&apos;infraction</Text>
+                </View>
+                <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
+                  <Flag color={THEME.color.mediumSeaGreen} /> <Text>Rattaché à une mission</Text>
+                </View>
               </View>
-              <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
-                <Flag color={THEME.color.maximumRed} /> <Text>Suspicion d&apos;infraction</Text>
-              </View>
-              <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
-                <Flag color={THEME.color.mediumSeaGreen} /> <Text>Rattaché à une mission</Text>
-              </View>
-            </View>
-            <View style={{ flex: 1 }}>
-              <Text style={{ fontWeight: 'bold' }}>Signalements archivés</Text>
-              <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
-                <FlagArchivedObservation /> <Text>Observation</Text>
-              </View>
-              <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
-                <FlagArchivedInfraction /> <Text>Suspicion d&apos;infraction</Text>
-              </View>
-              <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
-                <FlagArchivedWithMission /> <Text>Rattaché à une mission</Text>
+              <View style={{ flex: 1 }}>
+                <Text style={{ fontWeight: 'bold' }}>Signalements archivés</Text>
+                <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
+                  <FlagArchivedObservation /> <Text>Observation</Text>
+                </View>
+                <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
+                  <FlagArchivedInfraction /> <Text>Suspicion d&apos;infraction</Text>
+                </View>
+                <View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
+                  <FlagArchivedWithMission /> <Text>Rattaché à une mission</Text>
+                </View>
               </View>
             </View>
           </View>
-        </View>
+        )}
         {reportings.map(reporting => (
           <View key={reporting.id} style={[styles.reportingCard, { position: 'relative' }]}>
             <View style={{ left: 3, position: 'absolute', top: 9 }}>{reportingStatusFlag(reporting)}</View>

From 9adbc4514285570cb1e1f06f52843d093583741d Mon Sep 17 00:00:00 2001
From: Maxime Perrault <maxperrault94@gmail.com>
Date: Mon, 2 Dec 2024 17:05:57 +0100
Subject: [PATCH 2/2] feat: Add spinner to download button

---
 .../components/Pdf/GeneratePdfButton.tsx         | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx b/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx
index 06ba8b052..53eebf07d 100644
--- a/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx
+++ b/frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx
@@ -87,10 +87,22 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
   }
 
   return (
-    <StyledLinkButton disabled={pdf.loading} Icon={Icon.Document} onClick={handleDownload}>
+    <StyledLinkButton disabled={pdf.loading} Icon={pdf.loading ? Icon.Reset : Icon.Document} onClick={handleDownload}>
       {pdf.loading ? 'Chargement du brief' : 'Générer un brief'}
     </StyledLinkButton>
   )
 }
 
-const StyledLinkButton = styled(Button)``
+const StyledLinkButton = styled(Button)`
+  ${p =>
+    p.disabled &&
+    `@keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  > .Element-IconBox > svg {
+    animation: spin 2s linear infinite;
+    transform-origin: center;
+  }`}
+`