feat: fix comments debounce, add loading feedback on briefing, hide r…

…eporting legend if no reportings selected
MTES-MCT · Dec 2, 2024 · aef60b5 · aef60b5
1 parent f9eee68
commit aef60b5
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>