userPage.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. import { store } from "../store/store";
  2. import { connect } from "react-redux";
  3. import { Link } from "react-router-dom";
  4. import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  5. import image from '../images/card.png';
  6. import {
  7. faAlignCenter,
  8. faCompactDisc,
  9. faHeadphonesSimple} from "@fortawesome/free-solid-svg-icons";
  10. import {UsersPlaylistsAll} from '../components/userPlaylists';
  11. export const UserPage = ({user}) => {
  12. return(<>
  13. <div className='d-flex w-100'>
  14. <div className='me-4 playlist-img-box rounded-5' style={{backgroundImage: `url(${user?.avatar || image})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
  15. </div>
  16. <div className='w-100'>
  17. <div className="d-flex flex-column justify-content-between h-100">
  18. <div className="w-100 row">
  19. <p className='h4 m-0'>{store.getState().auth?.user?.name}</p>
  20. <Link to={'/editprofile'} className="mb-3" >Edit Profile</Link>
  21. <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faHeadphonesSimple} /> 100 Tracks</p>
  22. <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faCompactDisc} /> 8 PLaylists</p>
  23. <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faAlignCenter} />
  24. Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid amet animi aspernatur facere iste nisi omnis optio, vel vitae? Accusantium assumenda autem cumque ducimus eum ipsa, maiores pariatur repudiandae?
  25. </p>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <СUsersPlaylists/>
  31. </>)
  32. }
  33. export const CUserPage = connect(state => ({user: state.auth?.user || {}} ) )(UserPage);
  34. export const СUsersPlaylists = connect(state => ({playlists: state.promise?.usersPlaylists?.payload?.playlists|| []}))(UsersPlaylistsAll);