Ivan3008/homework 5

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 (
       <AuthorizeProvider>
         <div>
-          <Switch />
+          <nav>
+            <Link to="/">Главная</Link>
+            <Link to="/login">Войти</Link>
+            <Link to="/private">Секретная страница</Link>
+          </nav>
+          <div>
+            <Switch>
+              <Route path="/" component={Public} exact />
+              <Route path="/login" component={Login} exact />
+              <Route path="/private" component={wrappedPrivate} />
+            </Switch>
+          </div>
         </div>
       </AuthorizeProvider>
     );

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;

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 ? <Redirect to="/" /> : null;
+    return isAuthorized ? (
+      <Redirect to="/" />
+    ) : (
+      <Fragment>
+        <div>
+          <input onKeyUp={this.handleChange} name="email" />
+          <input onKeyUp={this.handleChange} name="password" />
+        </div>
+        <button onClick={this.checkPass}>Submit</button>
+      </Fragment>
+    );
   }
 }
 

src/components/Private/Private.js

@@ -1,3 +1,8 @@
 import React from 'react';
+import { Redirect } from 'react-router-dom';
 
-export default () => <p>Private page</p>;
+const Private = (props) => {
+  return props.isAuthorized ? <p>Private page</p> : <Redirect to="/login" />;
+};
+
+export default Private;

src/components/Public/Public.js

@@ -1,3 +1,7 @@
 import React from 'react';
 
-export default () => <p>Public page</p>;
+const Public = () => {
+  return <p>Public page</p>;
+};
+
+export default Public;