update cookbook (14.09.18)

Author: NataliaButenko

.gitignore

@@ -1 +1,2 @@
-.idea/
+.idea/
+node_modules/

cookbook/cookbook/package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.5"
   },
   "scripts": {
@@ -13,4 +14,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

cookbook/cookbook/package.json

@@ -112,10 +112,6 @@ label {
   margin-left: 45px;
 }
 
-/*.Login {*/
-/*display: none;*/
-/*}*/
-
 .user-login {
   margin-left: 20px;
 }
@@ -128,7 +124,6 @@ label {
 }
 
 .recept-edit-cake {
-  /*border: 1px solid #00040e;*/
   width: 470px;
   height: 400px;
 }
@@ -148,6 +143,7 @@ label {
   width: 270px;
   height: 270px;
   display: block;
+  margin-left: -40px;
 }
 
 .recept-control-button {
@@ -186,10 +182,6 @@ h2.recept-name {
   height: 210px;
 }
 
-li.ul-li {
-  list-style-type: none;
-}
-
 .recept-edit-button {
   padding-top: 75px;
 }
@@ -205,10 +197,6 @@ li.ul-li {
   font-size: 17px
 }
 
-/*.Recept-edit {*/
-  /*display: none;*/
-/*}*/
-
 .dashboard {
   font-family: 'Brush Script MT', Trattatello;
   color: #5389a6;
@@ -276,24 +264,20 @@ li.ul-li {
 
 .list-ingredients-dish {
   width: 200px;
+  font-size: 25px;
 }
 
 ol {
-  font-size: 30px;
   margin: 0px;
 }
 
-.dish-ingredient {
-  font-size: 25px;
-}
-
 .sum-ingredients {
   text-align: center;
   padding-top: 50px;
   font-size: 30px;
 }
 
-.manage-recipe-button {
+.button-remove {
   height: 30px;
   width: 150px;
   border-radius: 3px;
@@ -305,7 +289,7 @@ ol {
   margin: 20px 20px;
 }
 
-/*.Recepts {*/
-  /*display: none;*/
-/*}*/
+a {
+  text-decoration: none;
+}
 

cookbook/cookbook/src/App.css

@@ -1,30 +1,28 @@
-import React, { Component } from 'react';
+import React, {Component, Fragment} from 'react';
+import {Link, Route} from 'react-router-dom';
 import logo from './logo.svg';
 import './App.css';
-import {Login} from "./pages/autorization-page";
-import {Recepts} from "./pages/recepts-page";
-import {ReceptEdit} from "./pages/edit-recept-page";
+import {Login} from "./pages/autorization-page/autorization-page";
+import {Recepts} from "./pages/recepts-page/recepts-page";
+import {ReceptEdit} from "./pages/edit-recept-page/edit-recept-page";
+import {HeaderComponent} from "./shared-components/header-component";
 
 class App extends Component {
-  constructor() {
-    super();
-    this.state = {
-      activePage: 'login'
-    }
-  }
+  // constructor() {
+  //   super();
+  //   this.state = {
+  //     activePage: 'recepts'
+  //   }
+  // }
   render() {
-
-    if(this.state.activePage === 'login') {
-      return <Login />
-    }
-
-    if(this.state.activePage === 'recepts') {
-      return <Recepts />
-    }
-
-    if(this.state.activePage === 'recept-edit') {
-      return <ReceptEdit />
-    }
+    return (
+      <Fragment>
+        <HeaderComponent withUser={true}/>
+        <Route exact path="/login-page" component={Login}/>
+        <Route exact path="/recepts" component={Recepts}/>
+        <Route exact path="/recept-edit" component={ReceptEdit}/>
+      </Fragment>
+    );
   }
 }
 

cookbook/cookbook/src/App.js

@@ -1,8 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {BrowserRouter} from 'react-router-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const RouteApp = () => {
+  return (
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  );
+};
+
+ReactDOM.render(<RouteApp />, document.getElementById('root'));
 registerServiceWorker();

cookbook/cookbook/src/index.js

@@ -0,0 +1,56 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router-dom';
+
+export class Login extends Component {
+  constructor() {
+    super();
+    this.state = {
+      userNameValue: '',
+      passwordValue: ''
+    }
+  };
+
+  changeInputUserName = (event) => {
+    this.setState({
+      userNameValue: event.target.value
+    })
+  };
+
+  changeInputPassword = (event) => {
+    this.setState({
+      passwordValue: event.target.value
+    })
+  };
+
+  render() {
+    const {
+      userNameValue,
+      passwordValue
+    } = this.state;
+
+    return(
+      <div className="Login">
+        <main className="main">
+          <div className="authorization_form">
+            <form>
+              <h2 className="authorization_caption">Welcome to the book of recipes</h2>
+              <hr/>
+              <label>Username<input className="authorization_input" type="text"
+                                    placeholder="enter username"
+                                    value={userNameValue}
+                                    onChange={this.changeInputUserName}/></label>
+              <label>Password<input className="authorization_input" type="password"
+                                    placeholder="enter password"
+                                    value={passwordValue}
+                                    onChange={this.changeInputPassword}/></label>
+              <Link to='recepts'>
+                <button className="authorization_button">Sign in</button>
+              </Link>
+              <label><input className="authorization_checkbox" type="checkbox" defaultChecked/>Remember me</label>
+            </form>
+          </div>
+        </main>
+      </div>
+    )
+  }
+}