{"size": 2121, "ext": "js", "max_stars_repo_path": "components/admin/Dashboard/TeamProjects/ShareProjectItem/ShareProjectItem.js", "max_stars_repo_name": "IIP-Design/content-commons-client", "max_stars_repo_stars_event_min_datetime": "2021-06-10T13:02:04.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-03T20:33:19.000Z", "max_issues_repo_path": "components/admin/Dashboard/TeamProjects/ShareProjectItem/ShareProjectItem.js", "max_issues_repo_name": "IIP-Design/content-commons-client", "max_issues_repo_issues_event_min_datetime": "2019-02-20T19:53:21.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T13:51:57.000Z", "max_forks_repo_path": "components/admin/Dashboard/TeamProjects/ShareProjectItem/ShareProjectItem.js", "max_forks_repo_name": "IIP-Design/content-commons-client", "max_forks_repo_forks_event_min_datetime": "2019-05-17T17:03:15.000Z", "max_forks_repo_forks_event_max_datetime": "2020-02-04T17:07:09.000Z"}
{"max_stars_count": 2, "max_issues_count": 103, "max_forks_count": 3, "avg_line_length": 26.8481012658, "max_line_length": 85, "alphanum_fraction": 0.6468646865}
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import debounce from 'lodash/debounce';
import { Popup } from 'semantic-ui-react';
import ClipboardCopy from 'components/ClipboardCopy';
import './ShareProjectItem.scss';

const ShareProjectItem = props => {
  const { id } = props;

  const [projectReviewURL, setProjectReviewURL] = useState( '' );

  useEffect( () => {
    const { protocol, host } = window.location;
    const link = `${protocol}//${host}/admin/project/video/${id}/review`;

    setProjectReviewURL( link );
  } );

  const [sharePopupOpen, setSharePopupOpen] = useState( false );

  const handleResize = debounce( () => {
    /* eslint-disable no-use-before-define */
    handleClose();
  }, 500, { leading: true, trailing: false } );

  const handleTableScroll = debounce( () => {
    /* eslint-disable no-use-before-define */
    handleClose();
  }, 500, { leading: true, trailing: false } );

  const handleOpen = () => {
    setSharePopupOpen( true );
    window.addEventListener( 'resize', handleResize );

    const itemsTable = document.querySelector( '.items_table' );

    itemsTable.addEventListener( 'scroll', handleTableScroll );
  };

  const handleClose = () => {
    setSharePopupOpen( false );
    window.removeEventListener( 'resize', handleResize );

    const itemsTable = document.querySelector( '.items_table' );

    itemsTable.removeEventListener( 'scroll', handleTableScroll );
  };

  return (
    <Popup
      className="shareLink_popup"
      trigger={ (
        <button
          type="button"
          className="linkStyle myProjects_data_actions_action"
          data-projectitempopup="sharePopup"
        >
          Share
        </button>
      ) }
      content={ <ClipboardCopy label="Direct Link" copyItem={ projectReviewURL } /> }
      on="click"
      position="bottom right"
      hideOnScroll
      keepInViewPort={ false }
      open={ sharePopupOpen }
      onOpen={ handleOpen }
      onClose={ handleClose }
    />
  );
};

ShareProjectItem.propTypes = {
  id: PropTypes.string,
};

export default ShareProjectItem;
