1  import React from 'react';
  2  import { PropTypes } from 'prop-types';
  3  import Parser from 'html-react-parser';
  4  import getConfig from 'next/config';
  5  import Modal from '../../modal';
  6  import './style.scss';
  7  
  8  const { publicRuntimeConfig } = getConfig();
  9  
 10  class InterviewsList extends React.Component {
 11    constructor(props) {
 12      super(props);
 13  
 14      this.state = {
 15        activeLetter: 'A',
 16      };
 17    }
 18  
 19    render() {
 20      const { activeLetter } = this.state;
 21  
 22      // Sort interviews alphabetically
 23      const sortedInterviews = this.props.data.sort((a, b) => a.name.localeCompare(b.name));
 24      const interviews = {};
 25  
 26      // Build up interviews object with letter key
 27      sortedInterviews.forEach((interview) => {
 28        const firstLetter = interview.name.charAt(0);
 29  
 30        if (typeof interviews[firstLetter] === 'undefined') {
 31          interviews[firstLetter] = [];
 32        }
 33  
 34        interviews[firstLetter].push(interview);
 35      });
 36  
 37      return (
 38        <div className="interviews-wrap">
 39          <div className="mob-interviews-link">
 40            <button onClick={this.props.toggleInterviewsListModal}>
 41              <span>Interviews ({this.props.data.length})</span>
 42            </button>
 43            <button onClick={this.props.toggleInterviewsListModal}>
 44              <span>View</span> <img src={`${publicRuntimeConfig.subDirPath}/static/img/right-chevron-icon.svg`} alt="right chevron icon" />
 45            </button>
 46          </div>
 47          <Modal
 48            isModalOpen={this.props.isInterviewsListModalOpen}
 49            closeModal={this.props.toggleInterviewsListModal}
 50            modalOnMobileOnly
 51          >
 52            <React.Fragment>
 53              <h4>Interviews</h4>
 54              <div className="interviews-nav-wrap">
 55                <div className="interviews-list">
 56                  {
 57                    Object.keys(interviews).map(firstLetter => (
 58                      <div className="letter-block" key={firstLetter}>
 59                        <div id={firstLetter}>{ firstLetter }</div>
 60                        <ul>
 61                          { interviews[firstLetter].map(interview => (
 62                            <li
 63                              id={interview.id}
 64                              key={interview.id}
 65                            >
 66                              <button onClick={this.props.toggleSingleInterview}>
 67                                { Parser(interview.name) }
 68                              </button>
 69                            </li>
 70                          ))
 71                          }
 72                        </ul>
 73                      </div>
 74                    ))
 75                  }
 76                </div>
 77                <div className="letters-nav">
 78                  {
 79                    Object.keys(interviews).map(firstLetter => (
 80                      <button
 81                        key={firstLetter}
 82                        onClick={() => {
 83                          document.querySelector(`#${firstLetter}`).scrollIntoView({ behavior: 'smooth' });
 84                          this.setState({ activeLetter: firstLetter });
 85                        }}
 86                        className={activeLetter === firstLetter ? 'active' : ''}
 87                      >
 88                        { firstLetter }
 89                      </button>
 90                    ))
 91                  }
 92                </div>
 93              </div>
 94            </React.Fragment>
 95          </Modal>
 96        </div>
 97      );
 98    }
 99  }
100  
101  InterviewsList.propTypes = {
102    isInterviewsListModalOpen: PropTypes.bool.isRequired,
103    data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
104    toggleSingleInterview: PropTypes.func.isRequired, /* eslint-disable-line */
105    toggleInterviewsListModal: PropTypes.func.isRequired,
106  };
107  
108  export default InterviewsList;