routs

src/App.js

@@ -1,7 +1,7 @@
 import './App.scss';
-import React, {useState,useEffect, useMemo, useRef} from 'react';
+import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
+import {Router, Link} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 //import thunk from 'redux-thunk';
 import {Provider, connect}   from 'react-redux';
@@ -9,27 +9,22 @@ import {Provider, connect}   from 'react-redux';
 import { store } from './store/store';
 import { actionAllPlaylists } from './store/promiseReducer';
 import { actionFullSetPlaylist } from './store/playerReducer';
-import {CLoginForm} from './components/authorization'
-import {CRegisterForm} from './components/authRegistration'
-import {CreatePlaylist} from './components/createPlaylist'
-
 import { Header } from './components/header';
-import { UserPage, UsersPlaylistsAll } from './components/userPage';
 import {PlaylistById}  from './components/playlistById';
-import { BrowserRouter } from "react-router-dom";
+import { Main } from './components/Routs';
 
 
 
-export let history = createHistory()
+export let history = createHistory();
 
 store.subscribe(() => console.log(store.getState()));
 store.dispatch(actionAllPlaylists());
 
 
 
-const Playlist = ({playlist: {id, user_id, name, photo, description} = {}}) =>
+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}) )}>
+    <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>
@@ -47,84 +42,29 @@ const PlaylistsAll = ({playlists= []}) =>
 
 
 const СAllPlaylists = connect(state => ({playlists: state.promise.allPlaylists?.payload?.playlists?.data || []}), )(PlaylistsAll);
-const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {}}), )(PlaylistById);
+export const CPlaylistById = connect(state => ({playlist: state.promise.plstById?.payload || {}}), )(PlaylistById);
 //const СUserPlaylists = connect(state => ({playlists: state.promise.usersPlaylists?.payload?.playlists?.data || []}), )(UsersPlaylistsAll);
                                               
 
-const Aside = ({children}) => 
+export const Aside = ({children}) => 
   <div>
     <Header/>
     <СAllPlaylists/>
   </div>
 
-const Main = ({children}) =>
-  <main className='bg-dark text-white'>
-  <BrowserRouter history = {history}>
-      <Content>
-        <Switch>
-          {store.getState().auth?.token && <Redirect from='/login' to={'/user'} exact />} 
-          {store.getState().auth?.token && <Redirect from='/register' to={'/user'} exact />} 
-          {!store.getState().auth?.token && <Redirect from='/user' to={'/login'} exact />}
-          <Route path={'/login'} component={CLoginForm} />
-          <Route path={'/register'} component={CRegisterForm}/>
-
-          <Route path={'/allplaylists'} component={Aside}/>
-          <Route path={'/playlist'} component={CPlaylistById} />
-          <Route path={'/create'} component={CreatePlaylist} />
-          <Route path={'/user'} component={UserPage} />
-          {/* <Route path={'/'} component={Header} /> */}
-        </Switch>
-        
-        {/* {children} */}
-      </Content>
-    </BrowserRouter>
-  </main>
-
-
-// const Main = ({children}) =>
-//   <main className='bg-dark text-white'>
-//   <Router history = {history}>
-//       <Content>
-//         <Switch>
-//           {store.getState().auth?.token && <Redirect from='/login' to={'/user'} exact />} 
-//           {store.getState().auth?.token && <Redirect from='/register' to={'/user'} exact />} 
-//           {!store.getState().auth?.token && <Redirect from='/user' to={'/login'} exact />}
-//           <Route path={'/login'} component={CLoginForm} />
-//           <Route path={'/register'} component={CRegisterForm}/>
-
-//           <Route path={'/allplaylists'} component={Aside}/>
-//           <Route path={'/playlist'} component={CPlaylistById} />
-//           <Route path={'/create'} component={CreatePlaylist} />
-//           <Route path={'/user'} component={UserPage} />
-//           {/* <Route path={'/'} component={Header} /> */}
-//         </Switch>
-        
-//         {/* {children} */}
-//       </Content>
-//     </Router>
-//   </main>
-
-const Content = ({children}) => 
-  <section className='Content'>
-    {children}
-  </section>
+
+const CRoutes = connect(state => ({auth : state.auth?.token}))(Main)
+
 
 function App() {
   return (
     <Router history={history}>
     <Provider store ={store}>
       {/* <Header/> */}
-      <Main/>
+      <CRoutes/>
     </Provider>
     </Router>
   );
 }
 
-
-const Footer = ({children}) => 
-  <footer>
-    {/* <Logo/> */}
-    {children}
-  </footer>
-
 export default App;

src/components/Routs.js

@@ -0,0 +1,34 @@
+import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
+import { history } from '../App';
+import {LoginForm} from './authorization';
+import {CRegisterForm} from './authRegistration';
+import {CreatePlaylist} from './createPlaylist';
+import { Aside } from '../App';
+import { UserPage} from './userPage';
+import {CPlaylistById}  from '../App';
+
+export const Main = ({auth}) =>
+  <main className='bg-dark text-white'>
+  <Router history = {history}>
+      <Content>
+        <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={'/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>
+      </Content>
+    </Router>
+  </main>
+
+const Content = ({children}) => 
+<section className='Content'>
+  {children}
+</section>

src/components/authorization.js

@@ -7,7 +7,6 @@ import {history} from '../App';
 
 
 
-
 async function SendForm (url, data) {
 
 
@@ -15,11 +14,11 @@ async function SendForm (url, data) {
       method: 'POST',
       body: data
     }).then(res => res.json())
-    .then(data => {
+    .then((data) => {
         if(data.token) {
-          store.dispatch(actionAuthLogin(data.token, data.user));
-          //console.log(history)
           history.push('/user');
+          store.dispatch(actionAuthLogin(data.token, data.user));
+
           return data
         } else {
           return data.message;
@@ -66,5 +65,5 @@ export const LoginForm = ({authState}) => {
     </>
   }
 
-  export const CLoginForm = connect(state => ({ authState: state.auth?.token }))(LoginForm);
+  //export const CLoginForm = connect(state => ({ authState: state.auth?.token }))(LoginForm);
   

src/store/authReducer.js

@@ -1,18 +1,11 @@
-import { useHistory } from 'react-router-dom';
-// const jwtDecode = token =>{
-//     try{
-//         let payload = JSON.parse(atob(token.split('.')[1]));
-//         return payload;
-//     } catch(e){
-        
-//     }
-//   }
+
 export const authReducer = function(state, {type, token, user}) {
     if (state === undefined) {
         if(localStorage.authToken) {
             type = "AUTH_LOGIN";
             token = localStorage.authToken;
             user = JSON.parse(localStorage.user);
+            
         } else {
             type = "AUTH_LOGOUT";
         };