{"size": 2057, "ext": "js", "max_stars_repo_path": "src/components/LoginBtn.js", "max_stars_repo_name": "ansrl0107/GamePicker", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/LoginBtn.js", "max_issues_repo_name": "ansrl0107/GamePicker", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/LoginBtn.js", "max_forks_repo_name": "ansrl0107/GamePicker", "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": 28.5694444444, "max_line_length": 87, "alphanum_fraction": 0.4020418085}
import React, { Component } from 'react';
import api from '../config/api';
import './LoginBtn.css'
import { withRouter } from 'react-router-dom';

class LoginBtn extends Component {
    state = {
        login: false,
        dropdown: false,
        data: {}
    }
    loadMe = () => {
        const token = sessionStorage.getItem('token');
        fetch(`${api.host}/me`, {
            headers: {
                'x-access-token': token
            }
        }).then(res => res.json())
        .then(json => {

        })
    }
    handleClick = () => {
        const token = sessionStorage.getItem('token');        
        if (token) {            
            this.setState({
                dropdown: !this.state.dropdown
            })
            fetch(`${api.host}/me`, {
                headers: {
                    'x-access-token': token
                }
            }).then(res => res.json())
            .then(json => {
                this.setState({
                    data: json.data
                })
            })
        } else {
            this.props.history.push('/login');
        }
    }
    logout = () => {
        sessionStorage.removeItem('token');
        this.setState({
            data: undefined,
            dropdown: false
        })
    }
    render() {                        
        const { name, email } = this.state.data;
        const style = {
            //backgroundImage: `url('${'../resource/user.png'}')`
        }
        return (
            <div id='login-btn'>
                <div className='status' onClick={this.handleClick} style={style}></div>
                {this.state.dropdown && <div className='dropdown'>
                    <div>
                        <div>{name}</div>
                        <div>{email}</div>
                    </div>
                    <ul>
                        <li>내정보</li>
                        <li onClick={this.logout}>로그아웃</li>
                    </ul>
                </div>}
            </div>
        )
    }
}
export default withRouter(LoginBtn);