ptb-fe/components/Layout/SidebarUserBlock.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Collapse } from "reactstrap";

import { connect } from "react-redux";

class SidebarUserBlock extends Component {
	state = {
		showUserBlock: true,
		user: {},
		role: "",
	};

	componentDidMount() {
		this.setState({ user: JSON.parse(sessionStorage.getItem("user")) });
		this.setState({ role: JSON.parse(sessionStorage.getItem("user")).peran[0].peran.nama });
	}

	componentDidUpdate(oldProps) {
		if (oldProps.showUserBlock !== this.props.showUserBlock) {
			this.setState({ showUserBlock: this.props.showUserBlock });
		}
	}

	render() {
		const { user, role } = this.state;
		return (
			<Collapse id="user-block" isOpen={this.state.showUserBlock}>
				<div>
					<div className="item user-block">
						{/* User picture */}
						<div className="user-block-picture">
							<div className="user-block-status">
								<img className="img-thumbnail rounded-circle" src="/static/img/logo-single.png" alt="Avatar" width="60" height="60" />
								<div className="circle bg-success circle-lg"></div>
							</div>
						</div>
						{/* Name and Job */}
						<div className="user-block-info">
							<span className="user-block-name">{user.nama}</span>
							<span className="user-block-role">{role}</span>
						</div>
					</div>
				</div>
			</Collapse>
		);
	}
}

SidebarUserBlock.propTypes = {
	showUserBlock: PropTypes.bool,
};

const mapStateToProps = (state) => ({ showUserBlock: state.settings.showUserBlock });

export default connect(mapStateToProps)(SidebarUserBlock);