import '../../scss/common/sidebar.scss'

import axios from 'axios'
import React from 'react'
import { Menu, Avatar } from 'antd'

import Menus from './Menus'

import userImg from '../../../images/photos/user1.png'

class Sidebar extends React.Component {
    constructor() {
        super()
        this.state = {
            user: {}
        }
    }

    componentDidMount() {
        this.fetchUser()
    }

    render() {
        return <div className="sidebar">
            <div className="sidebar-user">
                <Avatar icon="user" size="large" src={userImg} />
                <span className="username">{this.state.user.username}</span>
            </div>
            <Menus user={this.state.user} />
        </div>
    }

    async fetchUser() {
        const result = await axios.get('/login/info')

        if (result.status === 200) {
            this.setState({
                user: result.data
            })
        }
    }
}

export default Sidebar