123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- import React, {useState, useEffect} from 'react';
- import {Link} from 'react-router-dom';
- import {Provider, 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'
- import { Header } from './header';
- // function sendForm (url, data) {
- // fetch(`http://player-api/api/${url}`, {
- // method: 'POST',
- // body: data,
- // headers: {
-
- // ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
-
- // },
- // }).then(res => res.json())
- // .then(data => {
- // if(data.token) {
- // console.log(data)
- // return data
- // } else {
- // //console.log(data.login[0]);
- // }
- // })
- // }
- const Playlist = ({playlist: {id, user_id, name, photo, description} = {}}) =>
- <div className="col-sm-3">
- <Link className="card" to= {`/playlist/${id}`} onClick={() => store.dispatch(actionFullSetPlaylist({id, user_id, name, photo, description}) )}>
- <img src={photo || image} className="card-img-top" alt="..."/>
- <div className="card-body">
- <h5 className="card-title"> {name}</h5>
- <p className="card-text">{description? description : '.' }</p>
- <button className="btn btn-primary" >Go somewhere</button>
- </div>
- </Link>
- </div>
-
- export const UsersPlaylistsAll = ({playlists= []}) =>
- <div className='RootCategories row'>
- {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();
- }, []);
- const [modalShow, setModalShow] = React.useState(false);
- return(<>
- <Header/>
- <div className='d-flex container align-items-center justify-content-center'>
- <div className='col'>
- <img className='col-sm-3' alt='...' src={image}/>
- </div>
- <div className='col'>
- <h3>{store.getState().auth.user.name}</h3>
- <a href='/change'>Edit Profile</a>
- </div>
- </div>
- <Button variant="primary" onClick={() => setModalShow(true)}>
- Create new Playlist
- </Button>
- <MyVerticallyCenteredModal
- show={modalShow}
- onHide={() => setModalShow(false)}
- />
- <h3>My playlists:</h3>
- <СUsersPlaylists/>
- </>)
- }
|