diff --git a/src/components/App/App.js b/src/components/App/App.js index fcd8a3f..7970938 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -1,13 +1,29 @@ import React, { PureComponent } from 'react'; -import { Switch, withRouter } from 'react-router-dom'; -import { AuthorizeProvider } from 'components/AuthorizeProvider'; +import { Switch, withRouter, Link, Route } from 'react-router-dom'; +import { AuthorizeProvider, AuthHOC } from 'components/AuthorizeProvider'; +import Login from 'components/Login'; +import Private from 'components/Private'; +import Public from 'components/Public'; export class App extends PureComponent { render() { + const wrappedPrivate = AuthHOC(Private) + const wrappedLogin = AuthHOC(Login) return (
- + +
+ + + + + +
); diff --git a/src/components/AuthorizeProvider/AuthorizeProvider.js b/src/components/AuthorizeProvider/AuthorizeProvider.js index 47766c5..af7dac4 100644 --- a/src/components/AuthorizeProvider/AuthorizeProvider.js +++ b/src/components/AuthorizeProvider/AuthorizeProvider.js @@ -6,6 +6,17 @@ const { Provider, Consumer } = React.createContext({ isAuthorized: false }); // по этому тут так много кода, изучайте как следует! // немного кода я все таки вырезал ^^ class AuthorizeProvider extends Component { + state = { + isAuthorized: false + }; + + authorizeUser = (email, password) => { + if (email === 'student' && password === '123'){ + this.setState({ isAuthorized: true }); + return true; + } + }; + render() { const { children } = this.props; const { isAuthorized } = this.state; diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js index fbbb10d..418c136 100644 --- a/src/components/Login/Login.js +++ b/src/components/Login/Login.js @@ -1,16 +1,35 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { AuthHOC } from 'components/AuthorizeProvider'; import { Redirect } from 'react-router-dom'; class Login extends Component { - handleChange = e => { + state = { + email: '', + password: '' + }; + + handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); }; + checkPass = () => { + this.props.authorizeUser(this.state.email, this.state.password); + } + render() { const { isAuthorized } = this.props; - return isAuthorized ? : null; + return isAuthorized ? ( + + ) : ( + +
+ + +
+ +
+ ); } } diff --git a/src/components/Private/Private.js b/src/components/Private/Private.js index 1373354..846bf7f 100644 --- a/src/components/Private/Private.js +++ b/src/components/Private/Private.js @@ -1,3 +1,8 @@ import React from 'react'; +import { Redirect } from 'react-router-dom'; -export default () =>

Private page

; +const Private = (props) => { + return props.isAuthorized ?

Private page

: ; +}; + +export default Private; diff --git a/src/components/Public/Public.js b/src/components/Public/Public.js index 86a1999..ea64498 100644 --- a/src/components/Public/Public.js +++ b/src/components/Public/Public.js @@ -1,3 +1,7 @@ import React from 'react'; -export default () =>

Public page

; +const Public = () => { + return

Public page

; +}; + +export default Public;