component organizing

src/App.js

@@ -26,7 +26,7 @@ export const getGQL = url =>
         return data.data[Object.keys(data.data)[0]]
       })
 
-const history = createHistory()
+export const history = createHistory()
 const backendURL = "http://player.asmer.fs.a-level.com.ua"
 export const gql = getGQL(backendURL + '/graphql')
 
@@ -98,31 +98,31 @@ export function jwtDecode(token) {
 // }
 // const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)
 
-const RegisterForm = ({ onRegister }) => {
-  let [login, setLogin] = useState()
-  let [password, setPassword] = useState()
-  let [password2, setPassword2] = useState()
-  return (
-    <>
-      <h1>Web-player</h1>
-      <div>
-        <h2>Registration</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 />
-        <input disabled={!password} type="password" placeholder='Repeat Password' onChange={(e) => setPassword2(e.target.value)} />
-        <br />
-        <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
-        <br />
-        <button disabled={!password || !login || password2 !== password} onClick={() => onRegister(login, password)}>Register</button>
-        <br />
-        <Link to="/login">Back to log-in page</Link>
-      </div>
-    </>
-  )
-}
-const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)
+// const RegisterForm = ({ onRegister }) => {
+//   let [login, setLogin] = useState()
+//   let [password, setPassword] = useState()
+//   let [password2, setPassword2] = useState()
+//   return (
+//     <>
+//       <h1>Web-player</h1>
+//       <div>
+//         <h2>Registration</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 />
+//         <input disabled={!password} type="password" placeholder='Repeat Password' onChange={(e) => setPassword2(e.target.value)} />
+//         <br />
+//         <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
+//         <br />
+//         <button disabled={!password || !login || password2 !== password} onClick={() => onRegister(login, password)}>Register</button>
+//         <br />
+//         <Link to="/login">Back to log-in page</Link>
+//       </div>
+//     </>
+//   )
+// }
+// const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)
 
 const PlaylistAdd = ({addPlaylist}) => {
   let [clicked, setClicked] = useState(false)
@@ -306,7 +306,7 @@ function App() {
         <div className="App">
           <Switch>
             <Route path="/login" component={comp.LoginFormConnect} exact />
-            <Route path="/registration" component={RegisterFormConnect} exact />
+            <Route path="/registration" component={comp.RegisterFormConnect} exact />
             <Route path='/player' component={PlayerConnect} />
           </Switch>
         </div>

src/components/index.js

@@ -1,12 +1,36 @@
 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 RegisterForm = ({ onRegister }) => {
+    let [login, setLogin] = useState()
+    let [password, setPassword] = useState()
+    let [password2, setPassword2] = useState()
+    return (
+      <>
+        <h1>Web-player</h1>
+        <div>
+          <h2>Registration</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 />
+          <input disabled={!password} type="password" placeholder='Repeat Password' onChange={(e) => setPassword2(e.target.value)} />
+          <br />
+          <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
+          <br />
+          <button disabled={!password || !login || password2 !== password} onClick={() => onRegister(login, password)}>Register</button>
+          <br />
+          <Link to="/login">Back to log-in page</Link>
+        </div>
+      </>
+    )
+  }
+export const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)
+
 const LoginForm = ({ loged, onLogin }) => {
     let [login, setLogin] = useState()
     let [password, setPassword] = useState()