add HOC

src/components/HOC/resize.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+const HOCcomponent = WrapperComponent => {
+	return class extends React.Component {
+		state = {
+			w: window.innerWidth,
+			h: window.innerHeight
+		};
+
+		componentDidMount() {
+			window.addEventListener("resize", this.resize);
+		}
+
+		componentWillUnmount() {
+			window.removeEventListener("resize", this.resize);
+		}
+
+		resize = e => this.setState({ w: e.currentTarget.innerWidth, h: e.currentTarget.innerHeight });
+
+		render() {
+			const { w, h } = this.state;
+			return <WrapperComponent w={w} h={h} {...this.props} />;
+		}
+	};
+};
+
+export default HOCcomponent;

src/components/header/index.js

@@ -1,21 +1,33 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 
 const liArr = [{ path: "/", id: 1, text: "Main" }];
 
-export default () => (
-	<header className="header">
-		<div className="header__left-wrapper">
-			<div className="header__logo-box">logo</div>
-			<nav className="header__nav">
-				<ul className="header__list">
-					{liArr.map(el => (
-						<li className="header__item" key={el.id}>
-							<Link to={el.path}>{el.text}</Link>
-						</li>
-					))}
-				</ul>
-			</nav>
-		</div>
-	</header>
-);
+const header = props => {
+	const event = () =>
+		new Promise((resolve, reject) => {
+			setTimeout(() => {
+				props.history.push("/test");
+			}, 5000);
+		});
+
+	return (
+		<header className="header">
+			<div className="header__left-wrapper">
+				<div className="header__logo-box">logo</div>
+				<nav className="header__nav">
+					<ul className="header__list">
+						{liArr.map(el => (
+							<li className="header__item" key={el.id}>
+								<Link to={el.path}>{el.text}</Link>
+							</li>
+						))}
+					</ul>
+				</nav>
+				<button onClick={event}>Click and wait 5s</button>
+			</div>
+		</header>
+	);
+};
+
+export default withRouter(header);

src/containers/main.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import Form from "../components/form";
+import HOCcomponent from "../components/HOC/resize";
 
 const list = [
 	{
@@ -13,7 +14,7 @@ const list = [
 	}
 ];
 
-export default class Main extends Component {
+class Main extends Component {
 	state = {
 		list: list,
 		newItem: {
@@ -42,27 +43,35 @@ export default class Main extends Component {
 	render() {
 		const { list } = this.state;
 
-		console.log("aaaa", this.state.newItem);
 		return (
-			<div className="box">
-				<div className="list">
-					{list.map(el => (
-						<div className="list__item" key={el.id}>
-							<h4 className="list__item-title">{el.firstName}</h4>
-							<p className="list__item-age">Age: {el.age}</p>
-							<ul className="list__item-ul">
-								{el.hobby.map(elem => (
-									<li className="list__item-li" key={elem}>
-										{elem}
-									</li>
-								))}
-							</ul>
-						</div>
-					))}
+			<>
+				<div style={{ border: "1px solid #eee", textAlign: "center", padding: 10 }}>
+					Now your screen size:
+					<p>W = {this.props.w}</p>
+					<p>H = {this.props.h}</p>
 				</div>
+				<div className="box">
+					<div className="list">
+						{list.map(el => (
+							<div className="list__item" key={el.id}>
+								<h4 className="list__item-title">{el.firstName}</h4>
+								<p className="list__item-age">Age: {el.age}</p>
+								<ul className="list__item-ul">
+									{el.hobby.map(elem => (
+										<li className="list__item-li" key={elem}>
+											{elem}
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</div>
 
-				<Form onChangeEvent={this.onChange} onSubmitEvent={this.onSubmit} values={this.state.newItem} />
-			</div>
+					<Form onChangeEvent={this.onChange} onSubmitEvent={this.onSubmit} values={this.state.newItem} />
+				</div>
+			</>
 		);
 	}
 }
+
+export default HOCcomponent(Main);

src/router.js

@@ -1,10 +1,22 @@
 import React from "react";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, Redirect } from "react-router-dom";
 
 import Main from "./containers/main";
 
 export default () => (
 	<Switch>
 		<Route exact path="/" component={Main} />
+
+		<Route
+			exact
+			path="/exact"
+			render={() => (
+				<div>
+					<Redirect to="/" />
+				</div>
+			)}
+		/>
+
+		<Route exact render={() => <div>PAGE 404 NOT FOUND</div>} />
 	</Switch>
 );