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: {},
	};

	async componentDidMount() {
		const user = this.props.user;
		this.setState({ user, role: user.role });
	}

	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="rounded-circle" src={role.id === 2022 ? "/static/img/univ-avatar.png" : "/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.nama}</span>
						</div>
					</div>
				</div>
			</Collapse>
		);
	}
}

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

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

export default connect(mapStateToProps)(SidebarUserBlock);