123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- import React, {useEffect} from 'react';
- import {Link} from 'react-router-dom';
- import {connect} from 'react-redux';
- import { actionUsersPlaylists } from '../store/promiseReducer';
- import { actionFullSetPlaylist } from '../store/playerReducer';
- import { store } from '../store/store';
- import image from '../images/card.png';
- import Modal from 'react-bootstrap/Modal';
- // import Button from 'react-bootstrap/Button';
- import {CreatePlaylist} from './createPlaylist'
- const Playlist = ({playlist = {}}) =>
- <div className="col-sm-3 p-1">
- <Link className="card" to= {`/playlist/${playlist.id}`}
- // onClick={() => store.dispatch(actionFullSetPlaylist({playlist}) )}
- >
- <img src={playlist.photo || image} className="card-img-top" alt="..." height={'150px'}/>
- <div className="card-body">
- <h5 className="card-title"> {playlist.name}</h5>
- <p className="card-text">{playlist.description? playlist.description : '.' }</p>
- </div>
- </Link>
- </div>
-
- export const UsersPlaylistsAll = ({playlists= []}) => {
- const [modalShow, setModalShow] = React.useState(false);
- return (
- <>
- <div className='RootCategories row'>
- <div className="col-sm-3 border border-white d-flex align-items-center justify-content-center" onClick={() => setModalShow(true)}>
- <h3>Create new Playlist</h3>
- </div>
- <MyVerticallyCenteredModal
- show={modalShow}
- onHide={() => setModalShow(false)}
- />
-
-
- {playlists.map((playlist, i) => <Playlist key={i} playlist={playlist}/>)}
- </div>
- </>)
- }
- const СUsersPlaylists = connect(state => ({playlists: state.promise.usersPlaylists?.payload?.playlists|| []}), )(UsersPlaylistsAll);
-
- function MyVerticallyCenteredModal(props) {
- return (
- <Modal
- {...props}
- size="lg"
- aria-labelledby="contained-modal-title-vcenter"
- centered
- >
- {/* <Modal.Header closeButton> */}
- {/* <Modal.Title id="contained-modal-title-vcenter">
- Create new Playlist
- </Modal.Title> */}
- {/*</Modal.Header> */}
- <Modal.Body >
- <CreatePlaylist props={props}/>
- </Modal.Body>
- {/* <Modal.Footer>
- <Button variant="outline-danger" onClick={props.onHide}>Create</Button>
- </Modal.Footer> */}
- </Modal>
- );
- }
- export const UserPage = () => {
- let id = store.getState().auth?.user?.id;
- const getAnswer = async () => {
- await store.dispatch(actionUsersPlaylists(id));
- };
- useEffect(() => {
- getAnswer();
- }, []);
- return(<>
-
- <div className='d-flex container align-items-center justify-content-center'>
- <div className=''>
- <img className='m-4' alt='...' src={store.getState().auth?.user?.avatar || image} width='150px'/>
- </div>
- <div className=''>
- <h3>{store.getState().auth?.user?.name}</h3>
- <Link to={'/editprofile'} >Edit Profile</Link>
- </div>
- </div>
- <h3>My playlists:</h3>
- <СUsersPlaylists/>
- </>)
- }
|