diff --git a/src/components/form/Question.tsx b/src/components/form/Question.tsx index af4bbf640..73d0eb3eb 100644 --- a/src/components/form/Question.tsx +++ b/src/components/form/Question.tsx @@ -111,7 +111,6 @@ export default function Question({ if (setTempValue) { setTempValue(value) } - console.log('set value via numberInput') setValue(value, { foldedStep: question }) trackEvent(questionTypeAnswer({ question, answer: value })) }} diff --git a/src/components/form/question/NumberInput.tsx b/src/components/form/question/NumberInput.tsx index 281b2d3ef..d50b51e3a 100644 --- a/src/components/form/question/NumberInput.tsx +++ b/src/components/form/question/NumberInput.tsx @@ -1,5 +1,5 @@ import Trans from '@/components/translation/Trans' -import { HTMLAttributes, SyntheticEvent } from 'react' +import { HTMLAttributes, SyntheticEvent, useRef } from 'react' import { NumberFormatValues, NumericFormat } from 'react-number-format' import { twMerge } from 'tailwind-merge' @@ -23,7 +23,7 @@ export default function NumberInput({ id, ...props }: HTMLAttributes & Props) { - let timeout: NodeJS.Timeout | null = null + const timeoutRef = useRef() const handleValueChange = ( values: NumberFormatValues, @@ -34,10 +34,10 @@ export default function NumberInput({ ) => { // If the value change because we typed something, we debounce it if (sourceInfo.source === 'event') { - if (timeout) { - clearTimeout(timeout) + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) } - timeout = setTimeout(() => { + timeoutRef.current = setTimeout(() => { setCorrectValue(values.value) }, 300) return diff --git a/src/components/form/question/Suggestions.tsx b/src/components/form/question/Suggestions.tsx index b5aa56154..9ec2cd77b 100644 --- a/src/components/form/question/Suggestions.tsx +++ b/src/components/form/question/Suggestions.tsx @@ -2,7 +2,7 @@ import { questionClickSuggestion } from '@/constants/tracking/question' import { useRule } from '@/publicodes-state' -import { Suggestion } from '@/publicodes-state/types' +import { FormattedSuggestion } from '@/publicodes-state/types' import { trackEvent } from '@/utils/matomo/trackEvent' import { DottedName, NodeValue } from '@incubateur-ademe/nosgestesclimat' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -23,12 +23,12 @@ export default function Suggestions({ }: Props) { const { suggestions } = useRule(question) - const [selectedSuggestions, setSelectedSuggestions] = useState( - [] - ) + const [selectedSuggestions, setSelectedSuggestions] = useState< + FormattedSuggestion[] + >([]) const handleSuggestionClick = useCallback( - (suggestion: Suggestion) => { + (suggestion: FormattedSuggestion) => { trackEvent( questionClickSuggestion({ question, answer: suggestion.label }) ) @@ -54,22 +54,25 @@ export default function Suggestions({ break } }, - [question, setValue, type] + [question, type] ) - const handleSuggestionDelete = useCallback((suggestion: Suggestion) => { - setSelectedSuggestions((prevSelectedSuggestions) => - prevSelectedSuggestions.filter( - (prevSelectedSuggestion) => - prevSelectedSuggestion.label !== suggestion.label + const handleSuggestionDelete = useCallback( + (suggestion: FormattedSuggestion) => { + setSelectedSuggestions((prevSelectedSuggestions) => + prevSelectedSuggestions.filter( + (prevSelectedSuggestion) => + prevSelectedSuggestion.label !== suggestion.label + ) ) - ) - }, []) + }, + [] + ) const valueOfSelectedSuggestions = useMemo( () => selectedSuggestions.reduce( - (acc, suggestion) => acc + suggestion.value, + (acc, suggestion) => acc + Number(suggestion.value), 0 ), [selectedSuggestions] diff --git a/src/components/form/question/suggestions/SuggestionButton.tsx b/src/components/form/question/suggestions/SuggestionButton.tsx index 2bde6b511..80d45a8f5 100644 --- a/src/components/form/question/suggestions/SuggestionButton.tsx +++ b/src/components/form/question/suggestions/SuggestionButton.tsx @@ -7,15 +7,15 @@ import { getTextCategoryColor, } from '@/helpers/getCategoryColorClass' import { useForm } from '@/publicodes-state' -import { Suggestion } from '@/publicodes-state/types' +import { FormattedSuggestion } from '@/publicodes-state/types' import { capitalizeString } from '@/utils/capitalizeString' import { twMerge } from 'tailwind-merge' type Props = { - suggestion: Suggestion + suggestion: FormattedSuggestion type: 'radio' | 'checkbox' - handleSuggestionClick: (suggestion: Suggestion) => void - handleSuggestionDelete: (suggestion: Suggestion) => void + handleSuggestionClick: (suggestion: FormattedSuggestion) => void + handleSuggestionDelete: (suggestion: FormattedSuggestion) => void numberOfSelections: number }