initial commit

src/App.js

@@ -1,9 +1,10 @@
 import './App.css';
 import * as action from './actions'
 import * as reducer from './reducers'
+import * as comp from './components'
 
 import thunk from 'redux-thunk';
-import { useEffect, useState } from 'react';
+import { Component, useEffect, useState } from 'react';
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { Provider, connect } from 'react-redux';
 import { Link, Route, Router, Switch, Redirect } from 'react-router-dom';
@@ -64,38 +65,38 @@ export function jwtDecode(token) {
   }
 }
 
-const LoginForm = ({ loged, onLogin }) => {
-  let [login, setLogin] = useState()
-  let [password, setPassword] = useState()
-  let [log, setLog] = useState()
+// const LoginForm = ({ loged, onLogin }) => {
+//   let [login, setLogin] = useState()
+//   let [password, setPassword] = useState()
+//   let [log, setLog] = useState()
 
-  useEffect(() => {
-    setLog(loged)
-    if (log?.payload && localStorage.authToken) history.push('/player')
-  }, [loged, log])
+//   useEffect(() => {
+//     setLog(loged)
+//     if (log?.payload && localStorage.authToken) history.push('/player')
+//   }, [loged, log])
 
-  return (
-    <>
-      <h1>Web-player</h1>
-      <div>
-        <h2>Log-in</h2>
-        <input type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
-        <br />
-        <input type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
-        <br />
-        <small style={{ color: 'red' }}>{loged.status === 'REJECTED' || (loged.status === 'RESOLVED' && !loged.payload) ? 'invalid login or password' : ''}</small>
-        <br />
-        <button
-          disabled={!password || !login}
-          onClick={() => { onLogin(login, password) }}
-        >Login</button>
-        <p>- OR -</p>
-        <Link to="/registration">Register new user</Link>
-      </div>
-    </>
-  )
-}
-const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)
+//   return (
+//     <>
+//       <h1>Web-player</h1>
+//       <div>
+//         <h2>Log-in</h2>
+//         <input type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
+//         <br />
+//         <input type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
+//         <br />
+//         <small style={{ color: 'red' }}>{loged.status === 'REJECTED' || (loged.status === 'RESOLVED' && !loged.payload) ? 'invalid login or password' : ''}</small>
+//         <br />
+//         <button
+//           disabled={!password || !login}
+//           onClick={() => { onLogin(login, password) }}
+//         >Login</button>
+//         <p>- OR -</p>
+//         <Link to="/registration">Register new user</Link>
+//       </div>
+//     </>
+//   )
+// }
+// const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)
 
 const RegisterForm = ({ onRegister }) => {
   let [login, setLogin] = useState()
@@ -304,7 +305,7 @@ function App() {
       <Provider store={store}>
         <div className="App">
           <Switch>
-            <Route path="/login" component={LoginFormConnect} exact />
+            <Route path="/login" component={comp.LoginFormConnect} exact />
             <Route path="/registration" component={RegisterFormConnect} exact />
             <Route path='/player' component={PlayerConnect} />
           </Switch>

src/components/index.js

@@ -0,0 +1,42 @@
+import * as action from '../actions'
+
+import thunk from 'redux-thunk';
+import { useEffect, useState } from 'react';
+import { applyMiddleware } from 'redux';
+import { connect } from 'react-redux';
+import { Link, Route, Router, Switch, Redirect } from 'react-router-dom';
+import { history } from '../App';
+
+const LoginForm = ({ loged, onLogin }) => {
+    let [login, setLogin] = useState()
+    let [password, setPassword] = useState()
+    let [log, setLog] = useState()
+  
+    useEffect(() => {
+      setLog(loged)
+      if (log?.payload && localStorage.authToken) history.push('/player')
+    }, [loged, log])
+  
+    return (
+      <>
+        <h1>Web-player</h1>
+        <div>
+          <h2>Log-in</h2>
+          <input type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
+          <br />
+          <input type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
+          <br />
+          <small style={{ color: 'red' }}>{loged.status === 'REJECTED' || (loged.status === 'RESOLVED' && !loged.payload) ? 'invalid login or password' : ''}</small>
+          <br />
+          <button
+            disabled={!password || !login}
+            onClick={() => { onLogin(login, password) }}
+          >Login</button>
+          <p>- OR -</p>
+          <Link to="/registration">Register new user</Link>
+        </div>
+      </>
+    )
+  }
+  
+export const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)