{"size": 1049, "ext": "js", "max_stars_repo_path": "src/components/Modal/Modal.js", "max_stars_repo_name": "vzhny/start-vizhnay-io", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Modal/Modal.js", "max_issues_repo_name": "vzhny/start-vizhnay-io", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Modal/Modal.js", "max_forks_repo_name": "vzhny/start-vizhnay-io", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.8541666667, "max_line_length": 64, "alphanum_fraction": 0.5834127741}
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Form from '../../containers/Form/Form';
import Card from '../Card/Card';
import { modal, backdrop } from './Modal.module.scss';

const Modal = ({ clicked, linksUpdated }) => {
  const handleEscKey = e => {
    const keys = {
      27: () => {
        e.preventDefault();
        clicked();
        window.removeEventListener('keyup', handleEscKey);
      },
    };

    if (keys[e.keyCode]) {
      keys[e.keyCode]();
    }
  };

  useEffect(() => {
    window.addEventListener('keyup', handleEscKey);

    return () => {
      window.removeEventListener('keyup', handleEscKey);
    };
  });

  return (
    <>
      <div className={backdrop} onClick={clicked} />
      <div className={modal}>
        <Card title="Add Link">
          <Form clicked={clicked} linksUpdated={linksUpdated} />
        </Card>
      </div>
    </>
  );
};

Modal.propTypes = {
  clicked: PropTypes.func.isRequired,
  linksUpdated: PropTypes.func.isRequired,
};

export default Modal;
