test

package.json

@@ -3,12 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^3.10.9",
+    "node-sass": "^4.10.0",
+    "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

src/components/form/index.js

@@ -1,6 +1,17 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 export default class Form extends Component {
+	static contextTypes = {
+		name: PropTypes.string,
+		age: PropTypes.number,
+		children: PropTypes.bool
+	};
+
+	componentDidMount() {
+		console.log("this", this.context);
+	}
+
 	submit = () => {
 		const { addToList } = this.props;
 		addToList();

src/components/list/index.js

@@ -1,6 +1,10 @@
 import React, { Component } from "react";
 
+import { Consumer } from "../../utils";
+
 export default class List extends Component {
+	static contextType = Consumer;
+
 	change = ({ id, value }) => {
 		const { changelistValue } = this.props;
 		changelistValue({ id, value });
@@ -14,23 +18,29 @@ export default class List extends Component {
 
 	render() {
 		const { list, toggleEditField } = this.props;
+		console.log("sf", this.context);
 		return (
-			<div>
-				<ul>
+			<div className="list">
+				<ul className="list__ul">
 					{list.map(el =>
 						el.edit ? (
-							<div key={el.id}>
+							<li className="list__item" key={el.id}>
 								<input
+									className="list__input"
 									type="text"
 									value={el.value}
 									onChange={e => this.change({ id: el.id, value: e.target.value })}
 								/>
-								<button onClick={toggleEditField.bind(null, el.id)}>SAVE MEEEEE</button>
-							</div>
+								<button className="list__btn list__btn--edit" onClick={toggleEditField.bind(null, el.id)}>
+									SAVE MEEEEE
+								</button>
+							</li>
 						) : (
-							<li onClick={toggleEditField.bind(null, el.id)} key={el.id}>
+							<li className="list__item" onClick={toggleEditField.bind(null, el.id)} key={el.id}>
 								{el.value}
-								<button onClick={e => this.deleteItem(e, el.id)}>x</button>
+								<button className="list__btn list__btn--remove" onClick={e => this.deleteItem(e, el.id)}>
+									x
+								</button>
 							</li>
 						)
 					)}

src/components/page/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 
 import List from "../list";
 import Form from "../form";
@@ -17,7 +17,7 @@ export default class Page extends Component {
 		} = this.props;
 		console.log("list", list);
 		return (
-			<div className="container">
+			<Fragment>
 				<Form changeInputValue={changeInputValue} addToList={addToList} inputData={inputData} />
 				<List
 					deleteItemList={deleteItemList}
@@ -25,7 +25,7 @@ export default class Page extends Component {
 					toggleEditField={toggleEditField}
 					list={list}
 				/>
-			</div>
+			</Fragment>
 		);
 	}
 }

src/components/weather/index.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+
+import { Consumer } from "../../utils";
+
+export default class Add extends Component {
+	render() {
+		console.log("render", this);
+		return (
+			<Consumer>
+				{value => {
+					console.log("val", value);
+					return <div>Hello </div>;
+				}}
+			</Consumer>
+		);
+	}
+}

src/container/App.js

@@ -1,16 +1,59 @@
 import React, { Component } from "react";
+import { string, number, bool } from "prop-types";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 
 import Page from "../components/page";
 import * as actions from "../actions/todo";
-import Header from "../components/header";
 
 class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			name: "tony",
+			age: 26,
+			children: false
+		};
+
+		console.log("constructor");
+	}
+
+	componentDidMount() {
+		console.log("componentDidMount");
+	}
+
+	componentDidUpdate(prevProps, prevState, prevContext) {
+		if (this.props.error && !prevProps.error) console.log("componentDidUpdate");
+	}
+
+	shouldComponentUpdate(nextProp, nextState, nextContext) {
+		console.log("shouldComponentUpdate");
+		return true;
+	}
+
+	componentWillUnmount() {
+		console.log("componentWillUnmount");
+	}
+
+	static childContextTypes = {
+		name: string,
+		age: number,
+		children: bool
+	};
+
+	getChildContext() {
+		const { name, age, children } = this.state;
+		return {
+			name,
+			age,
+			children
+		};
+	}
+
 	render() {
+		console.log("render");
 		return (
-			<div>
-				<Header />
+			<div className="container">
 				<Page {...this.props} />
 			</div>
 		);

src/container/fetchPage.js

@@ -3,10 +3,16 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 
 import { takeInputValue, getWeather } from "../actions/weather";
-
-import Header from "../components/header";
+import Add from "../components/weather";
+import { Provider } from "../utils";
 
 class FetchPage extends Component {
+	state = {
+		foo: 1
+	};
+
+	add = () => this.setState(prevState => ({ foo: prevState.foo + 1 }));
+
 	change = e => {
 		const { takeInputValue } = this.props;
 		takeInputValue(e.target.value);
@@ -19,16 +25,22 @@ class FetchPage extends Component {
 
 	render() {
 		const { weather, error } = this.props;
-
+		console.log("weather", weather);
 		return (
-			<div>
-				<Header />
+			<div className="page">
+				<Provider value={weather}>
+					<input className="page__input page__input--blue" type="text" onChange={this.change} />
+					<button className="page__button" onClick={this.click}>
+						SHOW
+					</button>
+
+					<div>{weather && weather.location && weather.location.city}</div>
+					<div>{error && error}</div>
 
-				<input type="text" onChange={this.change} />
-				<button onClick={this.click}>SHOW</button>
+					<Add />
 
-				<div>{weather && weather.location && weather.location.city}</div>
-				<div>{error && error}</div>
+					<button onClick={this.add}>PUSH ME</button>
+				</Provider>
 			</div>
 		);
 	}

src/index.js

@@ -8,6 +8,8 @@ import Router from "./router";
 
 import store from "./state/state";
 
+import "./style/index.scss";
+
 ReactDOM.render(
 	<BrowserRouter>
 		<Provider store={store}>

src/router.js

@@ -1,11 +1,16 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { Switch, Route } from "react-router-dom";
 import App from "./container/App";
 import FetchPage from "./container/fetchPage";
 
+import Header from "./components/header";
+
 export default () => (
-	<Switch>
-		<Route path="/" exact component={App} />
-		<Route exact path="/fetch" component={FetchPage} />
-	</Switch>
+	<Fragment>
+		<Header />
+		<Switch>
+			<Route path="/" exact component={App} />
+			<Route exact path="/fetch" component={FetchPage} />
+		</Switch>
+	</Fragment>
 );

src/state/state.js

@@ -6,6 +6,6 @@ import reducers from "../Reducers";
 
 export default createStore(
 	reducers,
-	// composeEnhancers(applyMiddleware(logger, sagaMiddleware)),
+	// applyMiddleware(thunk, logger)
 	applyMiddleware(thunk)
 );

src/style/abstracts/_variables.scss

@@ -0,0 +1,7 @@
+$color-black: #000;
+$color-white: #fff;
+
+$color-grey: #eee;
+
+$color-red: red;
+$color-blue: blue;

src/style/components/_list.scss

@@ -0,0 +1,40 @@
+.list {
+	width: 40%;
+	display: flex;
+	padding: 50px;
+
+	&__ul {
+		list-style: none;
+	}
+
+	&__item {
+		padding: 20px 10px;
+		border: 1px solid $color-grey;
+		border-radius: 3px;
+
+		&:not(:last-child) {
+			margin-bottom: 5px;
+		}
+	}
+
+	&__input {
+		font-size: 16px;
+		font-style: inherit;
+	}
+
+	&__btn {
+		background-color: transparent;
+		border-radius: 3px;
+		font-size: 14px;
+
+		&--remove {
+			background: $color-red;
+			color: $color-white;
+		}
+
+		&--edit {
+			color: $color-white;
+			background: $color-blue;
+		}
+	}
+}

src/style/index.scss

@@ -0,0 +1,9 @@
+@import "antd/dist/antd.css";
+
+@import "abstracts/variables";
+@import "abstracts/mixins";
+
+@import "base/base";
+
+@import "components/list";
+@import "page/home";

src/utils/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const contextObject = {
+	brain: true,
+	coffe: false
+};
+
+// export const myContext = React.createContext(contextObject);
+export const { Provider, Consumer } = React.createContext(contextObject);