fix: update old feedback logic to suit the new feedback endpoint

src/components/Feedbacks/ButtonsOptions.tsx

@@ -1,67 +1,76 @@
-import {
-  feedbackButtonsChoice,
-  type satisfiedButtons,
-  type unsatisfiedButtons,
-} from '@constants/feedback'
+import { feedbackButtonsChoice } from '@constants/feedback'
+import type {
+  NegativeFeedbackArray,
+  NegativeReason,
+  PositiveFeedbackArray,
+  PositiveReason,
+} from '@types'
+import type React from 'react'
 
-export function ButtonsOptions({
+type ButtonsOptionsProps<T extends PositiveReason | NegativeReason> = {
+  isFirst: boolean
+  buttonsType: Record<string, T>
+  reasons: T[]
+  setReasons: (reasons: T[]) => void
+  setOtherReason: React.Dispatch<React.SetStateAction<string>>
+  setButtonsType: React.Dispatch<React.SetStateAction<Record<string, T>>>
+}
+
+export function ButtonsOptions<T extends PositiveReason | NegativeReason>({
   isFirst,
   buttonsType,
   reasons,
   setReasons,
   setButtonsType,
   setOtherReason,
-}: {
-  isFirst: boolean
-  buttonsType: typeof satisfiedButtons | typeof unsatisfiedButtons
-  reasons: string[]
-  setReasons: (reasons: string[]) => void
-  setOtherReason: React.Dispatch<React.SetStateAction<string>>
-  setButtonsType: any
-}) {
-  const handleClick = (index: number) => {
-    if (isOtherReasonButton(buttonsType[index])) {
-      const newArray = buttonsType.filter((b) => b.type !== buttonsType[index].type)
-      setButtonsType(newArray)
-    }
-    const reasonValue = buttonsType[index].type
-    if (!reasonValue.includes('tag-')) {
-      if (reasons.includes(reasonValue)) {
-        setReasons(reasons.filter((reason) => reason !== reasonValue))
-      } else {
-        setReasons([reasonValue])
-      }
+}: ButtonsOptionsProps<T>) {
+  console.log(
+    'isFirst:',
+    isFirst,
+    'buttonsType:',
+    buttonsType,
+    'reasons:',
+    reasons,
+    'setReasons:',
+    setReasons,
+    'setButtonsType:',
+    setButtonsType,
+  )
+
+  const handleClick = (reasonValue: T) => {
+    console.log('handleclick:', 'reasonValue:', reasonValue)
+    if (reasons.includes(reasonValue)) {
+      // Remove the reason if already selected
+      setReasons(reasons.filter((reason) => reason !== reasonValue))
+    } else {
+      // Set a single reason
+      setReasons([reasonValue])
     }
   }
 
   return (
     <div className="wrap-message">
       {isFirst &&
-        buttonsType.map((button: { text: string; type: string }, index: number) => {
-          const reasonValue = buttonsType[index].type
-          const classNames =
-            reasons.includes(reasonValue) ||
-            (isOtherReasonButton(button) && reasons.includes('other'))
-              ? 'fr-background-action-high--blue-france'
-              : 'fr-background-default--grey'
+        Object.entries(buttonsType).map(([displayText, reasonValue], index) => {
+          const isSelected = reasons.includes(reasonValue)
+          const classNames = isSelected
+            ? 'fr-background-action-high--blue-france'
+            : 'fr-background-default--grey'
 
           return (
             <div key={index}>
               <button
                 type="button"
-                role={feedbackButtonsChoice(button)}
+                role={feedbackButtonsChoice(reasonValue)}
                 className={`user-feedback-buttons fr-text-action-high--blue-france ${classNames}`}
-                onClick={() => handleClick(index)}
+                onClick={() => handleClick(reasonValue)}
               >
                 <p
                   className={
-                    reasons.includes(reasonValue) ||
-                    (isOtherReasonButton(button) && reasons.includes('other'))
-                      ? 'text-white'
-                      : 'fr-text-action-high--blue-france'
+                    isSelected ? 'text-white' : 'fr-text-action-high--blue-france'
                   }
                 >
-                  {button.text}
+                  {displayText}
                 </p>
               </button>
             </div>
@@ -71,6 +80,6 @@ export function ButtonsOptions({
   )
 }
 
-function isOtherReasonButton(button) {
-  return button.type.includes('tag-')
+function isOtherReasonButton(reason: string) {
+  return reason.startsWith('tag-')
 }

src/components/Feedbacks/UserFeedbackOptions.tsx

@@ -1,10 +1,15 @@
 import { useAddFeedback } from '@api'
+import { feedbackConfirmationButton } from '@constants/feedback'
 import {
-  feedbackConfirmationButton,
-  satisfiedButtons,
-  unsatisfiedButtons,
-} from '@constants/feedback'
-import type { Feedback as FeedbackType, RootState } from '@types'
+  negativeTags,
+  positiveTags,
+  type Feedback as FeedbackType,
+  type NegativeFeedbackArray,
+  type PositiveFeedbackArray,
+  type RootState,
+  type PositiveReason,
+  type NegativeReason,
+} from '@types'
 import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { GlobalColContainer } from '../Global/GlobalColContainer'
@@ -22,30 +27,63 @@ export function UserFeedbackOptions({
   feedback: FeedbackType
   setFeedback: (feedback: FeedbackType) => void
 }) {
-  const [reasons, setReasons] = useState<string[]>([])
   const [otherReason, setOtherReason] = useState('')
-  const [buttonsType, setButtonsType] = useState(
-    activeTab === 0 ? satisfiedButtons : unsatisfiedButtons,
-  )
+
+  // Determine if we're dealing with positive or negative reasons
+  const isPositive = activeTab === 0
+
+  // Maintain separate states for positive and negative reasons
+  const [positiveReasons, setPositiveReasons] = useState<PositiveFeedbackArray>([])
+  const [negativeReasons, setNegativeReasons] = useState<NegativeFeedbackArray>([])
+
+  // Determine which tags to show based on activeTab
+  const [buttonsType, setButtonsType] = useState(isPositive ? positiveTags : negativeTags)
+
   useEffect(() => {
-    setReasons([])
-    setButtonsType(activeTab === 0 ? satisfiedButtons : unsatisfiedButtons)
+    if (isPositive) {
+      setPositiveReasons([])
+      setButtonsType(positiveTags)
+    } else {
+      setNegativeReasons([])
+      setButtonsType(negativeTags)
+    }
   }, [activeTab])
 
   return (
     <GlobalColContainer>
-      <ButtonsOptions
-        isFirst={isFirst}
-        buttonsType={buttonsType}
-        reasons={reasons}
-        setReasons={setReasons}
-        setButtonsType={setButtonsType}
-        setOtherReason={setOtherReason}
-      />
+      {isPositive ? (
+        <ButtonsOptions<PositiveReason>
+          isFirst={isFirst}
+          buttonsType={buttonsType as Record<string, PositiveReason>}
+          reasons={positiveReasons}
+          setReasons={setPositiveReasons}
+          setButtonsType={
+            setButtonsType as React.Dispatch<
+              React.SetStateAction<Record<string, PositiveReason>>
+            >
+          }
+          setOtherReason={setOtherReason}
+        />
+      ) : (
+        <ButtonsOptions<NegativeReason>
+          isFirst={isFirst}
+          buttonsType={buttonsType as Record<string, NegativeReason>}
+          reasons={negativeReasons}
+          setReasons={setNegativeReasons}
+          setButtonsType={
+            setButtonsType as React.Dispatch<
+              React.SetStateAction<Record<string, NegativeReason>>
+            >
+          }
+          setOtherReason={setOtherReason}
+        />
+      )}
 
       <UserFeedbackResume feedback={feedback} />
+
       <ConfirmationButton
-        reasons={reasons}
+        // Pass the correct reasons array based on activeTab
+        reasons={isPositive ? positiveReasons : negativeReasons}
         otherReason={otherReason}
         feedback={feedback}
         setFeedback={setFeedback}
@@ -60,7 +98,7 @@ const ConfirmationButton = ({
   feedback,
   setFeedback,
 }: {
-  reasons: string[]
+  reasons: PositiveFeedbackArray | NegativeFeedbackArray
   otherReason: string
   feedback: FeedbackType
   setFeedback: (feedback: FeedbackType) => void
@@ -69,26 +107,25 @@ const ConfirmationButton = ({
   const addFeedback = useAddFeedback()
 
   const handleConfirm = () => {
-    otherReason &&
-      !reasons.includes(otherReason) &&
-      setFeedback({
-        ...feedback,
-        message: otherReason,
-      })
-    addFeedback.mutate({ feedback, streamId })
-    setFeedback({
+    const updatedFeedback = {
       ...feedback,
+      positives: !feedback.isGood ? ([...reasons] as PositiveFeedbackArray) : [],
+      negatives: !feedback.isGood ? [] : ([...reasons] as NegativeFeedbackArray),
       isConfirmed: true,
-    })
+    }
+
+    setFeedback(updatedFeedback)
+    addFeedback.mutate({ feedback: updatedFeedback, streamId })
   }
+
   return (
     <button
       type="button"
       role={feedbackConfirmationButton}
       onClick={handleConfirm}
-      className={'border fr-text-action-high--blue-france'}
+      className="border fr-text-action-high--blue-france"
     >
-      <p className="fr-text-action-high--blue-france fr-p-1w">Confirmer </p>
+      <p className="fr-text-action-high--blue-france fr-p-1w">Confirmer</p>
     </button>
   )
 }

src/components/Feedbacks/UserFeedbackResume.tsx

@@ -4,12 +4,19 @@ import type { Feedback } from '@types'
 
 export function UserFeedbackResume({ feedback }: { feedback: Feedback }) {
   return (
+    /*
     <div role={feedbackResume} className="wrap-message fr-mb-2w">
-      {feedback.reasons.map((button, index) => (
+      {feedback.positives.map((button, index) => (
         <Tag key={index} className="fr-m-1v">
           {button}
         </Tag>
       ))}
-    </div>
+      {feedback.negatives.map((button, index) => (
+        <Tag key={index} className="fr-m-1v">
+          {button}
+        </Tag>
+      ))}
+    </div>*/
+    <></>
   )
 }

src/pages/Evaluations.tsx

@@ -13,11 +13,13 @@ import { TextWithSources } from 'components/Sources/TextWithSources'
 import { EventSourcePolyfill } from 'event-source-polyfill'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { onCloseStream } from '../utils/eventsEmitter'
-import type {
-  NegativeFeedbackArray,
-  NegativeReason,
-  PositiveFeedbackArray,
-  PositiveReason,
+import {
+  negativeTags,
+  positiveTags,
+  type NegativeFeedbackArray,
+  type NegativeReason,
+  type PositiveFeedbackArray,
+  type PositiveReason,
 } from '@types'
 import { LoadingSpinner } from 'components/LoadingSpinner'
 import { set } from 'valibot'
@@ -247,21 +249,6 @@ function EvaluationPannel({
   const [progress, setProgress] = useState(100)
   const addFeedback = useAddFeedback()
 
-  const positiveTags: {
-    [index: string]: PositiveReason
-  } = {
-    Clair: 'clair',
-    Synthétique: 'synthetique',
-    Complet: 'complet',
-    'Sources fiables': 'sources_fiables',
-  }
-  const negativeTags: {
-    [index: string]: NegativeReason
-  } = {
-    Incorrect: 'incorrect',
-    Incohérent: 'incoherent',
-    'Manque de sources': 'manque_de_sources',
-  }
   const isSubmitDisabled = !(
     rating &&
     (positiveFeedback.length > 0 || negativeFeedback.length > 0) &&

src/types.ts

@@ -145,6 +145,22 @@ export type NegativeReason = 'incorrect' | 'incoherent' | 'manque_de_sources'
 export type PositiveFeedbackArray = Array<PositiveReason>
 export type NegativeFeedbackArray = Array<NegativeReason>
 
+export const positiveTags: {
+  [index: string]: PositiveReason
+} = {
+  Clair: 'clair',
+  Synthétique: 'synthetique',
+  Complet: 'complet',
+  'Sources fiables': 'sources_fiables',
+}
+export const negativeTags: {
+  [index: string]: NegativeReason
+} = {
+  Incorrect: 'incorrect',
+  Incohérent: 'incoherent',
+  'Manque de sources': 'manque_de_sources',
+}
+
 /**œ
  * Feedback form after a meeting response
  */