import * as S from "./style" ; import * as I from "../../../Asset/SVG" ; import { HasAdminToken } from "Atom" ; import { useRecoilValue } from "recoil" ; import ModalContainer from "../ModalContainer" ; import { EditModal } from ".." ; import ReactModal from "react-modal" ; import answer from "Api/answer" ; import improvement from "Api/improvement" ; import { useState , useEffect } from "react" ; const useGetModalValue = ( idx , state ) => { const [ Idx , title , content ] = state === "improvement" ? GetImprovementValue ( idx || 0 ) : GetAnswerValue ( idx || 0 ) ; return [ Idx , title , content ] ; } ; const GetAnswerValue = ( idx ) => { const [ Idx , setIdx ] = useState ( "" ) ; const [ title , setTitle ] = useState ( "" ) ; const [ Content , setContent ] = useState ( "" ) ; const getAnswer = async ( ) => { try { const res = await answer . getAnswer ( idx ) ; return res . data ; } catch ( e ) { alert ( "에러가 발생하였습니다. 개발팀에 문의해주세요. " + e ) ; } } ; useEffect ( ( ) => { getAnswer ( ) . then ( ( res ) => { setIdx ( res . data . answerIdx ) ; setTitle ( res . data . title ) ; setContent ( res . data . content ) ; } ) ; } , [ ] ) ; return [ Idx , title , Content ] ; } ; const GetImprovementValue = ( idx ) => { const [ Idx , setIdx ] = useState ( "" ) ; const [ improveHeader , setImproveHeader ] = useState ( "" ) ; const [ improveContent , setImproveContent ] = useState ( "" ) ; const idxCopy = idx . toString ( ) ; const getImprovement = async ( ) => { try { const res = await improvement . getImprovement ( ) ; return await res . data . list . filter ( ( data ) => data . improveIdx === idxCopy ) ; } catch ( e ) { alert ( "에러가 발생하였습니다. 개발팀에 문의해주세요. " + e ) ; } } ; useEffect ( ( ) => { getImprovement ( ) . then ( ( res ) => { setIdx ( res [ 0 ] . improveIdx ) ; setImproveHeader ( res [ 0 ] . title ) ; setImproveContent ( res [ 0 ] . content ) ; } ) ; } , [ ] ) ; return [ Idx , improveHeader , improveContent ] ; } ; const ViewModalPresenter = ( { idx , state , key , buttonContent } ) => { const [ modalIsOpen , setModalIsOpen ] = useState < boolean > ( false ) ; const [ openModal , closeModal ] = ModalContainer ( setModalIsOpen ) ; const randomNumber = Math . floor ( Math . random ( ) * 2 ) + 1 ; const logged = useRecoilValue ( HasAdminToken ) ; const [ Idx , title , content ] = useGetModalValue ( idx || key || 0 , state || "" ) ; return ( < > < button onClick = { openModal } > { buttonContent } < /button> < ReactModal isOpen = { modalIsOpen } onRequestClose = { closeModal } contentLabel = "Modal" > < S . ModalWrapper > < S . ModalHeader > < S . H1 > { title } < /S.H1> { logged && ( < EditModal idx = { Number ( Idx ) } state = { state ?? "" } heading = { "수정하기" } content = { content } title = { title } isComponents = { true } / > ) } < /S.ModalHeader> < S . GridDivider > < S . Text > { content ?. split ( "\n" ) . map ( ( content ) => { return ( < > { content } < br / > < />); } ) } < /S.Text> < S . ViewImg > { { 1 : < I . ImprovementSvg1 />, 2 : < I . ImprovementSvg2 />, } [ randomNumber ] } < /S.ViewImg> < /S.GridDivider> < /S.ModalWrapper> < /ReactModal> < />); } ; export default ViewModalPresenter ;