HomeWork1/React/CodePen/src/components/routes.js

import React from "react";
import createHistory from "history/createBrowserHistory";
import { connect } from "react-redux";
import RegForm from "../pages/reg";
import { LogForm } from "../pages/login";
import Home from "../pages/homePage";
import ConnectCabinet from "../pages/cabinet";
import Search from "../pages/search";
import ConnectedPrivateRoute from "./privateRoute";
import { Redirect } from "react-router";
import {useEffect, useState, useRef} from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";


const LoginForm = ({onLogin}) =>{
  const [login, setLogin] = useState(''); //braunvlad4
  const [pass, setPass] = useState('');   //123
  return( 
    <div className='LoginForm'>
      <input value={login} style={{backgroundColor: login.length>0 ? 'green' : 'red'}} 
            placeholder='your login' onChange={e=>setLogin(e.target.value)} />
      <input value={pass} style={{backgroundColor: pass.length>0 ? 'green' : 'red'}} 
            placeholder='your pass' onChange={e=>setPass(e.target.value)} />
      <button onClick={()=>onLogin(login,pass)} disabled={(login.length!==0 && pass.length!==0)?false:true }>Send</button>
    </div>
  )
}

const Routes = ({ isAuth }) => {
  return (
    <div className="App">
      <div className="contentDiv">
          // <LoginForm onLogin={(l,p)=>console.log(l,p)} />
            <Switch>
              <ConnectedPrivateRoute exact path="/" roles = {['user']} component={Home} />
              <ConnectedPrivateRoute path="/cabinet" roles = {['user']} component={ConnectCabinet} />
              <ConnectedPrivateRoute path="/search" roles = {['user']} component={Search} />
              <ConnectedPrivateRoute path="/login" roles = {['unknown']} component={LogForm} /> 
              <ConnectedPrivateRoute path="/registration" roles = {['unknown']} component={RegForm} />
              </Switch>
      </div>
    </div>
  );
};

export default Routes