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";
import ChangePass                               from "../pages/changePass";
import CProject                                 from "../pages/project";
import CProjects                                from "../pages/projects";
import CUpload                                  from "../pages/upload";


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">
                <Switch>
                    <ConnectedPrivateRoute  exact path = "/"       roles = {['user']}     component = {Home}           />
                    <ConnectedPrivateRoute  path = "/cabinet"      roles = {['user']}     component = {ConnectCabinet} />
                    <ConnectedPrivateRoute  path = "/search"       roles = {['user']}     component = {Search}         />
                    <ConnectedPrivateRoute  path = "/project/:id"  roles = {['user']}     component = {CProject}       />
                    <ConnectedPrivateRoute  path = "/changePass"   roles = {['user']}     component = {ChangePass}     />
                    <ConnectedPrivateRoute  path = "/upload"       roles = {['user']}     component = {CUpload}        />
                    <ConnectedPrivateRoute  path = "/projects"     roles = {['user']}     component = {CProjects}      />
                    <ConnectedPrivateRoute  path = "/login"        roles = {['unknown']}  component = {LogForm}        /> 
                    <ConnectedPrivateRoute  path = "/registration" roles = {['unknown']}  component = {RegForm}        />
                </Switch>
            </div>
        </div>
    );
};

export default Routes