1  import React from 'react';
 2  import { PropTypes } from 'prop-types';
 3  import Parser from 'html-react-parser';
 4  import Modal from '../../modal';
 5  import './style.scss';
 6  
 7  const SingleInterview = props => (
 8    <Modal
 9      isModalOpen
10      closeModal={props.toggleSingleInterview}
11    >
12      <div className="single-interview">
13        <div className="number">{ props.activeSingleInterviewId.toString().padStart(3, '0') }</div>
14        <div className="name"> { Parser(props.selectedInterview.name) } </div>
15        { props.selectedInterview.interview.filter(interview => interview.answer !== null)
16          .map((interview, index) => {
17            const question = props.questions.find(q => q.id === interview.question);
18  
19            return (
20              <div className="qa-block" key={`question-${question.id}`}>
21                <p className="question">{index + 1}) { question.text }</p>
22                <div className="answer">{ Parser(interview.answer) }</div>
23              </div>
24            );
25          })
26        }
27      </div>
28    </Modal>
29  );
30  
31  SingleInterview.propTypes = {
32    activeSingleInterviewId: PropTypes.number.isRequired,
33    selectedInterview: PropTypes.shape({
34      name: PropTypes.string.isRequired,
35      interview: PropTypes.array.isRequired,
36    }).isRequired,
37    toggleSingleInterview: PropTypes.func.isRequired,
38    questions: PropTypes.arrayOf(PropTypes.shape({
39      id: PropTypes.string.isRequired,
40      text: PropTypes.string.isRequired,
41    })).isRequired,
42  };
43  
44  export default SingleInterview;