{"size": 2627, "ext": "js", "max_stars_repo_path": "src/pages/DataAccessRequest/components/SelectDatasetModal/SelectDatasetModal.js", "max_stars_repo_name": "DearbhailRicePA/gateway-web", "max_stars_repo_stars_event_min_datetime": "2021-01-06T16:12:43.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-14T14:45:53.000Z", "max_issues_repo_path": "src/pages/DataAccessRequest/components/SelectDatasetModal/SelectDatasetModal.js", "max_issues_repo_name": "DearbhailRicePA/gateway-web", "max_issues_repo_issues_event_min_datetime": "2020-09-28T15:12:23.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T17:03:04.000Z", "max_forks_repo_path": "src/pages/DataAccessRequest/components/SelectDatasetModal/SelectDatasetModal.js", "max_forks_repo_name": "DearbhailRicePA/gateway-web", "max_forks_repo_forks_event_min_datetime": "2021-06-21T22:09:28.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-13T06:26:33.000Z"}
{"max_stars_count": 7, "max_issues_count": 274, "max_forks_count": 3, "avg_line_length": 31.2738095238, "max_line_length": 131, "alphanum_fraction": 0.6581652075}
import React, { Fragment, useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
import { ReactComponent as CloseButtonSvg } from '../../../../images/close-alt.svg';
import TypeaheadDataset from '../TypeaheadDataset/TypeaheadDataset';
import './SelectDatasetModal.scss';
import SVGIcon from '../../../../images/SVGIcon';

const SelectDatasetModal = ({ isOpen, closeModal, duplicateApplication }) => {
	let [selectedDatasets, setSelectedDatasets] = useState([]);

	const onHandleDataSetChange = (value = []) => {
		setSelectedDatasets(value);
	};

	const onCloseModal = () => {
		resetModalState();
		closeModal();
	};

	const resetModalState = () => {
		setSelectedDatasets([]);
	};

	return (
		<Fragment>
			<Modal
				show={isOpen}
				onHide={onCloseModal}
				size='lg'
				aria-labelledby='contained-modal-title-vcenter'
				centered
				className='selectDatasetModal'>
				<div className='selectDatasetModal-header'>
					<h1 className='black-20-semibold'>Select the datasets you need</h1>
					<CloseButtonSvg className='selectDatasetModal-head--close' onClick={() => onCloseModal()} />

					<div className='selectDatasetModal-header-description'>
						Search for datasets you wish to add to your new data access request application. Only datasets with matching form application
						processes will be available to select from. If you can’t find the dataset you need, you will need to start a new data access
						request application.
					</div>
				</div>

				<div className='selectDatasetModal-body'>
					<div className='selectDatasetModal-body--group'>
						<label className='gray800-14'>Datasets</label>
						<div className='ds-search'>
							<div className='ds-search-icon'>
								<SVGIcon name='searchicon' width={20} height={20} fill={'#475da7'} />
							</div>
							<div className='ds-search-input'>
								<TypeaheadDataset
									selectedDatasets={selectedDatasets}
									onHandleDataSetChange={onHandleDataSetChange}
									readOnly={false}
									allowAllCustodians={true}
								/>
							</div>
						</div>
					</div>
				</div>

				<div className='selectDatasetModal-footer'>
					<div className='selectDatasetModal-footer--wrap'>
						<Button variant='white' className='techDetailButton mr-2' onClick={onCloseModal}>
							No, nevermind
						</Button>
						<Button
							variant='primary'
							className='white-14-semibold'
							onClick={() => {
								duplicateApplication('', selectedDatasets);
							}}>
							Duplicate application
						</Button>
					</div>
				</div>
			</Modal>
		</Fragment>
	);
};

export default SelectDatasetModal;
