content: import React, { Component } from 'react';
  import { Fetch } from '../../utils/utils';
  import './css/style.css';
  import { Modal, Button } from 'react-bootstrap';
  
  import Lists from '../Common/Lists'
  const common_color_block = '#99429e';
  class RepoList extends Component {
  	constructor(props) {
  		super(props);
  		this.getRepo = this.getRepo;
  		this.handleRepo = this.handleRepo;
  		this.state = {
  			show: false
  		}
  	}
  
  	getRepo() {
  		return new Promise(function (resolve, reject) {
  			let repoCache = sessionStorage.getItem('repo');
  			if (repoCache && repoCache.userID === window.userID) {
  				resolve(JSON.parse(repoCache.option));
  			} else {
  				let access_token = localStorage.getItem('access_token');
  				if (!access_token) {
  					let loginRoute = process.env.NODE_ENV === 'development' ? '#/login' : '#/login';
  					window.location.href = loginRoute;
  				}
  				let userInfo = this.props.userInfo;
  				this.props.mapLoadState(true);
  				Fetch('/issues/repos', {
  					method: 'POST',
  					body: {
  						username: userInfo.login,
  						access_token: access_token
  					}
  				}).then((res) => res.json()).then((repos) => {
  					resolve(repos);
  				}).catch((error) => {
  					console.error(error);
  					reject();
  				})
  			}
  		}.bind(this));
  	}
  
  	handleRepo(repos) {
  		repos = repos || [];
  		let options = [];
  		repos.forEach((item) => {
  			options.push({
  				label: item.name,
  				value: {
  					owner: item.owner,
  					name: item.name,
  					id: item.id,
  					open_issues: item.open_issues,
  				},
  				color: common_color_block,
  				visible: true,
  				selected: false
  			});
  		});
  		return options;
  	}
  
  	componentDidMount() {
  		this.props.mapUserInfo(this.props.userInfo);
  		this.getRepo().then((res) => {
  			this.props.mapLoadState(false);
  			let repo = {};
  			repo.userID = window.userID;
  			repo.option = res;
  			sessionStorage.setItem('repo', JSON.stringify(repo));
  			let repos = this.handleRepo(res);
  			this.props.mapRepos(repos);
  		}).catch((error) => {
  			console.error(error);
  		})
  	}
  	componentWillReceiveProps(nextProps) {
  		const { repo } = nextProps;
  		this.setState({
  			show: !repo
  		})
  	}
  
  	render() {
  		const { title, updateRepo, repos, userInfo } = this.props;
  		const { show } = this.state;
  		if (userInfo) {
  			window.userID = userInfo.id;
  		}
  		return (
  			<div className="modal-container repo-list">
  				<Modal
  					show={show}
  	
  					container={this}
  					aria-labelledby="contained-modal-title"
  				>
  					<Modal.Header closeButton>
  						<Modal.Title id="contained-modal-title">{title}</Modal.Title>
  					</Modal.Header>
  					<Modal.Body>
  						<Lists lists={repos} onItemClick={updateRepo} />
  					</Modal.Body>
  				</Modal>
  			</div>
  		);
  	}
  }
  
  export default RepoList;
  /* onHide={cancel} */
  // let cancel = () => this.setState({ show: false });