userPage component

src/components/userPage.js

@@ -0,0 +1,115 @@
+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/>
+
+    </>)
+}