edit profile

src/App.js

@@ -8,10 +8,10 @@ import {Provider, connect}   from 'react-redux';
 //import {createStore, combineReducers, applyMiddleware} from 'redux';
 import { store } from './store/store';
 import { actionAllPlaylists } from './store/promiseReducer';
-import { actionFullSetPlaylist } from './store/playerReducer';
 import { Header } from './components/header';
-import {PlaylistById}  from './components/playlistById';
 import { Main } from './components/Routs';
+import {CAllPlaylists} from './components/Playlist';
+import {СNowPlayingPlayer} from './components/playing';
 
 
 
@@ -21,35 +21,14 @@ store.subscribe(() => console.log(store.getState()));
 store.dispatch(actionAllPlaylists());
 
 
+// export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {}}), )(PlaylistById);
 
-const Playlist = ({playlist: {id, user_id, name, photo, description, tracks} = {}}) =>
-  <div className="col-sm-3">
-    <Link className="card" to= {`/playlist/${id}`} onClick={() => store.dispatch(actionFullSetPlaylist({id, user_id, name, photo, description, tracks}) )}>
-      <img src={photo} 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>
-
-
-const PlaylistsAll = ({playlists= []}) => 
-  <div className='RootCategories row'>
-    {playlists.map((playlist, i) => <Playlist key={i} playlist={playlist}/>)}
-  </div>
-
-
-const СAllPlaylists = connect(state => ({playlists: state.promise.allPlaylists?.payload?.playlists?.data || []}), )(PlaylistsAll);
-export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {}}), )(PlaylistById);
-//const СUserPlaylists = connect(state => ({playlists: state.promise.usersPlaylists?.payload?.playlists?.data || []}), )(UsersPlaylistsAll);
                                               
 
 export const Aside = ({children}) => 
   <div>
-    <Header/>
-    <СAllPlaylists/>
+    
+    <CAllPlaylists/>
   </div>
 
 
@@ -58,12 +37,16 @@ const CRoutes = connect(state => ({auth : state.auth?.token}))(Main)
 
 function App() {
   return (
+    <div className='d-flex text-white'>
     <Router history={history}>
     <Provider store ={store}>
-      {/* <Header/> */}
+    
       <CRoutes/>
+      {/* {store.auth?.token && <СNowPlayingPlayer/>} */}
     </Provider>
     </Router>
+    
+    </div>
   );
 }
 

src/components/EditPlaylistModal.js

@@ -0,0 +1,67 @@
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import {connect}   from 'react-redux';
+import React, {useState} from 'react';
+import { sendForm } from './LoadTrackModal';
+
+
+export function EditPlaylistModal  (props)  {
+    const [name, setName] = useState(props.playlist?.name);
+    const [description, setDescription] = useState(props.playlist?.description);
+    //const [privat, setPrivat] = useState(0);
+    const [image, setImage] = useState(props.playlist?.photo);
+
+    const PostEditPlaylist = async(event)  =>{
+        event.preventDefault();
+        const data = new FormData();
+
+        data.append("name", name || props.playlist?.name);
+        data.append("description", description || props.playlist?.description);
+        data.append("private", props.playlist?.private);
+        image.name && data.append("photo",  image, image.name);
+
+        sendForm('playlists/' + props.playlist?.id + '/edit', data);  
+    }
+
+    return(
+    <Modal
+        {...props}
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+    >
+        <Modal.Header closeButton> 
+        <Modal.Title id="contained-modal-title-vcenter">
+        
+        </Modal.Title> 
+        </Modal.Header>
+        <Modal.Body >
+        <form onSubmit={PostEditPlaylist} className="authorization center align-items-center justify-content-center  d-flex" id='loadTracksForm'>
+            <div className="border p-3 col-9">
+                <h4 className="w-100 text-center">Edit Playlist</h4>
+                <hr/>
+                <div className="d-flex justify-content-between">
+                    <div className="w-auto">
+                        <label  className="form-label">Image</label>
+                        <input type="file" name="picture" accept="image/*" id="file" className='form-control mb-3' onChange={(e) => setImage(e.target.files[0])} multiple={false}/>
+                        {/* <input className="form-check-input me-3" type="checkbox" id="flexCheckIndeterminate" checked={privat} onChange={e => setPrivat(e.target.checked? 1 : 0)}/>
+                        <label className="form-check-label" >Private?</label>     */}
+                    </div>
+                    <div className="w-50">
+                        <label  className="form-label">Name</label><br/>
+                        <input type="text" id="username" className='input form-control mb-3' value={name} onChange={e => setName(e.target.value)}/>
+                        <label  className="form-label">Description</label>
+                        <textarea type="password" id="password" className='form-control mb-3' value={description} onChange={e => setDescription(e.target.value)}/>
+                    </div>
+                </div>
+            </div>
+        </form>
+        </Modal.Body>
+        <Modal.Footer> 
+        <Button variant="outline-danger" type='submit' form='loadTracksForm' onClick={props.onHide}>Save</Button> 
+        </Modal.Footer>
+    </Modal>)
+}
+
+
+//export const CEditPlaylistModal = connect(state => ({playlist: state.promise.plstById?.payload || []}), )(EditPlaylistModal);

src/components/EditProfile.js

@@ -0,0 +1,131 @@
+import Button from 'react-bootstrap/Button';
+import {connect}   from 'react-redux';
+import React, {useState} from 'react';
+import { store } from '../store/store';
+import image from '../images/card.png';
+import { actionAuthLogin } from '../store/authReducer';
+import {Link} from 'react-router-dom';
+import Form from 'react-bootstrap/Form';
+
+
+export async function sendForm (url, data) {
+    let error = await fetch(`http://player-api/api/${url}`, {
+        method: 'POST',
+        headers: {
+            ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
+        },
+        body: data
+      }).then(res => res.json())
+      .then(data => {
+          if(data.user) {
+            store.dispatch(actionAuthLogin(store.getState().auth?.token, data.user));
+            return data
+          } else if(data.login){
+            return data.login[0];
+          } else{
+            return data;
+          }
+      })
+    return error;
+}
+
+export function EditProfile  (props)  {
+    const [login, setLogin] = useState(props.user?.login);
+    const [name, setName] = useState(props.user?.name);
+    const [avatar, setAvatar] = useState((props.user?.avatar || image));
+    const [passwordConfirm, setPasswordConfirm] = useState('');
+    const [password, setPassword] = useState('');
+    const [textModal, setTextModal] = useState('');
+    
+    
+    const postForm = async (event)  =>{
+        event.preventDefault();
+        const data = new FormData();
+
+        login && login!==props.user?.login && data.append("login", login);
+        console.log(login, props.user?.login)
+        name && name!==props.user?.name && data.append("name", name);
+        avatar.name && data.append("avatar",  avatar, avatar.name);
+        
+        setTextModal(( typeof(await sendForm('profile/edit', data))==='string')? (await sendForm('profile/edit', data)) : '');
+        
+      }
+      const postEditPassword = async (event)  =>{
+        event.preventDefault();
+        const data = new FormData();
+
+        password && data.append("password", password);
+        
+        setTextModal(( typeof(await sendForm('profile/edit', data))==='string')? (await sendForm('profile/edit', data)) : '');
+        
+      }
+
+    return (<>
+   <div className='d-flex container align-items-center justify-content-center'>
+        <div className=''>
+            <img className='m-4' alt='...' src={props.user?.avatar || image} width='150px'/>
+        </div>
+        <div className=''>
+            <h5>Name: {store.getState().auth?.user?.name}</h5>
+            <p>Login: {store.getState().auth?.user?.login}</p>
+        </div>
+    </div>
+    <Form onSubmit={postForm} className='d-flex justify-content-center align-items-center'>
+        <div>
+        <Form.Group className="mb-3" controlId="formBasicLogin">
+            <Form.Label>Change Login:</Form.Label>
+            <div className='d-flex'>
+                <Form.Control type="text"  className="me-1" placeholder={login}
+                        value={login} onChange={e => setLogin(e.target.value)} />
+                <Button variant="outline-danger" type="submit">Save</Button>
+            </div>
+            <Form.Text className="text-muted">{textModal || "*login must be unique"}</Form.Text>
+        </Form.Group>
+
+        <Form.Group className="mb-3" controlId="formBasicName">
+            <Form.Label>Change Name:</Form.Label>
+            <div className='d-flex'>
+                <Form.Control type="text"  className="me-1" placeholder="Anastasiia"
+                    value={name} onChange={e => setName(e.target.value)} />
+                <Button variant="outline-danger" type="submit">Save</Button>
+            </div>
+        </Form.Group>
+
+        <Form.Group className="mb-3" controlId="formBasicAvatar">
+            <Form.Label>Change Avatar:</Form.Label>
+            <div className='d-flex'>
+                <Form.Control type="file" className="me-1" name="picture" accept="image/*" onChange={e => setAvatar(e.target.files[0])} multiple={false} />
+                <Button variant="outline-danger" type="submit">Save</Button>
+            </div>
+        </Form.Group>
+        </div>
+    </Form>
+    <h5 className='d-flex justify-content-center'> Change Password:</h5>
+    <Form onSubmit={postEditPassword} className='d-flex justify-content-center align-items-center'>
+    
+        <div>
+            <Form.Group className="mb-3" controlId="formBasicNewPassword">
+                <Form.Label>New Password:</Form.Label>
+                <Form.Control type="password" className="" placeholder="new password"
+                        value={password} onChange={e => setPassword(e.target.value)} />
+                <Form.Text className="text-muted">* Minimum 8 symbols.</Form.Text>
+            </Form.Group>
+            
+
+            <Form.Group className="mb-3" controlId="formBasicConfirmPassword">
+                <Form.Label>Confirm New Password:</Form.Label>
+                <Form.Control type="password" placeholder="confirm new password"
+                        value={passwordConfirm} onChange={e => setPasswordConfirm(e.target.value)} />
+            </Form.Group>
+            <div className='d-flex justify-content-between'>
+                <Button variant="outline-danger" type="submit" disabled={ password.length < 8 || password !== passwordConfirm}>
+                    Change Password
+                </Button>
+                <Link to={'/user'}>Back to home Page</Link>
+            </div>
+        </div>
+    </Form>
+    </>)
+}
+export const CEditProfile = connect(state => ({ user: state.auth?.user }))(EditProfile);
+  

src/components/LoadTrackModal.js

@@ -0,0 +1,68 @@
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import {connect}   from 'react-redux';
+import React, {useState, useEffect} from 'react';
+import { store } from '../store/store';
+
+
+export 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]); 
+          }
+      })
+} 
+
+export function LoadTrackModal  (props)  {
+    const [tracks, setTrack] = useState(null);
+
+    const PostLoadTracks = async(event)  =>{
+        event.preventDefault();
+        const data = new FormData();
+    
+        data.append("id", store.getState().promise.plstById.payload.id);
+        let i = 0;
+        for (let track of tracks) {
+            data.append(`tracks[${i++}]`, track);
+        }
+        sendForm('playlists/load-tracks', data);
+      }  
+
+return(
+<Modal
+    {...props}
+    size="lg"
+    aria-labelledby="contained-modal-title-vcenter"
+    centered
+  >
+     <Modal.Header closeButton> 
+      <Modal.Title id="contained-modal-title-vcenter">
+      Add Tracks
+      </Modal.Title> 
+    </Modal.Header>
+    <Modal.Body >
+    <form onSubmit={PostLoadTracks} className="authorization center align-items-center justify-content-center  d-flex" id='loadTracksForm'>
+        <div className="mb-3">
+            <label className="form-label">Add your tracks</label>
+            
+            <input className="form-control"  accept=".mp3" type="file" id="formFileMultiple" multiple onChange={(e) => setTrack(e.target.files)}/>
+        </div>
+    </form>
+    </Modal.Body>
+    <Modal.Footer> 
+      <Button variant="outline-danger" type='submit' form='loadTracksForm' onClick={props.onHide}>Save</Button> 
+     </Modal.Footer>
+  </Modal>)
+}

src/components/Playlist.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Link} from 'react-router-dom';
+import {connect}   from 'react-redux';
+import { store } from '../store/store';
+import { actionFullSetPlaylist } from '../store/playerReducer';
+
+
+
+const Playlist = ({playlist: {id, user_id, name, photo, description, tracks} = {}}) =>
+<div className="col-sm-3">
+  <Link className="card" to= {`/playlist/${id}`} onClick={() => store.dispatch(actionFullSetPlaylist({id, user_id, name, photo, description, tracks}) )}>
+    <img src={photo} 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>
+
+
+const PlaylistsAll = ({playlists= []}) => 
+<div className='RootCategories row'>
+  {playlists.map((playlist, i) => <Playlist key={i} playlist={playlist}/>)}
+</div>
+
+
+export const CAllPlaylists = connect(state => ({playlists: state.promise.allPlaylists?.payload?.playlists?.data || []}), )(PlaylistsAll);

src/components/Routs.js

@@ -2,33 +2,47 @@ import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
 import { history } from '../App';
 import {LoginForm} from './authorization';
 import {CRegisterForm} from './authRegistration';
+import { store } from '../store/store';
 import {CreatePlaylist} from './createPlaylist';
 import { Aside } from '../App';
 import { UserPage} from './userPage';
-import {CPlaylistById}  from '../App';
+import {CPlaylistById}  from './playlistById';
+import {СNowPlayingPlayer} from './playing'
+import { CEditProfile } from './EditProfile';
+import { Header } from './header';
 
 export const Main = ({auth}) =>
-  <main className='bg-dark text-white'>
+
+  <main className='bg-dark text-white main' >
   <Router history = {history}>
-      <Content>
+      <Content className=''>
+      <div>
         <Switch>
           {auth && <Redirect from='/login' to={'/user'} exact />} 
           {auth && <Redirect from='/register' to={'/user'} exact />}
           {!auth && <Redirect from='/user' to={'/login'} exact />} 
           <Route path={'/login'} component={LoginForm} />
           <Route path={'/register'} component={CRegisterForm}/>
-
+          <Route path={'/editprofile'} component={CEditProfile}/>
           <Route path={'/allplaylists'} component={Aside}/>
           <Route path={'/playlist'} component={CPlaylistById} />
-          <Route path={'/create'} component={CreatePlaylist} />
           <Route path={'/user'} component={UserPage} />
           <Route exact path="/">{auth ? <Redirect to="/user"/> : <Redirect to="/login" /> }</Route>
         </Switch>
+      </div>
       </Content>
     </Router>
   </main>
 
 const Content = ({children}) => 
-<section className='Content'>
-  {children}
-</section>
+  <>
+  {store.getState().auth?.token && <Header/>}
+    <section className='d-flex justify-content-around'>
+      <div className='col'>
+        {children}
+      </div>
+      <div className='col'>
+        {store.getState().auth?.token && <СNowPlayingPlayer/>}
+      </div>
+    </section>
+  </>

src/components/authRegistration.js

@@ -5,7 +5,7 @@ import { store } from '../store/store';
 import { connect } from 'react-redux';
 
 
-async function sendForm (url, data) {
+export async function sendForm (url, data) {
     let error = await fetch(`http://player-api/api/${url}`, {
         method: 'POST',
         body: data

src/components/authorization.js

@@ -7,7 +7,7 @@ import {history} from '../App';
 
 
 
-async function SendForm (url, data) {
+export async function SendForm (url, data) {
 
 
   let error = await fetch(`http://player-api/api/${url}`, {

src/components/header.js

@@ -4,6 +4,7 @@ import {faArrowRightFromBracket} from '@fortawesome/free-solid-svg-icons';
 import {connect}   from 'react-redux';
 import { actionAuthLogout } from '../store/authReducer';
 import React from 'react';
+import {Link} from 'react-router-dom';
 
 
 
@@ -14,16 +15,16 @@ export const Header = ({children}) =>
     <div className="container flex justify-content-between ">
     
         <div className='d-flex align-items-center justify-content-center' >
-        <a href="/allplaylists" className="navbar-brand" ><img className='logo' src={logo} alt='logo'/>Music</a>
+        <Link to={"/allplaylists"}  className="navbar-brand" ><img className='logo' src={logo} alt='logo'/>Music</Link>
         </div>
 
         <div className="d-flex">
 
             <div className="d-flex align-items-center" id="navbarSupportedContent">
-                <a href="/allplaylists" className="navbar-brand nav-link active" aria-current="page" >To all playlists</a>
+                <Link to={"/allplaylists"} className="navbar-brand nav-link active" aria-current="page" >To all playlists</Link>
             </div>
             <div className="d-flex align-items-center" id="navbarSupportedContent">
-                <a href="/user" className="navbar-brand nav-link active" aria-current="page" >Home</a>
+                <Link to={"/user"} className="navbar-brand nav-link active" aria-current="page" >Home</Link>
             </div>
             <input className="form-control me-2 " type="search" placeholder="Search" aria-label="Search"/>
         

src/components/playing.js

@@ -23,7 +23,7 @@ export let NowPlayingPlayer = (props) => {
     const [volume, setVolume] = useState(20);
     const [newCurrent, setNewCurrent] = useState(0)
 
-    audio.ontimeupdate = () =>  store.dispatch(actionFullSetCurrentTime(audio.currentTime));
+    // audio.ontimeupdate = () =>  store.dispatch(actionFullSetCurrentTime(audio.currentTime));
     useEffect(() => {
         if (props.currentTime) audio.currentTime = newCurrent
     }, [newCurrent])

src/components/playlistById.js

@@ -3,77 +3,11 @@ import { store } from '../store/store';
 import { actionPlaylistById} from '../store/promiseReducer';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-// import {connect}   from 'react-redux';
+import {connect}   from 'react-redux';
 // import {actionFullSetTrack, actionFullPlay} from '../store/playerReducer';
-import { Header } from './header';
-import { СNowPlayingPlayer } from './playing';
 import {СAllTracks } from './Tracks'
-
-
-
-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]); 
-          }
-      })
-} 
-
-
-
-function LoadTrackModal  (props)  {
-    const [tracks, setTrack] = useState(null);
-
-    const PostLoadTracks = async(event)  =>{
-        event.preventDefault();
-        const data = new FormData();
-    
-        data.append("id", store.getState().promise.plstById.payload.id);
-        let i = 0;
-        for (let track of tracks) {
-            data.append(`tracks[${i++}]`, track);
-        }
-        sendForm('playlists/load-tracks', data);
-      }  
-
-return(
-<Modal
-    {...props}
-    size="lg"
-    aria-labelledby="contained-modal-title-vcenter"
-    centered
-  >
-     <Modal.Header closeButton> 
-      <Modal.Title id="contained-modal-title-vcenter">
-      Add Tracks
-      </Modal.Title> 
-    </Modal.Header>
-    <Modal.Body >
-    <form onSubmit={PostLoadTracks} className="authorization center align-items-center justify-content-center  d-flex" id='loadTracksForm'>
-        <div className="mb-3">
-            <label className="form-label">Multiple files input example</label>
-            
-            <input className="form-control"  accept=".mp3" type="file" id="formFileMultiple" multiple onChange={(e) => setTrack(e.target.files)}/>
-        </div>
-    </form>
-    </Modal.Body>
-    <Modal.Footer> 
-      <Button variant="outline-danger" type='submit' form='loadTracksForm' onClick={props.onHide}>Save</Button> 
-     </Modal.Footer>
-  </Modal>)
-}
+import { LoadTrackModal } from './LoadTrackModal';
+import { EditPlaylistModal } from './EditPlaylistModal';
 
 export const PlaylistById = ({playlist = {}}) => {
     let id = window.location.href.split('/')[4];
@@ -91,7 +25,6 @@ export const PlaylistById = ({playlist = {}}) => {
   
   return(
     <>
-    <Header/>
     <div className='d-flex justify-content-around'>
     <div>
         <h1 >Playlist</h1>
@@ -102,9 +35,10 @@ export const PlaylistById = ({playlist = {}}) => {
             <div>
                 <p className='h4'>Playlist name: {playlist.name}</p>
                 <p>Playlist author: {playlist.user_name}</p>
-                <span onClick={() => setModalTrackShow(true)}>Edit Playlist</span>
+                {playlist.user_id === store.getState().auth.user.id? 
+                <><span onClick={() => setModalTrackShow(true)}>Edit Playlist</span>
                 <EditPlaylistModal  show={modalTrackShow} playlist={playlist}
-                        onHide={() => setModalTrackShow(false)}></EditPlaylistModal>
+                        onHide={() => setModalTrackShow(false)}></EditPlaylistModal></> : <></>}
                 <p>{playlist?.tracks?.length} треков</p> 
                 <div className='d-flex'>
                 {/* <div> <button type="button" className="btn btn-light me-2">Shake</button></div> */}
@@ -126,69 +60,12 @@ export const PlaylistById = ({playlist = {}}) => {
         </div>
             <СAllTracks/>
       </div>
-          <СNowPlayingPlayer/>
+          {/* <СNowPlayingPlayer/> */}
       </div>
       
       
       </>
   )}
 
-
-  function EditPlaylistModal  (props)  {
-    const [name, setName] = useState(props.playlist?.name);
-    const [description, setDescription] = useState(props.playlist?.description);
-    //const [privat, setPrivat] = useState(0);
-    const [image, setImage] = useState(props.playlist?.photo);
-
-    const PostEditPlaylist = async(event)  =>{
-        event.preventDefault();
-        const data = new FormData();
-
-        data.append("name", name || props.playlist?.name);
-        data.append("description", description || props.playlist?.description);
-        data.append("private", props.playlist?.private);
-        data.append("photo",  image, (image.name?  image.name : props.playlist?.photo));
-
-        sendForm('playlists/' + props.playlist?.id + '/edit', data);  
-    }
-
-    return(
-    <Modal
-        {...props}
-        size="lg"
-        aria-labelledby="contained-modal-title-vcenter"
-        centered
-    >
-        <Modal.Header closeButton> 
-        <Modal.Title id="contained-modal-title-vcenter">
-        Add Tracks
-        </Modal.Title> 
-        </Modal.Header>
-        <Modal.Body >
-        <form onSubmit={PostEditPlaylist} className="authorization center align-items-center justify-content-center  d-flex" id='loadTracksForm'>
-        <div className="border p-3 col-9">
-        <h4 className="w-100 text-center">Create Playlist</h4>
-            <hr/>
-            <div className="d-flex justify-content-between">
-              <div className="w-auto">
-                  <label  className="form-label">Image</label>
-                  <input type="file" name="picture" accept="image/*" id="file" className='form-control mb-3' onChange={(e) => setImage(e.target.files[0])} multiple={false}/>
-                  {/* <input className="form-check-input me-3" type="checkbox" id="flexCheckIndeterminate" checked={privat} onChange={e => setPrivat(e.target.checked? 1 : 0)}/>
-                  <label className="form-check-label" >Private?</label>     */}
-              </div>
-              <div className="w-50">
-                  <label  className="form-label">Name</label><br/>
-                  <input type="text" id="username" className='input form-control mb-3' value={name} onChange={e => setName(e.target.value)}/>
-                  <label  className="form-label">Description</label>
-                  <textarea type="password" id="password" className='form-control mb-3' value={description} onChange={e => setDescription(e.target.value)}/>
-              </div>
-            </div>
-            <button type='submit' className="btn btn-outline-danger" onClick={props.onHide} >Create</button>
-        </div>
-        </form>
-        </Modal.Body>
-        <Modal.Footer> 
-        <Button variant="outline-danger" type='submit' form='loadTracksForm' onClick={props.onHide}>Save</Button> 
-        </Modal.Footer>
-    </Modal>)
-}
+  //export const СPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload?.tracks || []}), )(PlaylistById);
+  export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {}}), )(PlaylistById);

src/components/userPage.js

@@ -10,34 +10,15 @@ import Modal from 'react-bootstrap/Modal';
 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 = {}}) => 
-  <div className="col-sm-3">
+  <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="..."/>
+      <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>
-        <button className="btn btn-primary" >Go somewhere</button>
       </div>
     </Link>
   </div>
@@ -103,14 +84,14 @@ let id = store.getState().auth?.user?.id;
   }, []);
 
     return(<>
-    <Header/>
+    
     <div className='d-flex container align-items-center justify-content-center'>
         <div className=''>
-            <img className='m-4' alt='...' src={image} width='150px'/>
+            <img className='m-4' alt='...' src={store.getState().auth?.user?.avatar || image} width='150px'/>
         </div>
         <div className=''>
             <h3>{store.getState().auth?.user?.name}</h3>
-            <a href='/change'>Edit Profile</a>
+            <Link to={'/editprofile'} >Edit Profile</Link>
         </div>
     </div>
 

src/index.css

@@ -6,6 +6,10 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.main{
+  width: 100%;
+}
+
 .logo {
   width: 50px;
 }

src/store/playerReducer.js

@@ -55,7 +55,8 @@ export const actionFullPlay = () =>
     dispatch => {  
         audio.play();
         dispatch(actionPlay());
-        dispatch(actionFullGetDuration(audio.duration));
+        audio.onloadedmetadata = (() => dispatch(actionFullGetDuration(audio.duration)));
+        audio.ontimeupdate = () =>  dispatch(actionFullSetCurrentTime(audio.currentTime));
         actionFullSetCurrentTime(audio.currentTime);
     }
 
@@ -63,8 +64,6 @@ export const actionFullPlay = () =>
 const actionPause = () => ({type:'PAUSE'})
 export const actionFullPause = () =>
     dispatch => {
-        dispatch(actionFullGetDuration(audio.duration));
-
         audio.pause();
         dispatch(actionPause());
     }