auth

src/App.js

@@ -16,10 +16,11 @@ 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";
 
 
 
-let history = createHistory()
+export let history = createHistory()
 
 store.subscribe(() => console.log(store.getState()));
 store.dispatch(actionAllPlaylists());
@@ -56,12 +57,9 @@ const Aside = ({children}) =>
     <СAllPlaylists/>
   </div>
 
-
-
-
 const Main = ({children}) =>
   <main className='bg-dark text-white'>
-  <Router history = {createHistory()}>
+  <BrowserRouter history = {history}>
       <Content>
         <Switch>
           {store.getState().auth?.token && <Redirect from='/login' to={'/user'} exact />} 
@@ -79,9 +77,33 @@ const Main = ({children}) =>
         
         {/* {children} */}
       </Content>
-    </Router>
+    </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}

src/components/authorization.js

@@ -3,10 +3,14 @@ import {Link} from 'react-router-dom';
 import { actionAuthLogin } from '../store/authReducer';
 import { store } from '../store/store';
 import { connect } from 'react-redux';
+import {history} from '../App';
 
 
 
-async function sendForm (url, data) {
+
+async function SendForm (url, data) {
+
+
   let error = await fetch(`http://player-api/api/${url}`, {
       method: 'POST',
       body: data
@@ -14,9 +18,10 @@ async function sendForm (url, data) {
     .then(data => {
         if(data.token) {
           store.dispatch(actionAuthLogin(data.token, data.user));
+          //console.log(history)
+          history.push('/user');
           return data
         } else {
-          console.log(data.message)
           return data.message;
         }
     })
@@ -38,15 +43,9 @@ export const LoginForm = ({authState}) => {
       data.append("login", login);
       data.append("password", password);
     
-      setTextModal(( typeof(await sendForm('login', data))==='string')? (await sendForm('login', data)) : '');
+      setTextModal(( typeof(await SendForm('login', data))==='string')? (await SendForm('login', data)) : '');
     }
 
-  //   let history = useHistory();
-
-  //   useEffect(() => {
-  //     if (authState) {history.push('/user')}
-  // }, []);
-
     return <>
       <form onSubmit={postForm} className="authorization container align-items-center justify-content-center vw-100 vh-100 d-flex">
         <div className="col-4">
@@ -68,62 +67,4 @@ export const LoginForm = ({authState}) => {
   }
 
   export const CLoginForm = connect(state => ({ authState: state.auth?.token }))(LoginForm);
-  
-  
-  // export const RegisterForm = ({authState2}) => {
-  //   const [login, setLogin] = useState('');
-  //   const [password, setPassword] = useState('');
-  //   const [name, setName] = useState('');
-  //   const [passwordConfirm, setPasswordConfirm] = useState('')
-  
-  //    const postForm = (event)  =>{
-  //     event.preventDefault();
-  //     const data = new FormData();
-  //     data.append("login", login);
-  //     data.append("password", password);
-  //     data.append("name", name);
-
-  //     sendForm('register', data);
-      
-  //   }
-
-  // //   let history = useHistory();
-
-  // //   useEffect(() => {
-  // //     if (authState2) {history.push('/user')}
-  // // }, [authState2]);
-  
-  //   return (
-  //     <form  onSubmit={postForm} id="register_form">
-  //       <div className="register container align-items-center justify-content-center vw-100 vh-100 d-flex">
-  //        <div className="col-4">
-  //              <h4 className="w-100 text-center">Sign Up</h4>
-  //             <hr/>
-  //             <label className="form-label">Login</label><br/>
-  //              <input type="text" id="username" className="input form-control mb-3" placeholder="asya123"
-  //                 value={login} onChange={e => setLogin(e.target.value)}
-  //              />
-  
-  //              <label className="form-label">Full Name</label><br/>
-  //              <input type="text" id="name" className="input form-control mb-3" placeholder="Anastasiia"
-  //                 value={name} onChange={e => setName(e.target.value)}
-  //              />
-  
-  //              <label className="form-label">Password</label>
-  //              <input type="password" id="password" className="form-control mb-3" value={password} onChange={e => setPassword(e.target.value)} /> 
-  
-  //              <label  className="form-label">Confirm password</label>
-  //              <input type="password" id="confirm_password" className="form-control mb-3" value={passwordConfirm} onChange={e => setPasswordConfirm(e.target.value)}/>
-  //              <div className="d-flex justify-content-between align-items-center">
-  //                  <h6>Already a member? <Link to="/login" className="">Log in</Link></h6>
-  //                  <button type="submit" className="btn btn-outline-danger" disabled={password !== passwordConfirm || password.length < 3 || login.length < 3} onClick={() => console.log(login, password)}>
-  //                  Sign Up
-  //                  </button>
-  //              </div>
-  //          </div>
-  //      </div>
-  //     </form>
-  //   )  
-  // }
-
-  // export const CRegisterForm = connect(state => ({ authState2: state.auth?.token }))(RegisterForm)
+  

src/components/header.js

@@ -4,6 +4,10 @@ import logoutimg from '../images/logout.png';
 import {connect}   from 'react-redux';
 import { actionAuthLogout } from '../store/authReducer';
 
+import React from 'react';
+const REACT_VERSION = React.version;
+
+
 
 export const Header = ({children}) => 
 <header id="header">

src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 
 
+
 ReactDOM.render(
     <App />,
   document.getElementById('root')