add todo

src/App.js

@@ -1,27 +0,0 @@
-import React, { Component } from "react";
-import { Switch, Route } from "react-router-dom";
-
-import SomeBlock from "./hideBlock";
-import Main from "./main";
-import ItemPage from "./ItemPage";
-
-export default class App extends Component {
-	render() {
-		return (
-			<>
-				<Switch>
-					<Route exact path="/" component={Main} />
-					<Route path="/item/:id" component={ItemPage} />
-					<Route exact path="/profile" component={SomeBlock} />
-					<Route
-						exact
-						path="/test"
-						render={props => {
-							return <div>TEST PAGe, Hello</div>;
-						}}
-					/>
-				</Switch>
-			</>
-		);
-	}
-}

src/ItemPage.js

@@ -1,47 +0,0 @@
-import React, { Component } from "react";
-import { TimelineMax, Power4, Linear, Back } from "gsap";
-
-import { Link, Switch, Route } from "react-router-dom";
-
-export default class ItemPage extends Component {
-	state = { item: {}, currentLocation: "" };
-	title = React.createRef();
-
-	componentDidMount() {
-		const { match, location } = this.props;
-		this.setState({ currentLocation: location.pathname });
-		fetch(`https://jsonplaceholder.typicode.com/todos/${match.params.id}`)
-			.then(response => response.json())
-			.then(json => this.setState({ item: json }));
-
-		// let params = new URLSearchParams(location.search);
-
-		// console.log("params", params.get("title"));
-
-		// console.log("this.", this.props);
-
-		// const titile = this.title.current;
-		// console.log("repeat", titile);
-		// const mainTL = new TimelineMax().set(titile, { autoAlpha: 1 }).repeat(0);
-		// console.log("mainTL", mainTL);
-	}
-
-	render() {
-		const { item, currentLocation } = this.state;
-		return (
-			<div>
-				<h1 ref={this.title}>{item.title}</h1>
-
-				<div>
-					<Link to={`${currentLocation}/link1`}>Link 1</Link>
-					<Link to={`${currentLocation}/link2`}>Link 2</Link>
-				</div>
-
-				<Switch>
-					<Route path={`${currentLocation}/link1`} render={() => <div>CONTENT 1</div>} />
-					<Route path={`${currentLocation}/link2`} render={() => <div>CONTENT 2</div>} />
-				</Switch>
-			</div>
-		);
-	}
-}

src/components/form/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+
+import Button from "../button/button";
+import Input from "../input";
+
+export default class Form extends Component {
+	submit = e => {
+		e.preventDefault();
+
+		this.props.onSubmitEvent();
+	};
+
+	render() {
+		const { values, onChangeEvent } = this.props;
+
+		return (
+			<form onSubmit={this.submit}>
+				<Input
+					onChange={onChangeEvent}
+					value={values.firstName}
+					id="firstName"
+					name="firstName"
+					label="First Name"
+				/>
+				<Input
+					onChange={onChangeEvent}
+					value={values.lastName}
+					id="lastName"
+					name="lastName"
+					label="Last Name"
+				/>
+				<Input onChange={onChangeEvent} value={values.age} id="age" type="number" name="age" label="Age" />
+				<Input
+					onChange={onChangeEvent}
+					value={values.editable}
+					id="editable"
+					type="checkbox"
+					name="editable"
+					label="Editable"
+				/>
+
+				<Input onChange={onChangeEvent} value={values.hobby} id="hobby" name="hobby" label="Hobby" />
+
+				<Button type="submit" text="Add" />
+			</form>
+		);
+	}
+}

src/header.js

@@ -1,11 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const liArr = [
-	{ path: "/", id: 1, text: "Main" },
-	{ path: "/profile", id: 2, text: "Profile" },
-	{ path: "/test", id: 3, text: "TEST" }
-];
+const liArr = [{ path: "/", id: 1, text: "Main" }];
 
 export default () => (
 	<header className="header">

src/components/input/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+import "./index.scss";
+
+export default ({ id, label, type = "text", ...rest }) => (
+	<label htmlFor={id} className="input-box">
+		{label}
+		<input className="input-box__input" id={id} type={type} {...rest} />
+	</label>
+);

src/components/input/index.scss

@@ -0,0 +1,7 @@
+.input-box {
+	display: flex;
+	flex-direction: column;
+
+	&__input {
+	}
+}

src/containers/main.js

@@ -0,0 +1,68 @@
+import React, { Component } from "react";
+
+import Form from "../components/form";
+
+const list = [
+	{
+		id: 1,
+		editable: true,
+		firstName: "Tony",
+		lastName: "Montana",
+		age: 50,
+		hobby: ["drugs", "guns"]
+	}
+];
+
+export default class Main extends Component {
+	state = {
+		list: list,
+		newItem: {
+			editable: false,
+			firstName: "",
+			lastName: "",
+			age: "",
+			hobby: ""
+		}
+	};
+
+	onChange = e => {
+		const { name, value, checked, type } = e.target;
+
+		this.setState(prevState => ({
+			...prevState,
+			newItem: {
+				...prevState.newItem,
+				[name]: type === "checkbox" ? checked : value
+			}
+		}));
+	};
+
+	onSubmit = () => console.log("submit");
+
+	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>
+
+				<Form onChangeEvent={this.onChange} onSubmitEvent={this.onSubmit} values={this.state.newItem} />
+			</div>
+		);
+	}
+}

src/counter.js

@@ -1,34 +0,0 @@
-import React, { Component } from "react";
-
-export default class Counter extends Component {
-	// state = { count: 0 };
-	componentDidMount() {
-		console.log("componentDidMount child");
-		// this.setState({ count: this.props.counter });
-	}
-
-	// componentDidUpdate(prevProps) {
-	// 	if (this.props.counter !== prevProps.counter) this.setState({ count: this.props.counter });
-	// }
-
-	// shouldComponentUpdate(nextProps) {
-	// 	if (nextProps.random === 10) {
-	// 		console.log("BOOOM");
-
-	// 		return false;
-	// 	}
-
-	// 	return true;
-	// }
-
-	render() {
-		const { dec, inc, counter } = this.props;
-		return (
-			<div>
-				<button onClick={inc}>in-crease</button>
-				<button onClick={dec}>de-crease</button>
-				<span>{counter}</span>
-			</div>
-		);
-	}
-}

src/hideBlock.js

@@ -1,3 +0,0 @@
-import React from "react";
-
-export default () => <div className="hide">I am hide</div>;

src/index.js

@@ -2,8 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 
-import Header from "./header";
-import App from "./App";
+import Header from "./components/header";
+import App from "./router";
 import * as serviceWorker from "./serviceWorker";
 
 import "./style.scss";

src/layout.js

@@ -1,15 +0,0 @@
-import React from "react";
-
-import Header from "./header";
-
-export default ({ header = true, children, footer }) => {
-	return (
-		<div className="conteiner">
-			{header && <Header />}
-
-			<div className="main">{children}</div>
-
-			{footer && <div>I am footer</div>}
-		</div>
-	);
-};

src/main.js

@@ -1,38 +0,0 @@
-import React, { Component } from "react";
-import { Link } from "react-router-dom";
-
-export default class Main extends Component {
-	state = { todos: [] };
-
-	componentDidMount() {
-		fetch("https://jsonplaceholder.typicode.com/todos")
-			.then(response => response.json())
-			.then(json => this.setState({ todos: json }));
-	}
-
-	getId = id => console.log(id);
-
-	render() {
-		const { todos } = this.state;
-		return (
-			<div>
-				<div className="list">
-					{todos.map(
-						el =>
-							el.completed && (
-								<Link
-									to={{
-										pathname: `/item/${el.id}`
-										// search: `?title=${el.title}"`
-									}}
-									className="list__item"
-									key={el.id}>
-									{el.title}
-								</Link>
-							)
-					)}
-				</div>
-			</div>
-		);
-	}
-}

src/router.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+
+import Main from "./containers/main";
+
+export default () => (
+	<Switch>
+		<Route exact path="/" component={Main} />
+	</Switch>
+);

src/select.js

@@ -1,25 +0,0 @@
-import React, { Component } from "react";
-
-export default class List extends Component {
-	state = { show: false };
-
-	trigger = () => this.setState(prevState => ({ show: !prevState.show }));
-
-	render() {
-		const { onChange, value, options } = this.props;
-		return (
-			<div>
-				<div onClick={this.trigger}>{value}</div>
-				{this.state.show && (
-					<ul>
-						{options.map(el => (
-							<li key={el.id} onClick={onChange.bind(null, el.value)}>
-								{el.text}
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		);
-	}
-}

src/style.scss

@@ -17,6 +17,7 @@ body {
 	}
 
 	&__logo-box {
+		margin-right: 40px;
 	}
 
 	&__nav {
@@ -44,6 +45,10 @@ body {
 	}
 }
 
+.box {
+	display: flex;
+}
+
 .hide {
 	width: 550px;
 	height: 550px;
@@ -51,7 +56,7 @@ body {
 }
 
 .list {
-	max-width: 600px;
+	max-width: 300px;
 	width: 100%;
 	padding: 20px;
 	display: flex;
@@ -61,24 +66,16 @@ body {
 		border: 1px solid #eee;
 		padding: 10px;
 		width: 250px;
-		height: 50px;
 
 		text-decoration: none;
 		text-align: center;
 		color: #000;
 
 		border-radius: 3px;
+	}
 
-		&:hover {
-			background-color: olivedrab;
-			color: orangered;
-		}
-
-		&:nth-child(odd) {
-			margin-right: 15px;
-		}
-		&:nth-child(n - 3) {
-			margin-top: 15px;
-		}
+	&__item-title {
+		font-size: 18px;
+		color: red;
 	}
 }