import React from 'react';
import updateCoverImage from '../../assets/images/profile/update-cover-image.png';
import facebookIcon from '../../assets/images/profile/facebook.png';
import instagramIcon from '../../assets/images/profile/instagram.png';
import tweeterIcon from '../../assets/images/profile/tweet.png';
import avatarUpdate from '../../assets/images/profile/avatar-update.png';
import verificationSign from '../../assets/images/profile/verification-sign.png';
import {useSelector} from 'react-redux';
import {getProfileSettings} from '../../store/reducers/profileSettingsSlice';
const ProfileTopBlock = () => {
const {profile_data, profile_socials, profile_settings} = useSelector(getProfileSettings);
const {cover, avatar} = profile_data;
console.log(profile_data, profile_socials, profile_settings);
return (
<div className="user-top-block">
<div className="top-border"></div>
<div className="profile-cover-image-update" id="profile-cover-image-update">
<div className="update-image">
<img className="img" src={updateCoverImage} alt="update-cover-image"/>
</div>
</div>
<div className="soc-links-block">
<a href="#" className="soc-link" target="_blank">
<img className="img" src={facebookIcon} alt="facebook icon"/>
</a>
<a href="#" className="soc-link" target="_blank">
<img className="img" src={instagramIcon} alt="instagram icon"/>
</a>
<a href="#" className="soc-link" target="_blank">
<img className="img" src={tweeterIcon} alt="twitter icon"/>
</a>
</div>
<div className="user-info" style={{backgroundImage: `url(${cover})` }}>
<div className="profile-name-img">
<div className="profile-avatar">
<div className="profile-image-block">
<img className="img" src={avatar || '/'} alt="profile image"/>
</div>
{/*{% if not is_guest %}*/}
<div className="avatar-update" id="profile-avatar-image-update">
<img src={avatarUpdate} alt="" className="img"/>
<form action="/" method="post" hidden
encType="multipart/form-data">
{/*{% csrf_token %}*/}
profile_avatar_form
</form>
</div>
{/*// <!-- End profile avatar image update -->*/}
{/*{% endif %}*/}
</div>
{/*// <!-- End profile-avatar -->*/}
<div className="username-profession">
<div className="username">
<span>{profile_data?.first_name} {profile_data?.last_name}</span>
<span className="verification-sign-img">
<img className="img" src={verificationSign} alt=""/>
</span>
</div>
<div className="profession">
{/*{% if profile_settings.profession %}*/}
profile_settings.profession
{/*{% else %}*/}
Profession
{/*{% endif %}*/}
</div>
</div>
{/*// <!-- End username-profession -->*/}
</div>
{/*// <!-- End profile image block -->*/}
</div>
{/*// <!-- End user info -->*/}
<div className="user-info-bottom-line">
{/*{% if is_guest and not user.is_anonymous %}*/}
<form action="/" method="POST">
{/*{% csrf_token %}*/}
<label>
<input type="hidden" name="profile_slug" value=" profile.slug "/>
</label>
{/*{% if follow %}*/}
<button type="submit" className="user-info-following followed">👌 Following</button>
{/*{% else %}*/}
<button type="submit" className="user-info-following">✋ Follow</button>
{/*{% endif %}*/}
</form>
{/*{% elif is_guest %}*/}
<a href="#" className="user-info-following">Follow</a>
{/*{% endif %}*/}
<a href="#" className="user-info-following">
<span>Followers</span>
<span>profile_followers | length</span>
</a>
<a href="#" className="user-info-following">
<span>Following</span>
<span>profile_followings.count</span>
</a>
</div>
<div className="user-links">
<ul className="user-links-list">
<li className="links-list-item">
<a href="#" className="list-link">Feed</a>
</li>
<li className="links-list-item">
<a href="#" className="list-link">Videos</a>
</li>
<li className="links-list-item">
<a href="#" className="list-link">Videos</a>
</li>
<li className="links-list-item">
<a href="#" className="list-link">Groups</a>
</li>
<li className="links-list-item">
<a href="#" className="list-link">Shop</a>
</li>
<li className="links-list-item">
<a href="#" className="list-link">CV</a>
</li>
<li className="links-list-item">
<a href="#" className="list-link">Portfolio</a>
</li>
{/*{% if not is_guest %}*/}
<li className="links-list-item">
<a href="#" className="list-link">•••</a>
</li>
{/*{% endif %}*/}
</ul>
</div>
{/*// <!-- End user links -->*/}
<div className="user-links-mobile user-links-mobile-fixed-bottom user-links-first-line">
<a href="#" className="ok-btn">
<span className="icon-block">✋</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">✌</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">📰</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">🖼</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">📷</span>
</a>
</div>
<div className="user-links-mobile user-links-mobile-fixed-bottom">
<a href="#" className="ok-btn">
<span className="icon-block">्</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">🛒</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">🎴</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">∺</span>
</a>
<a href="#" className="ok-btn">
<span className="icon-block">•••</span>
</a>
</div>
</div>
);
};
export default ProfileTopBlock;
I am creating program, which should show me gallery page of my website. When I use the useselector from React Js hooks, It gives me an error of ” TypeError: Cannot destructure property ‘cover’ of ‘profile_data’ as it is null. ” And I cannot repair it, help me if you can. I used the useSelector, however the error is bigger showing in my screen.