{"size": 1540, "ext": "js", "max_stars_repo_path": "client/src/views/page-components/ChatDetailPage/ChatDetailPageFooter/ChatDetailPageFooter.js", "max_stars_repo_name": "Kwongiseok/deal-7", "max_stars_repo_stars_event_min_datetime": "2021-07-16T12:15:24.000Z", "max_stars_repo_stars_event_max_datetime": "2021-07-26T09:09:26.000Z", "max_issues_repo_path": "client/src/views/page-components/ChatDetailPage/ChatDetailPageFooter/ChatDetailPageFooter.js", "max_issues_repo_name": "Kwongiseok/deal-7", "max_issues_repo_issues_event_min_datetime": "2021-07-13T04:00:52.000Z", "max_issues_repo_issues_event_max_datetime": "2021-07-22T17:22:08.000Z", "max_forks_repo_path": "client/src/views/page-components/ChatDetailPage/ChatDetailPageFooter/ChatDetailPageFooter.js", "max_forks_repo_name": "Kwongiseok/deal-7", "max_forks_repo_forks_event_min_datetime": "2021-07-16T12:15:29.000Z", "max_forks_repo_forks_event_max_datetime": "2021-07-16T12:15:29.000Z"}
{"max_stars_count": 3, "max_issues_count": 31, "max_forks_count": 1, "avg_line_length": 30.1960784314, "max_line_length": 83, "alphanum_fraction": 0.6136363636}
import { SEND_ICON } from '../../../../constants/imagePath.js';
import { createDOMwithSelector } from '../../../../utils/createDOMwithSelector.js';

export default function ChatDetailPageFooter({ $target, onSendChatHandler }) {
  this.state = {
    text: '',
  };
  this.$footer = createDOMwithSelector('div', '.chatDetailPageFooter');

  $target.appendChild(this.$footer);
  this.$footer.innerHTML = `
      <input class="chatDetailPageFooter__input" placeholder="메시지를 입력하세요."/>
      <button class="chatDetailPageFooter__button">
        <img class="chatDetailPageFooter__icon" src="${SEND_ICON}"/>
      </button>
    `;

  this.$sendButton = document.querySelector('.chatDetailPageFooter__button');

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };
  this.render = () => {
    this.$sendButton.disabled = !(this.state.text.length > 0);
  };

  this.bindEvent = () => {
    const $input = document.querySelector('.chatDetailPageFooter__input');
    this.$sendButton.onclick = () => {
      onSendChatHandler(this.state.text);
      $input.value = '';
      this.setState({ text: '' });
    };
    // $input 이벤트를 두 개로 나눈 이유 : 서로 반응하는 타이밍이 각기 달라서 문제가 생김.
    $input.addEventListener('input', (e) => {
      this.setState({ text: e.target.value });
    });
    $input.onkeypress = (e) => {
      if (e.key === 'Enter') {
        onSendChatHandler(e.target.value);
        e.target.value = '';
        this.setState({ text: e.target.value });
      }
    };
  };
  this.bindEvent();

  this.render();
}
