import Styles from './survey-result-styles.scss' ; import { Header , Footer , Loading , Error } from '@/presentation/components' ; import { SurveyResultData , surveyResultState , onSurveyAnswerState } from '@/presentation/pages/survey-result/components' ; import { useErrorHandler } from '@/presentation/hooks' ; import { LoadSurveyResult , SaveSurveyResult } from '@/domain/usecases' ; import { useRecoilState , useSetRecoilState , useResetRecoilState } from 'recoil' ; import React , { useEffect } from 'react' ; type Props = { loadSurveyResult : LoadSurveyResult ; saveSurveyResult : SaveSurveyResult ; } ; const SurveyResult = ( { loadSurveyResult , saveSurveyResult } ) => { const resetSurveyResultState = useResetRecoilState ( surveyResultState ) ; const handleError = useErrorHandler ( ( error ) => { setState ( old => ( { ... old , surveyResult : null , isLoading : false , error : error . message } ) ) ; } ) ; const [ state , setState ] = useRecoilState ( surveyResultState ) ; const setOnAnswer = useSetRecoilState ( onSurveyAnswerState ) ; const onAnswer = ( answer ) : void => { if ( ! state . isLoading ) { setState ( old => ( { ... old , isLoading : true } ) ) ; saveSurveyResult . save ( { answer } ) . then ( surveyResult => setState ( old => ( { ... old , isLoading : false , surveyResult } ) ) ) . catch ( handleError ) ; } } ; const reload = ( ) : void => setState ( old => ( { ... old , error : '' , reload : ! old . reload } ) ) ; useEffect ( ( ) => { resetSurveyResultState ( ) ; setOnAnswer ( { onAnswer } ) ; } , [ ] ) ; useEffect ( ( ) => { loadSurveyResult . load ( ) . then ( surveyResult => setState ( old => ( { ... old , surveyResult } ) ) ) . catch ( handleError ) ; } , [ state . reload ] ) ; return ( < div className = { Styles . surveyResultWrap } > < Header /> < div data - testid = "survey-result" className = { Styles . contentWrap } > { state . surveyResult && < SurveyResultData surveyResult = { state . surveyResult } />} { state . isLoading && < Loading />} { state . error && < Error error = { state . error } reload = { reload } / > } < /div> < Footer / > < /div>); } ; export default SurveyResult ;