From 80a262b0dbd4c40af46310eabe874d14cc15b765 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 10:59:04 +0200
Subject: [PATCH 01/25] init basic app

---
 .idea/misc.xml |  6 ++++++
 src/App.js     | 29 ++++++++++++++---------------
 2 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 .idea/misc.xml

diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..24eb271
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 7e261ca..8f39cc6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,24 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
 
+const recipes = ['Waffles', 'Omelets'];
+
+const Recipe = (props) =>(
+    <li>{ props.recipe }</li>
+)
+
+const Recipes = (props) => (
+  <ul>
+    {props.recipes.map(recipe => <Recipe key={recipe} recipe={recipe} />)}
+  </ul>
+);
+
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <h1>Recipes:</h1>
+        <Recipes recipes={recipes} />
       </div>
     );
   }

From f166f03de2c80a613050c2fba3923e95149f5b08 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 11:14:59 +0200
Subject: [PATCH 02/25] create state and add form

---
 src/App.css | 11 +++++++++++
 src/App.js  | 49 ++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index 92f956e..4018479 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,6 +6,17 @@
   animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
 }
+.recipes {
+  list-style: none;
+  max-width: 500px;
+  margin: 20px auto;
+}
+.recipe {
+  padding: 20px;
+  border: 1px solid #beb2b2;
+  border-radius: 4px;
+  margin-bottom: 5px;
+}
 
 .App-header {
   background-color: #282c34;
diff --git a/src/App.js b/src/App.js
index 8f39cc6..0ad1075 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,27 +1,54 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import './App.css';
 
-const recipes = ['Waffles', 'Omelets'];
 
-const Recipe = (props) =>(
-    <li>{ props.recipe }</li>
+const Recipe = (props) => (
+    <li className="recipe">{props.recipe}</li>
 )
 
 const Recipes = (props) => (
-  <ul>
-    {props.recipes.map(recipe => <Recipe key={recipe} recipe={recipe} />)}
-  </ul>
+    <ul className="recipes">
+      {props.recipes.map(recipe => <Recipe key={recipe} recipe={recipe}/>)}
+    </ul>
 );
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      recipes: ['Waffles', 'Omelets']
+    }
+  }
+
+
   render() {
     return (
-      <div className="App">
-        <h1>Recipes:</h1>
-        <Recipes recipes={recipes} />
-      </div>
+        <div className="App">
+          <h3>Recipes:</h3>
+
+          <form onSubmit={this.onSubmit.bind(this)}>
+            <input ref={e => this.title = e} type="text"/>
+            <button>Add</button>
+          </form>
+
+          <Recipes recipes={this.state.recipes}/>
+
+
+        </div>
     );
   }
+
+
+  onSubmit(e) {
+    e.preventDefault();
+
+    const newRecipes = this.state.recipes.concat(this.title.value);
+
+    this.title.value = '';
+
+    this.setState({recipes: newRecipes});
+  }
 }
 
 export default App;

From c3ff1cfb2a7ab5c6ba0b060e10fc79dd2064bf5b Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 11:28:49 +0200
Subject: [PATCH 03/25] split to component and pass add recipe

---
 src/App.js | 51 +++++++++++++++++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0ad1075..d7aaf43 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,15 @@
 import React, {Component} from 'react';
 import './App.css';
 
+/**split the code and passing action to components
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
 
 const Recipe = (props) => (
     <li className="recipe">{props.recipe}</li>
-)
+);
 
 const Recipes = (props) => (
     <ul className="recipes">
@@ -12,6 +17,32 @@ const Recipes = (props) => (
     </ul>
 );
 
+
+class AddRecipe extends Component {
+  constructor() {
+    super();
+  }
+
+  onSubmit(e) {
+    e.preventDefault();
+
+    this.props.addRecipe(this.title);
+    this.title.value = '';
+  }
+
+  render() {
+    return (
+        <form onSubmit={this.onSubmit.bind(this)}>
+          <input ref={e => this.title = e} type="text"/>
+          <button>Add</button>
+        </form>
+
+    )
+  }
+
+}
+
+
 class App extends Component {
   constructor() {
     super();
@@ -26,27 +57,15 @@ class App extends Component {
     return (
         <div className="App">
           <h3>Recipes:</h3>
-
-          <form onSubmit={this.onSubmit.bind(this)}>
-            <input ref={e => this.title = e} type="text"/>
-            <button>Add</button>
-          </form>
-
+          <AddRecipe addRecipe={this.addRecipe}/>
           <Recipes recipes={this.state.recipes}/>
-
-
         </div>
     );
   }
 
 
-  onSubmit(e) {
-    e.preventDefault();
-
-    const newRecipes = this.state.recipes.concat(this.title.value);
-
-    this.title.value = '';
-
+  addRecipe = (title) => {
+    const newRecipes = this.state.recipes.concat(title.value);
     this.setState({recipes: newRecipes});
   }
 }

From 532c531ccec223d83dc653967164f575f55c1db9 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 11:37:37 +0200
Subject: [PATCH 04/25] add ids

---
 src/App.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index d7aaf43..b7947bd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,21 @@
 import React, {Component} from 'react';
 import './App.css';
 
-/**split the code and passing action to components
+/**Added id to the items
  * @param props
  * @returns {*}
  * @constructor
  */
+let id = 0;
+const getID = () => id += 1;
 
 const Recipe = (props) => (
-    <li className="recipe">{props.recipe}</li>
+    <li className="recipe">{props.recipe.title}</li>
 );
 
 const Recipes = (props) => (
     <ul className="recipes">
-      {props.recipes.map(recipe => <Recipe key={recipe} recipe={recipe}/>)}
+      {props.recipes.map(recipe => <Recipe key={recipe.id} recipe={recipe}/>)}
     </ul>
 );
 
@@ -48,7 +50,11 @@ class App extends Component {
     super();
 
     this.state = {
-      recipes: ['Waffles', 'Omelets']
+      recipes: [{
+        id: getID(),
+        title: 'Waffles'
+      },{id: getID(),
+        title: 'Omelets'}]
     }
   }
 
@@ -65,7 +71,10 @@ class App extends Component {
 
 
   addRecipe = (title) => {
-    const newRecipes = this.state.recipes.concat(title.value);
+    const newRecipes = this.state.recipes.concat({
+      id:getID(),
+      title: title.value
+    });
     this.setState({recipes: newRecipes});
   }
 }

From 7b7a2b9332202ee066a2d76400552f4afce9c516 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 11:47:14 +0200
Subject: [PATCH 05/25] split to file and dirs

---
 src/App.js                  | 41 ++++---------------------------------
 src/components/AddRecipe.js | 22 ++++++++++++++++++++
 src/components/Recipe.js    |  5 +++++
 src/components/Recipes.js   |  8 ++++++++
 4 files changed, 39 insertions(+), 37 deletions(-)
 create mode 100644 src/components/AddRecipe.js
 create mode 100644 src/components/Recipe.js
 create mode 100644 src/components/Recipes.js

diff --git a/src/App.js b/src/App.js
index b7947bd..f773df8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,10 @@
 import React, {Component} from 'react';
 import './App.css';
+import {AddRecipe} from "./components/AddRecipe";
+import {Recipes} from "./components/Recipes";
 
-/**Added id to the items
+
+/**Split to files and directories
  * @param props
  * @returns {*}
  * @constructor
@@ -9,42 +12,6 @@ import './App.css';
 let id = 0;
 const getID = () => id += 1;
 
-const Recipe = (props) => (
-    <li className="recipe">{props.recipe.title}</li>
-);
-
-const Recipes = (props) => (
-    <ul className="recipes">
-      {props.recipes.map(recipe => <Recipe key={recipe.id} recipe={recipe}/>)}
-    </ul>
-);
-
-
-class AddRecipe extends Component {
-  constructor() {
-    super();
-  }
-
-  onSubmit(e) {
-    e.preventDefault();
-
-    this.props.addRecipe(this.title);
-    this.title.value = '';
-  }
-
-  render() {
-    return (
-        <form onSubmit={this.onSubmit.bind(this)}>
-          <input ref={e => this.title = e} type="text"/>
-          <button>Add</button>
-        </form>
-
-    )
-  }
-
-}
-
-
 class App extends Component {
   constructor() {
     super();
diff --git a/src/components/AddRecipe.js b/src/components/AddRecipe.js
new file mode 100644
index 0000000..cf679a1
--- /dev/null
+++ b/src/components/AddRecipe.js
@@ -0,0 +1,22 @@
+import React, {Component} from "react";
+
+export class AddRecipe extends Component {
+
+  onSubmit(e) {
+    e.preventDefault();
+
+    this.props.addRecipe(this.title);
+    this.title.value = '';
+  }
+
+  render() {
+    return (
+        <form onSubmit={this.onSubmit.bind(this)}>
+          <input ref={e => this.title = e} type="text"/>
+          <button>Add</button>
+        </form>
+
+    )
+  }
+
+}
\ No newline at end of file
diff --git a/src/components/Recipe.js b/src/components/Recipe.js
new file mode 100644
index 0000000..4d45ed3
--- /dev/null
+++ b/src/components/Recipe.js
@@ -0,0 +1,5 @@
+import  React from 'react';
+
+export const Recipe = (props) => (
+    <li className="recipe">{props.recipe.title}</li>
+);
diff --git a/src/components/Recipes.js b/src/components/Recipes.js
new file mode 100644
index 0000000..ecb5ffd
--- /dev/null
+++ b/src/components/Recipes.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import {Recipe} from "./Recipe";
+
+export const Recipes = (props) => (
+    <ul className="recipes">
+      {props.recipes.map(recipe => <Recipe key={recipe.id} recipe={recipe}/>)}
+    </ul>
+);
\ No newline at end of file

From bd35c1c30f5c3e08e60fc7d9522e66763e88baf6 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 11:49:47 +0200
Subject: [PATCH 06/25] split to file and dirs

---
 src/App.js            | 3 +--
 src/services/utils.js | 2 ++
 2 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 src/services/utils.js

diff --git a/src/App.js b/src/App.js
index f773df8..c7ae7b6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import './App.css';
 import {AddRecipe} from "./components/AddRecipe";
 import {Recipes} from "./components/Recipes";
+import {getID} from "./services/utils";
 
 
 /**Split to files and directories
@@ -9,8 +10,6 @@ import {Recipes} from "./components/Recipes";
  * @returns {*}
  * @constructor
  */
-let id = 0;
-const getID = () => id += 1;
 
 class App extends Component {
   constructor() {
diff --git a/src/services/utils.js b/src/services/utils.js
new file mode 100644
index 0000000..ebb46d5
--- /dev/null
+++ b/src/services/utils.js
@@ -0,0 +1,2 @@
+let id = 0;
+export const getID = () => id += 1;

From 15c0db7020af093810c39d41e4e124b8aed6de3a Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 11:52:24 +0200
Subject: [PATCH 07/25] split to file and dirs

---
 src/{ => components/app}/App.css     | 0
 src/{ => components/app}/App.js      | 6 +++---
 src/{ => components/app}/App.test.js | 0
 src/index.js                         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename src/{ => components/app}/App.css (100%)
 rename src/{ => components/app}/App.js (84%)
 rename src/{ => components/app}/App.test.js (100%)

diff --git a/src/App.css b/src/components/app/App.css
similarity index 100%
rename from src/App.css
rename to src/components/app/App.css
diff --git a/src/App.js b/src/components/app/App.js
similarity index 84%
rename from src/App.js
rename to src/components/app/App.js
index c7ae7b6..8f4b3a4 100644
--- a/src/App.js
+++ b/src/components/app/App.js
@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 import './App.css';
-import {AddRecipe} from "./components/AddRecipe";
-import {Recipes} from "./components/Recipes";
-import {getID} from "./services/utils";
+import {AddRecipe} from "../AddRecipe";
+import {Recipes} from "../Recipes";
+import {getID} from "../../services/utils";
 
 
 /**Split to files and directories
diff --git a/src/App.test.js b/src/components/app/App.test.js
similarity index 100%
rename from src/App.test.js
rename to src/components/app/App.test.js
diff --git a/src/index.js b/src/index.js
index 0c5e75d..c5daba2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/app/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

From de5a1dbf28514560f24ef927219af54075bee001 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 12:02:31 +0200
Subject: [PATCH 08/25] propTypes

---
 package.json                | 1 +
 src/components/AddRecipe.js | 6 +++++-
 src/components/Recipe.js    | 7 ++++++-
 src/components/Recipes.js   | 7 ++++++-
 src/components/app/App.js   | 2 +-
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index c410316..62b7464 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-scripts": "2.1.1"
diff --git a/src/components/AddRecipe.js b/src/components/AddRecipe.js
index cf679a1..4d1412f 100644
--- a/src/components/AddRecipe.js
+++ b/src/components/AddRecipe.js
@@ -1,4 +1,5 @@
 import React, {Component} from "react";
+import PropTypes from 'prop-types';
 
 export class AddRecipe extends Component {
 
@@ -18,5 +19,8 @@ export class AddRecipe extends Component {
 
     )
   }
+}
 
-}
\ No newline at end of file
+AddRecipe.propTypes = {
+  addRecipe: PropTypes.func.isRequired
+};
diff --git a/src/components/Recipe.js b/src/components/Recipe.js
index 4d45ed3..03c291e 100644
--- a/src/components/Recipe.js
+++ b/src/components/Recipe.js
@@ -1,5 +1,10 @@
-import  React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 export const Recipe = (props) => (
     <li className="recipe">{props.recipe.title}</li>
 );
+
+Recipe.propTypes = {
+  recipe: PropTypes.object.isRequired
+};
diff --git a/src/components/Recipes.js b/src/components/Recipes.js
index ecb5ffd..2676d32 100644
--- a/src/components/Recipes.js
+++ b/src/components/Recipes.js
@@ -1,8 +1,13 @@
 import React from 'react';
 import {Recipe} from "./Recipe";
+import PropTypes from 'prop-types';
 
 export const Recipes = (props) => (
     <ul className="recipes">
       {props.recipes.map(recipe => <Recipe key={recipe.id} recipe={recipe}/>)}
     </ul>
-);
\ No newline at end of file
+);
+
+Recipes.propTypes = {
+  recipes: PropTypes.array.isRequired
+};
\ No newline at end of file
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 8f4b3a4..c01e317 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -5,7 +5,7 @@ import {Recipes} from "../Recipes";
 import {getID} from "../../services/utils";
 
 
-/**Split to files and directories
+/**Add prop-types to components need to add prop-types to package.json
  * @param props
  * @returns {*}
  * @constructor

From a0107d0d9ce8e97588081f5e4626b0b70d0c2d77 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 12:22:55 +0200
Subject: [PATCH 09/25] propTypes

---
 package.json               |  1 +
 src/components/Recipe.js   | 10 ++++++++--
 src/components/app/App.css |  1 +
 src/components/app/App.js  | 18 ++++++++++++------
 src/index.css              |  5 +++++
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 62b7464..d01edc4 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
diff --git a/src/components/Recipe.js b/src/components/Recipe.js
index 03c291e..edba248 100644
--- a/src/components/Recipe.js
+++ b/src/components/Recipe.js
@@ -1,8 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-export const Recipe = (props) => (
-    <li className="recipe">{props.recipe.title}</li>
+export const Recipe = ({recipe}) => (
+    <li className={classNames(
+        {
+          recipe: true,
+          favorite: recipe.favorite
+        })}
+    >{recipe.title}</li>
 );
 
 Recipe.propTypes = {
diff --git a/src/components/app/App.css b/src/components/app/App.css
index 4018479..4ddc90d 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -18,6 +18,7 @@
   margin-bottom: 5px;
 }
 
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
diff --git a/src/components/app/App.js b/src/components/app/App.js
index c01e317..8705da7 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -5,7 +5,7 @@ import {Recipes} from "../Recipes";
 import {getID} from "../../services/utils";
 
 
-/**Add prop-types to components need to add prop-types to package.json
+/**Add favirote with classNames to components need to add classNames to package.json
  * @param props
  * @returns {*}
  * @constructor
@@ -18,9 +18,13 @@ class App extends Component {
     this.state = {
       recipes: [{
         id: getID(),
-        title: 'Waffles'
-      },{id: getID(),
-        title: 'Omelets'}]
+        title: 'Waffles',
+        favorite: true
+      }, {
+        id: getID(),
+        title: 'Omelets',
+        favorite: false
+      }]
     }
   }
 
@@ -37,9 +41,11 @@ class App extends Component {
 
 
   addRecipe = (title) => {
+    const id = getID();
     const newRecipes = this.state.recipes.concat({
-      id:getID(),
-      title: title.value
+      id ,
+      title: title.value,
+      favorite: false
     });
     this.setState({recipes: newRecipes});
   }
diff --git a/src/index.css b/src/index.css
index cee5f34..6c81b2d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,3 +12,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.favorite {
+  font-weight: bold;
+ background: yellow;
+}
\ No newline at end of file

From 4b68348eb91019b64406e43eb83d4bbecfc37ded Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 6 Nov 2018 14:00:02 +0200
Subject: [PATCH 10/25] propTypes

---
 src/components/Recipes.js                  | 13 -------------
 src/components/{ => RecipesView}/Recipe.js |  6 ++++--
 src/components/RecipesView/Recipes.js      | 16 ++++++++++++++++
 src/components/app/App.js                  | 18 ++++++++++++++----
 src/components/app/footer/Footer.css       |  8 ++++++++
 src/components/app/footer/Footer.js        |  8 ++++++++
 src/components/header/Header.css           |  5 +++++
 src/components/header/Header.js            | 10 ++++++++++
 8 files changed, 65 insertions(+), 19 deletions(-)
 delete mode 100644 src/components/Recipes.js
 rename src/components/{ => RecipesView}/Recipe.js (62%)
 create mode 100644 src/components/RecipesView/Recipes.js
 create mode 100644 src/components/app/footer/Footer.css
 create mode 100644 src/components/app/footer/Footer.js
 create mode 100644 src/components/header/Header.css
 create mode 100644 src/components/header/Header.js

diff --git a/src/components/Recipes.js b/src/components/Recipes.js
deleted file mode 100644
index 2676d32..0000000
--- a/src/components/Recipes.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import {Recipe} from "./Recipe";
-import PropTypes from 'prop-types';
-
-export const Recipes = (props) => (
-    <ul className="recipes">
-      {props.recipes.map(recipe => <Recipe key={recipe.id} recipe={recipe}/>)}
-    </ul>
-);
-
-Recipes.propTypes = {
-  recipes: PropTypes.array.isRequired
-};
\ No newline at end of file
diff --git a/src/components/Recipe.js b/src/components/RecipesView/Recipe.js
similarity index 62%
rename from src/components/Recipe.js
rename to src/components/RecipesView/Recipe.js
index edba248..1a96a08 100644
--- a/src/components/Recipe.js
+++ b/src/components/RecipesView/Recipe.js
@@ -2,15 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const Recipe = ({recipe}) => (
+export const Recipe = ({recipe, toggle}) => (
     <li className={classNames(
         {
           recipe: true,
           favorite: recipe.favorite
         })}
+        onClick={() => toggle(recipe)}
     >{recipe.title}</li>
 );
 
 Recipe.propTypes = {
-  recipe: PropTypes.object.isRequired
+  recipe: PropTypes.object.isRequired,
+  toggle: PropTypes.func.isRequired
 };
diff --git a/src/components/RecipesView/Recipes.js b/src/components/RecipesView/Recipes.js
new file mode 100644
index 0000000..53f3591
--- /dev/null
+++ b/src/components/RecipesView/Recipes.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Recipe} from "./Recipe";
+import PropTypes from 'prop-types';
+
+export const Recipes = (props) => (
+    <ul className="recipes">
+      {props.recipes.map(recipe => <Recipe key={recipe.id}
+                                           recipe={recipe}
+                                           toggle={props.toggle}/>)}
+    </ul>
+);
+
+Recipes.propTypes = {
+  recipes: PropTypes.array.isRequired,
+  toggle: PropTypes.func.isRequired
+};
\ No newline at end of file
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 8705da7..b9a5b71 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -1,8 +1,11 @@
 import React, {Component} from 'react';
 import './App.css';
 import {AddRecipe} from "../AddRecipe";
-import {Recipes} from "../Recipes";
+import {Recipes} from "../RecipesView/Recipes";
 import {getID} from "../../services/utils";
+import Header from "../header/Header";
+import {Footer} from "./footer/Footer";
+
 
 
 /**Add favirote with classNames to components need to add classNames to package.json
@@ -27,14 +30,21 @@ class App extends Component {
       }]
     }
   }
+  toggleRecipes = (recipe) => {
+    recipe.favorite = !recipe.favorite;
+    this.forceUpdate();
+  };
+
 
 
   render() {
     return (
-        <div className="App">
+        <div className="App">.
+          <Header />
           <h3>Recipes:</h3>
-          <AddRecipe addRecipe={this.addRecipe}/>
-          <Recipes recipes={this.state.recipes}/>
+          <AddRecipe addRecipe={ this.addRecipe }/>
+          <Recipes recipes={this.state.recipes} toggle ={ this.toggleRecipes }/>
+          <Footer />
         </div>
     );
   }
diff --git a/src/components/app/footer/Footer.css b/src/components/app/footer/Footer.css
new file mode 100644
index 0000000..6cb0795
--- /dev/null
+++ b/src/components/app/footer/Footer.css
@@ -0,0 +1,8 @@
+.basic-footer {
+    background: #807c75;
+    padding: 10px;
+    color: white;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/app/footer/Footer.js b/src/components/app/footer/Footer.js
new file mode 100644
index 0000000..3534e57
--- /dev/null
+++ b/src/components/app/footer/Footer.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import './Footer.css';
+
+export const Footer = () => (
+    <footer className="basic-footer">
+      Our basic React app Recipes
+    </footer>
+)
\ No newline at end of file
diff --git a/src/components/header/Header.css b/src/components/header/Header.css
new file mode 100644
index 0000000..2a9645a
--- /dev/null
+++ b/src/components/header/Header.css
@@ -0,0 +1,5 @@
+.basic-header {
+    background: #807c75;
+    padding: 10px;
+    color: white;
+}
\ No newline at end of file
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
new file mode 100644
index 0000000..18ebf7f
--- /dev/null
+++ b/src/components/header/Header.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import './Header.css';
+
+ const Header = () => (
+    <header className="basic-header">
+      Welcome Friends
+    </header>
+);
+
+export default Header
\ No newline at end of file

From da40693e34ca584807e307e1dc09dd04434b24b4 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 13 Nov 2018 12:04:06 +0200
Subject: [PATCH 11/25] make it one view

---
 src/components/{ => Recipes}/AddRecipe.js     |  0
 .../{RecipesView => Recipes}/Recipe.js        |  0
 .../{RecipesView => Recipes}/Recipes.js       |  0
 src/components/Recipes/RecipesView.js         | 52 +++++++++++++++++++
 src/components/app/App.js                     | 47 ++---------------
 5 files changed, 57 insertions(+), 42 deletions(-)
 rename src/components/{ => Recipes}/AddRecipe.js (100%)
 rename src/components/{RecipesView => Recipes}/Recipe.js (100%)
 rename src/components/{RecipesView => Recipes}/Recipes.js (100%)
 create mode 100644 src/components/Recipes/RecipesView.js

diff --git a/src/components/AddRecipe.js b/src/components/Recipes/AddRecipe.js
similarity index 100%
rename from src/components/AddRecipe.js
rename to src/components/Recipes/AddRecipe.js
diff --git a/src/components/RecipesView/Recipe.js b/src/components/Recipes/Recipe.js
similarity index 100%
rename from src/components/RecipesView/Recipe.js
rename to src/components/Recipes/Recipe.js
diff --git a/src/components/RecipesView/Recipes.js b/src/components/Recipes/Recipes.js
similarity index 100%
rename from src/components/RecipesView/Recipes.js
rename to src/components/Recipes/Recipes.js
diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
new file mode 100644
index 0000000..fe0d874
--- /dev/null
+++ b/src/components/Recipes/RecipesView.js
@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import {getID} from "../../services/utils";
+import {Recipes} from './Recipes';
+import {AddRecipe} from './AddRecipe';
+
+
+class RecipesView extends Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      recipes: [{
+        id: getID(),
+        title: 'Waffles',
+        favorite: true
+      }, {
+        id: getID(),
+        title: 'Omelets',
+        favorite: false
+      }]
+    }
+  }
+
+  toggleRecipes = (recipe) => {
+    recipe.favorite = !recipe.favorite;
+    this.forceUpdate();
+  };
+
+
+  addRecipe = (title) => {
+    const id = getID();
+    const newRecipes = this.state.recipes.concat({
+      id,
+      title: title.value,
+      favorite: false
+    });
+    this.setState({recipes: newRecipes});
+  };
+
+  render() {
+    return (
+        <div className="recipes-view">
+          <h3>Recipes:</h3>
+          <AddRecipe addRecipe={this.addRecipe}/>
+          <Recipes recipes={this.state.recipes} toggle={this.toggleRecipes}/>
+        </div>
+    )
+  }
+}
+
+export default RecipesView;
\ No newline at end of file
diff --git a/src/components/app/App.js b/src/components/app/App.js
index b9a5b71..5a942a3 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -1,13 +1,10 @@
 import React, {Component} from 'react';
 import './App.css';
-import {AddRecipe} from "../AddRecipe";
-import {Recipes} from "../RecipesView/Recipes";
-import {getID} from "../../services/utils";
+import RecipesView from "../Recipes/RecipesView";
 import Header from "../header/Header";
 import {Footer} from "./footer/Footer";
 
 
-
 /**Add favirote with classNames to components need to add classNames to package.json
  * @param props
  * @returns {*}
@@ -15,50 +12,16 @@ import {Footer} from "./footer/Footer";
  */
 
 class App extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      recipes: [{
-        id: getID(),
-        title: 'Waffles',
-        favorite: true
-      }, {
-        id: getID(),
-        title: 'Omelets',
-        favorite: false
-      }]
-    }
-  }
-  toggleRecipes = (recipe) => {
-    recipe.favorite = !recipe.favorite;
-    this.forceUpdate();
-  };
-
-
-
   render() {
     return (
-        <div className="App">.
-          <Header />
-          <h3>Recipes:</h3>
-          <AddRecipe addRecipe={ this.addRecipe }/>
-          <Recipes recipes={this.state.recipes} toggle ={ this.toggleRecipes }/>
-          <Footer />
+        <div className="App">
+          <Header/>
+          <RecipesView/>
+          <Footer/>
         </div>
     );
   }
 
-
-  addRecipe = (title) => {
-    const id = getID();
-    const newRecipes = this.state.recipes.concat({
-      id ,
-      title: title.value,
-      favorite: false
-    });
-    this.setState({recipes: newRecipes});
-  }
 }
 
 export default App;

From 71444e9a9377e610b10b6d6bd5bcc9bf0c0956f5 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 13 Nov 2018 14:20:57 +0200
Subject: [PATCH 12/25] adding redux

---
 package.json                          |  4 ++-
 src/components/Recipes/AddRecipe.js   | 11 +++++--
 src/components/Recipes/Recipes.js     | 14 +++++++--
 src/components/Recipes/RecipesView.js | 41 +++------------------------
 src/index.js                          |  8 +++++-
 src/store.js                          | 39 +++++++++++++++++++++++++
 6 files changed, 74 insertions(+), 43 deletions(-)
 create mode 100644 src/store.js

diff --git a/package.json b/package.json
index d01edc4..9042e2e 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-scripts": "2.1.1"
+    "react-redux": "^5.1.1",
+    "react-scripts": "2.1.1",
+    "redux": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Recipes/AddRecipe.js b/src/components/Recipes/AddRecipe.js
index 4d1412f..581eb4c 100644
--- a/src/components/Recipes/AddRecipe.js
+++ b/src/components/Recipes/AddRecipe.js
@@ -1,12 +1,13 @@
 import React, {Component} from "react";
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-export class AddRecipe extends Component {
+ class AddRecipe extends Component {
 
   onSubmit(e) {
     e.preventDefault();
 
-    this.props.addRecipe(this.title);
+    this.props.addRecipe(this.title.value);
     this.title.value = '';
   }
 
@@ -24,3 +25,9 @@ export class AddRecipe extends Component {
 AddRecipe.propTypes = {
   addRecipe: PropTypes.func.isRequired
 };
+ const mapDispatchToProps = (dispatch)=> ({
+   addRecipe: (title) =>dispatch({type: 'ADD_RECIPE', title})
+ });
+
+
+ export default connect(null,mapDispatchToProps)(AddRecipe)
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index 53f3591..36e4b98 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import {Recipe} from "./Recipe";
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-export const Recipes = (props) => (
+ const Recipes = (props) => (
     <ul className="recipes">
       {props.recipes.map(recipe => <Recipe key={recipe.id}
                                            recipe={recipe}
@@ -13,4 +14,13 @@ export const Recipes = (props) => (
 Recipes.propTypes = {
   recipes: PropTypes.array.isRequired,
   toggle: PropTypes.func.isRequired
-};
\ No newline at end of file
+};
+
+const mapStateToProps = (state) => {
+  return {
+    recipes:state.recipes,
+    toggle:()=>console.log('Toggle')
+  }
+}
+
+export default connect(mapStateToProps)(Recipes);
\ No newline at end of file
diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
index fe0d874..e587926 100644
--- a/src/components/Recipes/RecipesView.js
+++ b/src/components/Recipes/RecipesView.js
@@ -1,49 +1,16 @@
 import React, {Component} from 'react';
-import {getID} from "../../services/utils";
-import {Recipes} from './Recipes';
-import {AddRecipe} from './AddRecipe';
+import Recipes from './Recipes';
+import AddRecipe from './AddRecipe';
 
 
 class RecipesView extends Component {
 
-  constructor() {
-    super();
-
-    this.state = {
-      recipes: [{
-        id: getID(),
-        title: 'Waffles',
-        favorite: true
-      }, {
-        id: getID(),
-        title: 'Omelets',
-        favorite: false
-      }]
-    }
-  }
-
-  toggleRecipes = (recipe) => {
-    recipe.favorite = !recipe.favorite;
-    this.forceUpdate();
-  };
-
-
-  addRecipe = (title) => {
-    const id = getID();
-    const newRecipes = this.state.recipes.concat({
-      id,
-      title: title.value,
-      favorite: false
-    });
-    this.setState({recipes: newRecipes});
-  };
-
   render() {
     return (
         <div className="recipes-view">
           <h3>Recipes:</h3>
-          <AddRecipe addRecipe={this.addRecipe}/>
-          <Recipes recipes={this.state.recipes} toggle={this.toggleRecipes}/>
+          <AddRecipe />
+          <Recipes />
         </div>
     )
   }
diff --git a/src/index.js b/src/index.js
index c5daba2..dd42ff1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,8 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './components/app/App';
 import * as serviceWorker from './serviceWorker';
+import store from "./store";
+import {Provider} from 'react-redux';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+    <Provider store={store}>
+      <App/>
+    </Provider>,
+    document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..d3a1d90
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,39 @@
+import {getID} from "./services/utils";
+import {createStore} from 'redux';
+
+const reducer = (state, action) => {
+  console.log(`Got Action ${action.type}`);
+
+  switch (action.type) {
+    case 'ADD_RECIPE':
+      const newRecipe = {
+        id: getID(),
+        title: action.title,
+        favorite: false
+      };
+      const newRecipes = state.recipes.concat(newRecipe);
+      return Object.assign({}, state, {
+        recipes: newRecipes
+      });
+    default:
+      return state;
+  }
+};
+
+const initialState = {
+  recipes: [{
+    id: getID(),
+    title: 'Waffles',
+    favorite: true
+  }, {
+    id: getID(),
+    title: 'Omelets',
+    favorite: false
+  }]
+}
+
+const store = createStore(reducer, initialState);
+
+window.store = store;
+
+export default store;
\ No newline at end of file

From ce040ceb67832b6c2b13728cfa2974dc1d371d78 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 13 Nov 2018 15:57:40 +0200
Subject: [PATCH 13/25] adding redux

---
 src/actions/recipes.js                     | 12 ++++++++++++
 src/components/Recipes/AddRecipe.js        |  6 ++----
 src/components/Recipes/Recipes.js          |  4 ++--
 src/components/Recipes/RecipesView.js      |  3 +++
 src/components/app/App.js                  |  2 +-
 src/components/{app => }/footer/Footer.css |  0
 src/components/{app => }/footer/Footer.js  |  0
 src/constants/actions-types.js             |  2 ++
 src/store.js                               | 13 ++++++++++++-
 9 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 src/actions/recipes.js
 rename src/components/{app => }/footer/Footer.css (100%)
 rename src/components/{app => }/footer/Footer.js (100%)
 create mode 100644 src/constants/actions-types.js

diff --git a/src/actions/recipes.js b/src/actions/recipes.js
new file mode 100644
index 0000000..dd15721
--- /dev/null
+++ b/src/actions/recipes.js
@@ -0,0 +1,12 @@
+import * as consts from '../constants/actions-types';
+
+export const addRecipe = (title) => ({
+  type: consts.ADD_RECIPE,
+  title
+});
+
+export const toggleRecipe = (recipe) => ({
+  type: consts.TOGGLE_RECIPE,
+  id: recipe.id
+});
+
diff --git a/src/components/Recipes/AddRecipe.js b/src/components/Recipes/AddRecipe.js
index 581eb4c..edd5f89 100644
--- a/src/components/Recipes/AddRecipe.js
+++ b/src/components/Recipes/AddRecipe.js
@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import {addRecipe} from "../../actions/recipes";
 
  class AddRecipe extends Component {
 
@@ -25,9 +26,6 @@ import { connect } from 'react-redux';
 AddRecipe.propTypes = {
   addRecipe: PropTypes.func.isRequired
 };
- const mapDispatchToProps = (dispatch)=> ({
-   addRecipe: (title) =>dispatch({type: 'ADD_RECIPE', title})
- });
 
 
- export default connect(null,mapDispatchToProps)(AddRecipe)
+ export default connect(null,{addRecipe})(AddRecipe)
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index 36e4b98..be17545 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {Recipe} from "./Recipe";
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import {toggleRecipe} from "../../actions/recipes";
 
  const Recipes = (props) => (
     <ul className="recipes">
@@ -19,8 +20,7 @@ Recipes.propTypes = {
 const mapStateToProps = (state) => {
   return {
     recipes:state.recipes,
-    toggle:()=>console.log('Toggle')
   }
 }
 
-export default connect(mapStateToProps)(Recipes);
\ No newline at end of file
+export default connect(mapStateToProps, {toggle: toggleRecipe})(Recipes);
\ No newline at end of file
diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
index e587926..8f421b2 100644
--- a/src/components/Recipes/RecipesView.js
+++ b/src/components/Recipes/RecipesView.js
@@ -2,6 +2,9 @@ import React, {Component} from 'react';
 import Recipes from './Recipes';
 import AddRecipe from './AddRecipe';
 
+/**
+ * add actions to the components and constants
+ */
 
 class RecipesView extends Component {
 
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 5a942a3..cc7e0ae 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import './App.css';
 import RecipesView from "../Recipes/RecipesView";
 import Header from "../header/Header";
-import {Footer} from "./footer/Footer";
+import {Footer} from "../footer/Footer";
 
 
 /**Add favirote with classNames to components need to add classNames to package.json
diff --git a/src/components/app/footer/Footer.css b/src/components/footer/Footer.css
similarity index 100%
rename from src/components/app/footer/Footer.css
rename to src/components/footer/Footer.css
diff --git a/src/components/app/footer/Footer.js b/src/components/footer/Footer.js
similarity index 100%
rename from src/components/app/footer/Footer.js
rename to src/components/footer/Footer.js
diff --git a/src/constants/actions-types.js b/src/constants/actions-types.js
new file mode 100644
index 0000000..74d32d8
--- /dev/null
+++ b/src/constants/actions-types.js
@@ -0,0 +1,2 @@
+export const ADD_RECIPE = 'ADD_RECIPE';
+export const TOGGLE_RECIPE = 'TOGGLE_RECIPE';
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index d3a1d90..7d78e00 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,11 +1,13 @@
 import {getID} from "./services/utils";
 import {createStore} from 'redux';
+import * as consts from './constants/actions-types';
+
 
 const reducer = (state, action) => {
   console.log(`Got Action ${action.type}`);
 
   switch (action.type) {
-    case 'ADD_RECIPE':
+    case consts.ADD_RECIPE:
       const newRecipe = {
         id: getID(),
         title: action.title,
@@ -15,6 +17,15 @@ const reducer = (state, action) => {
       return Object.assign({}, state, {
         recipes: newRecipes
       });
+
+    case consts.TOGGLE_RECIPE:
+      const updatedRecipes = state.recipes.map(recipe => recipe.id !== action.id
+          ? recipe
+          : Object.assign({}, recipe, { favorite: !recipe.favorite }));
+
+      return Object.assign({}, state, {
+        recipes: updatedRecipes
+      });
     default:
       return state;
   }

From 8f2231a2a1e09183dc1b06b128309744d84f01c9 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Sun, 2 Dec 2018 15:32:52 +0200
Subject: [PATCH 14/25] adding redux

---
 .idea/encodings.xml                 |  4 ++++
 src/components/Recipes/AddRecipe.js | 11 +++++++----
 src/components/Recipes/Recipes.js   |  6 +++---
 src/components/app/App.js           |  6 +++++-
 src/store.js                        | 14 +++++++++++---
 5 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 .idea/encodings.xml

diff --git a/.idea/encodings.xml b/.idea/encodings.xml
new file mode 100644
index 0000000..15a15b2
--- /dev/null
+++ b/.idea/encodings.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with NO BOM" />
+</project>
\ No newline at end of file
diff --git a/src/components/Recipes/AddRecipe.js b/src/components/Recipes/AddRecipe.js
index edd5f89..b9de62a 100644
--- a/src/components/Recipes/AddRecipe.js
+++ b/src/components/Recipes/AddRecipe.js
@@ -1,9 +1,8 @@
 import React, {Component} from "react";
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import {addRecipe} from "../../actions/recipes";
+import {connect} from 'react-redux';
 
- class AddRecipe extends Component {
+class AddRecipe extends Component {
 
   onSubmit(e) {
     e.preventDefault();
@@ -27,5 +26,9 @@ AddRecipe.propTypes = {
   addRecipe: PropTypes.func.isRequired
 };
 
+const mapDispatchToProps = (dispatch) => ({
+  addRecipe: (title) => dispatch({type: 'ADD_RECIPE', title})
+});
 
- export default connect(null,{addRecipe})(AddRecipe)
+
+export default connect(null, mapDispatchToProps)(AddRecipe)
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index be17545..968840c 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -2,7 +2,6 @@ import React from 'react';
 import {Recipe} from "./Recipe";
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {toggleRecipe} from "../../actions/recipes";
 
  const Recipes = (props) => (
     <ul className="recipes">
@@ -20,7 +19,8 @@ Recipes.propTypes = {
 const mapStateToProps = (state) => {
   return {
     recipes:state.recipes,
+    toggle: () => console.log("Toggle")
   }
-}
+};
 
-export default connect(mapStateToProps, {toggle: toggleRecipe})(Recipes);
\ No newline at end of file
+export default connect(mapStateToProps)(Recipes);
\ No newline at end of file
diff --git a/src/components/app/App.js b/src/components/app/App.js
index cc7e0ae..5867642 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -5,7 +5,11 @@ import Header from "../header/Header";
 import {Footer} from "../footer/Footer";
 
 
-/**Add favirote with classNames to components need to add classNames to package.json
+/**Connection with redux:
+ * Add to package.json: redux, react-redux
+ * We should add Provider wrapper in the index.js
+ * Create store file
+ *
  * @param props
  * @returns {*}
  * @constructor
diff --git a/src/store.js b/src/store.js
index 7d78e00..7ce975a 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,13 +1,21 @@
 import {getID} from "./services/utils";
 import {createStore} from 'redux';
-import * as consts from './constants/actions-types';
 
 
+/**
+ * Adding reducer to handle the actions
+ * Creating initialState
+ * and Create store and adding it to the window object
+ * @param state
+ * @param action
+ * @returns {*}
+ */
+
 const reducer = (state, action) => {
   console.log(`Got Action ${action.type}`);
 
   switch (action.type) {
-    case consts.ADD_RECIPE:
+    case 'ADD_RECIPE':
       const newRecipe = {
         id: getID(),
         title: action.title,
@@ -18,7 +26,7 @@ const reducer = (state, action) => {
         recipes: newRecipes
       });
 
-    case consts.TOGGLE_RECIPE:
+    case 'TOGGLE_RECIPE':
       const updatedRecipes = state.recipes.map(recipe => recipe.id !== action.id
           ? recipe
           : Object.assign({}, recipe, { favorite: !recipe.favorite }));

From 66496da0f2a26c38f522e23cc19097cdd13c12dc Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Sun, 2 Dec 2018 15:47:10 +0200
Subject: [PATCH 15/25] adding redux

---
 src/components/Recipes/RecipesView.js | 12 ++++++++---
 src/index.css                         | 30 +++++++++++++++++++--------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
index 8f421b2..354b9b4 100644
--- a/src/components/Recipes/RecipesView.js
+++ b/src/components/Recipes/RecipesView.js
@@ -10,10 +10,16 @@ class RecipesView extends Component {
 
   render() {
     return (
-        <div className="recipes-view">
+        <div>
           <h3>Recipes:</h3>
-          <AddRecipe />
-          <Recipes />
+          <div className="recipes-view">
+            <div className="middle-grid">
+              <Recipes/>
+            </div>
+            <div className="left-grid">
+              <AddRecipe/>
+            </div>
+          </div>
         </div>
     )
   }
diff --git a/src/index.css b/src/index.css
index 6c81b2d..b669c15 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,19 +1,31 @@
 body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
 .favorite {
-  font-weight: bold;
- background: yellow;
-}
\ No newline at end of file
+    font-weight: bold;
+    background: yellow;
+}
+
+.recipes-view {
+    display: flex;
+    text-align: left;
+}
+.recipes-view .middle-grid {
+width: 40%;
+}
+
+.recipes-view .left-grid {
+width: 60%;
+}

From e43b194644fda328e772b0daa966881cf40838a3 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Sun, 2 Dec 2018 16:16:52 +0200
Subject: [PATCH 16/25] remove things to consts

---
 src/components/Recipes/AddRecipe.js |  6 ++----
 src/components/Recipes/Recipes.js   | 10 +++++-----
 src/components/app/App.js           |  4 +---
 src/store.js                        |  5 +++--
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/Recipes/AddRecipe.js b/src/components/Recipes/AddRecipe.js
index b9de62a..a7a153d 100644
--- a/src/components/Recipes/AddRecipe.js
+++ b/src/components/Recipes/AddRecipe.js
@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {addRecipe} from '../../actions/recipes';
 
 class AddRecipe extends Component {
 
@@ -26,9 +27,6 @@ AddRecipe.propTypes = {
   addRecipe: PropTypes.func.isRequired
 };
 
-const mapDispatchToProps = (dispatch) => ({
-  addRecipe: (title) => dispatch({type: 'ADD_RECIPE', title})
-});
 
 
-export default connect(null, mapDispatchToProps)(AddRecipe)
+export default connect(null, { addRecipe })(AddRecipe)
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index 968840c..c708a4c 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import {Recipe} from "./Recipe";
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
+import {toggleRecipe as toggle} from '../../actions/recipes';
 
- const Recipes = (props) => (
+const Recipes = (props) => (
     <ul className="recipes">
       {props.recipes.map(recipe => <Recipe key={recipe.id}
                                            recipe={recipe}
@@ -18,9 +19,8 @@ Recipes.propTypes = {
 
 const mapStateToProps = (state) => {
   return {
-    recipes:state.recipes,
-    toggle: () => console.log("Toggle")
+    recipes: state.recipes
   }
 };
 
-export default connect(mapStateToProps)(Recipes);
\ No newline at end of file
+export default connect(mapStateToProps, {toggle})(Recipes);
\ No newline at end of file
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 5867642..25842f3 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,9 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * Add to package.json: redux, react-redux
- * We should add Provider wrapper in the index.js
- * Create store file
+ * Remove all to consts
  *
  * @param props
  * @returns {*}
diff --git a/src/store.js b/src/store.js
index 7ce975a..7a41997 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,5 +1,6 @@
 import {getID} from "./services/utils";
 import {createStore} from 'redux';
+import * as consts from './constants/actions-types';
 
 
 /**
@@ -15,7 +16,7 @@ const reducer = (state, action) => {
   console.log(`Got Action ${action.type}`);
 
   switch (action.type) {
-    case 'ADD_RECIPE':
+    case consts.ADD_RECIPE:
       const newRecipe = {
         id: getID(),
         title: action.title,
@@ -26,7 +27,7 @@ const reducer = (state, action) => {
         recipes: newRecipes
       });
 
-    case 'TOGGLE_RECIPE':
+    case consts.TOGGLE_RECIPE:
       const updatedRecipes = state.recipes.map(recipe => recipe.id !== action.id
           ? recipe
           : Object.assign({}, recipe, { favorite: !recipe.favorite }));

From 91c75268347c4a39c4221b9bdd1bf4644026c4ea Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Sun, 2 Dec 2018 16:48:32 +0200
Subject: [PATCH 17/25] add description

---
 src/actions/recipes.js              |  5 +++--
 src/components/Recipes/AddRecipe.js | 16 +++++++++++-----
 src/components/app/App.js           |  2 +-
 src/index.css                       |  9 +++++++--
 src/store.js                        | 10 +++++++---
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/actions/recipes.js b/src/actions/recipes.js
index dd15721..d8687fc 100644
--- a/src/actions/recipes.js
+++ b/src/actions/recipes.js
@@ -1,8 +1,9 @@
 import * as consts from '../constants/actions-types';
 
-export const addRecipe = (title) => ({
+export const addRecipe = (recipe) => ({
   type: consts.ADD_RECIPE,
-  title
+  title: recipe.title,
+  description: recipe.description,
 });
 
 export const toggleRecipe = (recipe) => ({
diff --git a/src/components/Recipes/AddRecipe.js b/src/components/Recipes/AddRecipe.js
index a7a153d..8edc34e 100644
--- a/src/components/Recipes/AddRecipe.js
+++ b/src/components/Recipes/AddRecipe.js
@@ -7,15 +7,22 @@ class AddRecipe extends Component {
 
   onSubmit(e) {
     e.preventDefault();
-
-    this.props.addRecipe(this.title.value);
+    debugger;
+    this.props.addRecipe({title: this.title.value, description: this.description.value});
     this.title.value = '';
+    this.description.value = '';
   }
 
   render() {
     return (
         <form onSubmit={this.onSubmit.bind(this)}>
-          <input ref={e => this.title = e} type="text"/>
+          <div>
+            <label className="form-label">Title:</label><input ref={e => this.title = e} type="text"/>
+          </div>
+          <div>
+            <label className="form-label">Description:</label>
+            <textarea ref={e => this.description = e}/>
+          </div>
           <button>Add</button>
         </form>
 
@@ -28,5 +35,4 @@ AddRecipe.propTypes = {
 };
 
 
-
-export default connect(null, { addRecipe })(AddRecipe)
+export default connect(null, {addRecipe})(AddRecipe)
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 25842f3..a08f777 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * Remove all to consts
+ * Adding description
  *
  * @param props
  * @returns {*}
diff --git a/src/index.css b/src/index.css
index b669c15..23541e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,10 +22,15 @@ code {
     display: flex;
     text-align: left;
 }
+
 .recipes-view .middle-grid {
-width: 40%;
+    width: 40%;
 }
 
 .recipes-view .left-grid {
-width: 60%;
+    width: 60%;
 }
+
+.form-label {
+    display: block;
+}
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index 7a41997..a8452a9 100644
--- a/src/store.js
+++ b/src/store.js
@@ -20,6 +20,7 @@ const reducer = (state, action) => {
       const newRecipe = {
         id: getID(),
         title: action.title,
+        description: action.description,
         favorite: false
       };
       const newRecipes = state.recipes.concat(newRecipe);
@@ -30,7 +31,7 @@ const reducer = (state, action) => {
     case consts.TOGGLE_RECIPE:
       const updatedRecipes = state.recipes.map(recipe => recipe.id !== action.id
           ? recipe
-          : Object.assign({}, recipe, { favorite: !recipe.favorite }));
+          : Object.assign({}, recipe, {favorite: !recipe.favorite}));
 
       return Object.assign({}, state, {
         recipes: updatedRecipes
@@ -44,11 +45,14 @@ const initialState = {
   recipes: [{
     id: getID(),
     title: 'Waffles',
-    favorite: true
+    favorite: true,
+    description: 'Tasty and belgian'
+
   }, {
     id: getID(),
     title: 'Omelets',
-    favorite: false
+    favorite: false,
+    description: 'Easy egg work'
   }]
 }
 

From 510066ca890af959fb8e74c03ced769c332d1e58 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Mon, 3 Dec 2018 15:28:31 +0200
Subject: [PATCH 18/25] add Routes and Recipe Details

---
 package.json                            |  1 +
 src/components/Recipes/AddRecipe.js     |  4 ++--
 src/components/Recipes/Recipe.js        | 17 +++++---------
 src/components/Recipes/RecipeDetails.js | 31 +++++++++++++++++++++++++
 src/components/Recipes/Recipes.js       |  8 ++++---
 src/components/Recipes/RecipesView.js   | 12 ++++++++--
 src/components/app/App.css              | 12 ++++++++--
 src/components/app/App.js               |  5 +++-
 src/index.js                            |  5 +++-
 9 files changed, 73 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Recipes/RecipeDetails.js

diff --git a/package.json b/package.json
index 9042e2e..e3fcde8 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-redux": "^5.1.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "redux": "^4.0.1"
   },
diff --git a/src/components/Recipes/AddRecipe.js b/src/components/Recipes/AddRecipe.js
index 8edc34e..7e5b212 100644
--- a/src/components/Recipes/AddRecipe.js
+++ b/src/components/Recipes/AddRecipe.js
@@ -2,12 +2,12 @@ import React, {Component} from "react";
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {addRecipe} from '../../actions/recipes';
+import { withRouter } from 'react-router-dom';
 
 class AddRecipe extends Component {
 
   onSubmit(e) {
     e.preventDefault();
-    debugger;
     this.props.addRecipe({title: this.title.value, description: this.description.value});
     this.title.value = '';
     this.description.value = '';
@@ -35,4 +35,4 @@ AddRecipe.propTypes = {
 };
 
 
-export default connect(null, {addRecipe})(AddRecipe)
+export default withRouter(connect(null, {addRecipe})(AddRecipe));
diff --git a/src/components/Recipes/Recipe.js b/src/components/Recipes/Recipe.js
index 1a96a08..b46fdf1 100644
--- a/src/components/Recipes/Recipe.js
+++ b/src/components/Recipes/Recipe.js
@@ -1,18 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { NavLink } from 'react-router-dom';
 
-export const Recipe = ({recipe, toggle}) => (
-    <li className={classNames(
-        {
-          recipe: true,
-          favorite: recipe.favorite
-        })}
-        onClick={() => toggle(recipe)}
-    >{recipe.title}</li>
+export const Recipe = ({recipe}) => (
+    <NavLink to={ `/recipe/${ recipe.id }` } className='recipe' activeClassName='current'>
+      {recipe.title}
+    </NavLink>
 );
 
 Recipe.propTypes = {
-  recipe: PropTypes.object.isRequired,
-  toggle: PropTypes.func.isRequired
+  recipe: PropTypes.object.isRequired
 };
diff --git a/src/components/Recipes/RecipeDetails.js b/src/components/Recipes/RecipeDetails.js
new file mode 100644
index 0000000..49f69d6
--- /dev/null
+++ b/src/components/Recipes/RecipeDetails.js
@@ -0,0 +1,31 @@
+import React  from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+const RecipeDetails = ({ recipe }) => (
+    <div>
+      <h3>{ recipe.title }</h3>
+      <p>{ recipe.description }</p>
+    </div>
+);
+
+const RecipeDetailsWrapper = ({ recipe }) =>
+    recipe
+        ? <RecipeDetails recipe={ recipe }/>
+        : <h3>Not found</h3>;
+
+
+RecipeDetails.propTypes = {
+  recipe: PropTypes.object.isRequired
+};
+
+const mapStateToProps = (state, ownProps) => {
+  const id = parseInt(ownProps.match.params.id, 10);
+
+  return {
+    recipe: state.recipes.find(recipe => recipe.id === id)
+  };
+};
+
+
+export default connect(mapStateToProps)(RecipeDetailsWrapper);
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index c708a4c..20b2ed7 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -3,13 +3,15 @@ import {Recipe} from "./Recipe";
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {toggleRecipe as toggle} from '../../actions/recipes';
+import {Link, withRouter} from 'react-router-dom';
 
 const Recipes = (props) => (
-    <ul className="recipes">
+    <div className="recipes">
       {props.recipes.map(recipe => <Recipe key={recipe.id}
                                            recipe={recipe}
                                            toggle={props.toggle}/>)}
-    </ul>
+      <Link to="/add">Add Recipe</Link>
+    </div>
 );
 
 Recipes.propTypes = {
@@ -23,4 +25,4 @@ const mapStateToProps = (state) => {
   }
 };
 
-export default connect(mapStateToProps, {toggle})(Recipes);
\ No newline at end of file
+export default withRouter(connect(mapStateToProps, {toggle})(Recipes));
\ No newline at end of file
diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
index 354b9b4..c6d5735 100644
--- a/src/components/Recipes/RecipesView.js
+++ b/src/components/Recipes/RecipesView.js
@@ -1,6 +1,8 @@
 import React, {Component} from 'react';
 import Recipes from './Recipes';
 import AddRecipe from './AddRecipe';
+import {Route, Switch} from 'react-router-dom';
+import RecipeDetails from "./RecipeDetails";
 
 /**
  * add actions to the components and constants
@@ -11,14 +13,20 @@ class RecipesView extends Component {
   render() {
     return (
         <div>
-          <h3>Recipes:</h3>
           <div className="recipes-view">
+
             <div className="middle-grid">
               <Recipes/>
             </div>
+
             <div className="left-grid">
-              <AddRecipe/>
+              <Switch>
+                <Route exact path="/" render={() => <h3>Welcome</h3>}/>
+                <Route exact path="/add" component={AddRecipe}/>
+                <Route exact path="/recipe/:id" component={RecipeDetails}/>
+              </Switch>
             </div>
+
           </div>
         </div>
     )
diff --git a/src/components/app/App.css b/src/components/app/App.css
index 4ddc90d..caa7acb 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -7,17 +7,25 @@
   height: 40vmin;
 }
 .recipes {
-  list-style: none;
   max-width: 500px;
   margin: 20px auto;
 }
 .recipe {
   padding: 20px;
-  border: 1px solid #beb2b2;
+  border: 5px solid orange;
   border-radius: 4px;
   margin-bottom: 5px;
+  display: block;
 }
 
+.recipe.current {
+  font-weight: bold;
+  color: black;
+  display: block;
+  border-color: black;
+}
+
+
 
 .App-header {
   background-color: #282c34;
diff --git a/src/components/app/App.js b/src/components/app/App.js
index a08f777..15fab3d 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,10 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * Adding description
+ * Adding Router in the RecipeView and to the app.js
+ * Changing the list structure from list to NavLink in recipe.js
+ * Adding RecipeDetails for Recipe
+ * And styling
  *
  * @param props
  * @returns {*}
diff --git a/src/index.js b/src/index.js
index dd42ff1..1266cc1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,10 +5,13 @@ import App from './components/app/App';
 import * as serviceWorker from './serviceWorker';
 import store from "./store";
 import {Provider} from 'react-redux';
+import {BrowserRouter as Router} from 'react-router-dom';
 
 ReactDOM.render(
     <Provider store={store}>
-      <App/>
+      <Router>
+        <App/>
+      </Router>
     </Provider>,
     document.getElementById('root'));
 

From 1e9360aace44c1f59427e5b1cfee9ecf5e87e673 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Mon, 3 Dec 2018 16:38:32 +0200
Subject: [PATCH 19/25] reducers

---
 src/actions/recipes.js              |  1 +
 src/components/Recipes/AddRecipe.js |  7 +++-
 src/components/app/App.js           |  5 +--
 src/reducers/recipes.js             | 41 ++++++++++++++++++++
 src/root.js                         |  6 +++
 src/store.js                        | 60 ++---------------------------
 6 files changed, 57 insertions(+), 63 deletions(-)
 create mode 100644 src/reducers/recipes.js
 create mode 100644 src/root.js

diff --git a/src/actions/recipes.js b/src/actions/recipes.js
index d8687fc..796fd91 100644
--- a/src/actions/recipes.js
+++ b/src/actions/recipes.js
@@ -4,6 +4,7 @@ export const addRecipe = (recipe) => ({
   type: consts.ADD_RECIPE,
   title: recipe.title,
   description: recipe.description,
+  id:recipe.id
 });
 
 export const toggleRecipe = (recipe) => ({
diff --git a/src/components/Recipes/AddRecipe.js b/src/components/Recipes/AddRecipe.js
index 7e5b212..c716f0e 100644
--- a/src/components/Recipes/AddRecipe.js
+++ b/src/components/Recipes/AddRecipe.js
@@ -2,13 +2,16 @@ import React, {Component} from "react";
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {addRecipe} from '../../actions/recipes';
-import { withRouter } from 'react-router-dom';
+import {withRouter} from 'react-router-dom';
+import {getID} from "../../services/utils";
 
 class AddRecipe extends Component {
 
   onSubmit(e) {
     e.preventDefault();
-    this.props.addRecipe({title: this.title.value, description: this.description.value});
+
+    const id = getID();
+    this.props.addRecipe({id, title: this.title.value, description: this.description.value});
     this.title.value = '';
     this.description.value = '';
   }
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 15fab3d..58066d2 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,10 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * Adding Router in the RecipeView and to the app.js
- * Changing the list structure from list to NavLink in recipe.js
- * Adding RecipeDetails for Recipe
- * And styling
+ * combineReducers set initial state in recipes reducer creating root file and clean store file
  *
  * @param props
  * @returns {*}
diff --git a/src/reducers/recipes.js b/src/reducers/recipes.js
new file mode 100644
index 0000000..6be6070
--- /dev/null
+++ b/src/reducers/recipes.js
@@ -0,0 +1,41 @@
+import * as consts from "../constants/actions-types";
+import {getID} from "../services/utils";
+
+const initialState =  [{
+    id: getID(),
+    title: 'Waffles',
+    favorite: true,
+    description: 'Tasty and belgian'
+
+  }, {
+    id: getID(),
+    title: 'Omelets',
+    favorite: false,
+    description: 'Easy egg work'
+  }];
+
+const reducer = (recipes = initialState, action) => {
+  console.log(`Got Action ${action.type}`);
+
+  switch (action.type) {
+    case consts.ADD_RECIPE:
+      const newRecipe = {
+        id: action.id,
+        title: action.title,
+        description: action.description,
+        favorite: false
+      };
+      return recipes.concat(newRecipe);
+
+
+    case consts.TOGGLE_RECIPE:
+      return recipes.map(recipe => recipe.id !== action.id
+          ? recipe
+          : Object.assign({}, recipe, {favorite: !recipe.favorite}));
+
+    default:
+      return recipes;
+  }
+};
+
+export default reducer;
\ No newline at end of file
diff --git a/src/root.js b/src/root.js
new file mode 100644
index 0000000..252bbae
--- /dev/null
+++ b/src/root.js
@@ -0,0 +1,6 @@
+import {combineReducers} from "redux";
+import recipes from './reducers/recipes';
+
+export default combineReducers({
+  recipes
+});
diff --git a/src/store.js b/src/store.js
index a8452a9..b2c91b0 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,62 +1,8 @@
-import {getID} from "./services/utils";
-import {createStore} from 'redux';
-import * as consts from './constants/actions-types';
+import reducer from './root'
+import { createStore } from 'redux';
 
 
-/**
- * Adding reducer to handle the actions
- * Creating initialState
- * and Create store and adding it to the window object
- * @param state
- * @param action
- * @returns {*}
- */
-
-const reducer = (state, action) => {
-  console.log(`Got Action ${action.type}`);
-
-  switch (action.type) {
-    case consts.ADD_RECIPE:
-      const newRecipe = {
-        id: getID(),
-        title: action.title,
-        description: action.description,
-        favorite: false
-      };
-      const newRecipes = state.recipes.concat(newRecipe);
-      return Object.assign({}, state, {
-        recipes: newRecipes
-      });
-
-    case consts.TOGGLE_RECIPE:
-      const updatedRecipes = state.recipes.map(recipe => recipe.id !== action.id
-          ? recipe
-          : Object.assign({}, recipe, {favorite: !recipe.favorite}));
-
-      return Object.assign({}, state, {
-        recipes: updatedRecipes
-      });
-    default:
-      return state;
-  }
-};
-
-const initialState = {
-  recipes: [{
-    id: getID(),
-    title: 'Waffles',
-    favorite: true,
-    description: 'Tasty and belgian'
-
-  }, {
-    id: getID(),
-    title: 'Omelets',
-    favorite: false,
-    description: 'Easy egg work'
-  }]
-}
-
-const store = createStore(reducer, initialState);
+const store = createStore(reducer);
 
 window.store = store;
 

From 375dfa071518a38b1a18514615f59273d6aee1c8 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Mon, 3 Dec 2018 17:06:04 +0200
Subject: [PATCH 20/25] user

---
 src/components/app/App.js       |  2 +-
 src/components/header/Header.js |  7 ++++---
 src/components/user/User.js     | 17 +++++++++++++++++
 src/constants/actions-types.js  |  3 ++-
 src/reducers/user.js            | 19 +++++++++++++++++++
 src/root.js                     |  4 +++-
 6 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 src/components/user/User.js
 create mode 100644 src/reducers/user.js

diff --git a/src/components/app/App.js b/src/components/app/App.js
index 58066d2..d6fb8f5 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * combineReducers set initial state in recipes reducer creating root file and clean store file
+ * Multiple reducer (add user)
  *
  * @param props
  * @returns {*}
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 18ebf7f..9ff1247 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import './Header.css';
+import User from "../user/User";
 
- const Header = () => (
+const Header = () => (
     <header className="basic-header">
-      Welcome Friends
+      Welcome <User />
     </header>
 );
 
-export default Header
\ No newline at end of file
+export default Header;
\ No newline at end of file
diff --git a/src/components/user/User.js b/src/components/user/User.js
new file mode 100644
index 0000000..f2785e2
--- /dev/null
+++ b/src/components/user/User.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from "react-redux";
+
+const User = ({user}) => (
+    <span>{user.name}</span>
+)
+
+User.propTypes = {
+  user: PropTypes.object.isRequired
+};
+
+const mapToStateProps = state => ({
+  user: state.user
+});
+
+export default connect(mapToStateProps)(User);
\ No newline at end of file
diff --git a/src/constants/actions-types.js b/src/constants/actions-types.js
index 74d32d8..951eea7 100644
--- a/src/constants/actions-types.js
+++ b/src/constants/actions-types.js
@@ -1,2 +1,3 @@
 export const ADD_RECIPE = 'ADD_RECIPE';
-export const TOGGLE_RECIPE = 'TOGGLE_RECIPE';
\ No newline at end of file
+export const TOGGLE_RECIPE = 'TOGGLE_RECIPE';
+export const SET_USER = 'SET_USER';
\ No newline at end of file
diff --git a/src/reducers/user.js b/src/reducers/user.js
new file mode 100644
index 0000000..c160c49
--- /dev/null
+++ b/src/reducers/user.js
@@ -0,0 +1,19 @@
+import * as consts from '../constants/actions-types';
+
+const initalState = {
+  name: 'Idan Naim'
+}
+
+
+const reducer = (user = initalState, action) => {
+  switch (action.type) {
+    case consts.SET_USER:
+      return Object.assign({}, user, {
+        name: action.name
+      });
+    default:
+      return user;
+  }
+};
+
+export default reducer;
\ No newline at end of file
diff --git a/src/root.js b/src/root.js
index 252bbae..f978c4d 100644
--- a/src/root.js
+++ b/src/root.js
@@ -1,6 +1,8 @@
 import {combineReducers} from "redux";
 import recipes from './reducers/recipes';
+import user from './reducers/user';
 
 export default combineReducers({
-  recipes
+  recipes,
+  user
 });

From 563dcd2162a44aa7c1fa33d5ab81d0c9acd904aa Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Mon, 3 Dec 2018 17:58:10 +0200
Subject: [PATCH 21/25] change user

---
 src/actions/user.js                      |  6 ++++
 src/components/Recipes/Recipes.js        |  3 ++
 src/components/Recipes/RecipesView.js    |  4 ++-
 src/components/app/App.css               |  5 ++-
 src/components/app/App.js                |  2 +-
 src/components/change-user/ChangeUser.js | 39 ++++++++++++++++++++++++
 src/reducers/user.js                     |  1 +
 7 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/actions/user.js
 create mode 100644 src/components/change-user/ChangeUser.js

diff --git a/src/actions/user.js b/src/actions/user.js
new file mode 100644
index 0000000..fa6544a
--- /dev/null
+++ b/src/actions/user.js
@@ -0,0 +1,6 @@
+import {SET_USER} from '../constants/actions-types'
+
+export const changeUser = (name) => ({
+      type: SET_USER,
+      name
+    });
\ No newline at end of file
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index 20b2ed7..94a925f 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -10,7 +10,10 @@ const Recipes = (props) => (
       {props.recipes.map(recipe => <Recipe key={recipe.id}
                                            recipe={recipe}
                                            toggle={props.toggle}/>)}
+      <div className="actions">
       <Link to="/add">Add Recipe</Link>
+      <Link to="/changeUser">Change user name</Link>
+         </div>
     </div>
 );
 
diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
index c6d5735..606d8cc 100644
--- a/src/components/Recipes/RecipesView.js
+++ b/src/components/Recipes/RecipesView.js
@@ -3,6 +3,7 @@ import Recipes from './Recipes';
 import AddRecipe from './AddRecipe';
 import {Route, Switch} from 'react-router-dom';
 import RecipeDetails from "./RecipeDetails";
+import ChangeUser from "../change-user/ChangeUser";
 
 /**
  * add actions to the components and constants
@@ -21,9 +22,10 @@ class RecipesView extends Component {
 
             <div className="left-grid">
               <Switch>
-                <Route exact path="/" render={() => <h3>Welcome</h3>}/>
+                <Route exact path="/" render={() => <h3>Welcome To Recipes</h3>}/>
                 <Route exact path="/add" component={AddRecipe}/>
                 <Route exact path="/recipe/:id" component={RecipeDetails}/>
+                <Route exact path="/changeUser" component={ChangeUser}/>
               </Switch>
             </div>
 
diff --git a/src/components/app/App.css b/src/components/app/App.css
index caa7acb..c78f196 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -25,7 +25,10 @@
   border-color: black;
 }
 
-
+.actions {
+    display: flex;
+    justify-content: space-between;
+}
 
 .App-header {
   background-color: #282c34;
diff --git a/src/components/app/App.js b/src/components/app/App.js
index d6fb8f5..07fde80 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * Multiple reducer (add user)
+ * change user name
  *
  * @param props
  * @returns {*}
diff --git a/src/components/change-user/ChangeUser.js b/src/components/change-user/ChangeUser.js
new file mode 100644
index 0000000..07a4b2e
--- /dev/null
+++ b/src/components/change-user/ChangeUser.js
@@ -0,0 +1,39 @@
+import React,{Component} from 'react';
+import PropTypes from'prop-types';
+import {connect} from "react-redux";
+import {changeUser} from "../../actions/user";
+import {withRouter} from "react-router-dom";
+
+
+
+class ChangeUser extends Component {
+
+  submit(e){
+    e.preventDefault();
+    this.props.changeUser(this.userName.value);
+    this.userName.value = '';
+    this.props.history.push(`/`);
+
+  }
+  render() {
+    return (
+        <div>
+          <form onSubmit={this.submit.bind(this)}>
+            <label>
+              Change User name:
+            </label>
+            <input ref={(e)=>this.userName = e}/>
+            <button >Change name</button>
+          </form>
+        </div>
+    );
+  }
+}
+
+ChangeUser.propTypes = {
+  changeUser: PropTypes.func.isRequired
+};
+
+
+export default withRouter(connect(null,{changeUser})(ChangeUser))
+
diff --git a/src/reducers/user.js b/src/reducers/user.js
index c160c49..54dfbff 100644
--- a/src/reducers/user.js
+++ b/src/reducers/user.js
@@ -8,6 +8,7 @@ const initalState = {
 const reducer = (user = initalState, action) => {
   switch (action.type) {
     case consts.SET_USER:
+      debugger
       return Object.assign({}, user, {
         name: action.name
       });

From 065ddc2ca0157554972548fe58f775cb574097b8 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 4 Dec 2018 10:18:46 +0200
Subject: [PATCH 22/25] add favorite and styling

---
 src/components/Recipes/RecipeDetails.js | 15 ++++---
 src/components/Recipes/Recipes.css      | 53 +++++++++++++++++++++++++
 src/components/Recipes/RecipesView.js   |  2 +-
 src/components/app/App.css              | 23 -----------
 src/components/app/App.js               |  2 +-
 src/components/footer/Footer.css        |  2 +-
 src/components/header/Header.css        |  2 +-
 src/components/toggle-box/ToggleBox.css | 17 ++++++++
 src/components/toggle-box/ToggleBox.js  | 20 ++++++++++
 src/index.css                           | 18 ---------
 10 files changed, 104 insertions(+), 50 deletions(-)
 create mode 100644 src/components/Recipes/Recipes.css
 create mode 100644 src/components/toggle-box/ToggleBox.css
 create mode 100644 src/components/toggle-box/ToggleBox.js

diff --git a/src/components/Recipes/RecipeDetails.js b/src/components/Recipes/RecipeDetails.js
index 49f69d6..58e5f04 100644
--- a/src/components/Recipes/RecipeDetails.js
+++ b/src/components/Recipes/RecipeDetails.js
@@ -1,22 +1,27 @@
 import React  from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import ToggleBox from "../toggle-box/ToggleBox";
+import {toggleRecipe} from "../../actions/recipes";
 
-const RecipeDetails = ({ recipe }) => (
+const RecipeDetails = ({ recipe, toggleRecipe }) => (
     <div>
       <h3>{ recipe.title }</h3>
       <p>{ recipe.description }</p>
+      <ToggleBox title="favorite" active={recipe.favorite} toggle={()=> toggleRecipe(recipe)} />
+
     </div>
 );
 
-const RecipeDetailsWrapper = ({ recipe }) =>
+const RecipeDetailsWrapper = ({ recipe, toggleRecipe }) =>
     recipe
-        ? <RecipeDetails recipe={ recipe }/>
+        ? <RecipeDetails recipe={ recipe } toggleRecipe={toggleRecipe}/>
         : <h3>Not found</h3>;
 
 
 RecipeDetails.propTypes = {
-  recipe: PropTypes.object.isRequired
+  recipe: PropTypes.object.isRequired,
+  toggleRecipe: PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -28,4 +33,4 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 
-export default connect(mapStateToProps)(RecipeDetailsWrapper);
+export default connect(mapStateToProps,{toggleRecipe})(RecipeDetailsWrapper);
diff --git a/src/components/Recipes/Recipes.css b/src/components/Recipes/Recipes.css
new file mode 100644
index 0000000..d31caf4
--- /dev/null
+++ b/src/components/Recipes/Recipes.css
@@ -0,0 +1,53 @@
+.recipes {
+    border: 2px solid orange;
+    padding: 20px;
+    height: 100%;
+    margin: 20px auto;
+}
+
+.recipe {
+    padding: 20px;
+    border: 5px solid orange;
+    border-radius: 4px;
+    margin-bottom: 5px;
+    display: block;
+}
+
+.recipe.current {
+    font-weight: bold;
+    color: black;
+    display: block;
+    border-color: black;
+}
+
+.actions {
+    display: flex;
+    justify-content: space-between;
+}
+.favorite {
+    font-weight: bold;
+    background: yellow;
+}
+
+.recipes-view {
+    display: flex;
+    text-align: left;
+}
+
+.recipes-view .middle-grid {
+    width: 30%;
+    margin-right: 20px;
+    margin-top: 5px;
+}
+
+
+.recipes-view .left-grid {
+    width: 40%;
+    border: 2px solid orange;
+    text-align: center;
+    box-shadow: 6px 4px 6px -2px;
+    padding: 15px;
+    height: 100%;
+    line-height: 30px;
+    margin-top: 25px;
+}
\ No newline at end of file
diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
index 606d8cc..bb2dccf 100644
--- a/src/components/Recipes/RecipesView.js
+++ b/src/components/Recipes/RecipesView.js
@@ -4,7 +4,7 @@ import AddRecipe from './AddRecipe';
 import {Route, Switch} from 'react-router-dom';
 import RecipeDetails from "./RecipeDetails";
 import ChangeUser from "../change-user/ChangeUser";
-
+import './Recipes.css';
 /**
  * add actions to the components and constants
  */
diff --git a/src/components/app/App.css b/src/components/app/App.css
index c78f196..92f956e 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -6,29 +6,6 @@
   animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
 }
-.recipes {
-  max-width: 500px;
-  margin: 20px auto;
-}
-.recipe {
-  padding: 20px;
-  border: 5px solid orange;
-  border-radius: 4px;
-  margin-bottom: 5px;
-  display: block;
-}
-
-.recipe.current {
-  font-weight: bold;
-  color: black;
-  display: block;
-  border-color: black;
-}
-
-.actions {
-    display: flex;
-    justify-content: space-between;
-}
 
 .App-header {
   background-color: #282c34;
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 07fde80..5e75e1f 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * change user name
+ * add favorite component and styling
  *
  * @param props
  * @returns {*}
diff --git a/src/components/footer/Footer.css b/src/components/footer/Footer.css
index 6cb0795..7b7f0b2 100644
--- a/src/components/footer/Footer.css
+++ b/src/components/footer/Footer.css
@@ -1,5 +1,5 @@
 .basic-footer {
-    background: #807c75;
+    background: orange;
     padding: 10px;
     color: white;
     position: fixed;
diff --git a/src/components/header/Header.css b/src/components/header/Header.css
index 2a9645a..6b84e2f 100644
--- a/src/components/header/Header.css
+++ b/src/components/header/Header.css
@@ -1,5 +1,5 @@
 .basic-header {
-    background: #807c75;
+    background: orange;
     padding: 10px;
     color: white;
 }
\ No newline at end of file
diff --git a/src/components/toggle-box/ToggleBox.css b/src/components/toggle-box/ToggleBox.css
new file mode 100644
index 0000000..73002fc
--- /dev/null
+++ b/src/components/toggle-box/ToggleBox.css
@@ -0,0 +1,17 @@
+.toggle-box {
+    border: 1px solid #d16d51;
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 4px;
+    text-transform: uppercase;
+    font-size: 8px;
+    cursor: pointer;
+}
+
+.toggle-box:hover {
+    background-color: #fdf2ef;
+}
+
+.toggle-box.active {
+    background-color: orange;
+}
\ No newline at end of file
diff --git a/src/components/toggle-box/ToggleBox.js b/src/components/toggle-box/ToggleBox.js
new file mode 100644
index 0000000..6a03432
--- /dev/null
+++ b/src/components/toggle-box/ToggleBox.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ToggleBox.css';
+import classNames from 'classnames';
+
+const ToggleBox = (props) => (
+    <div onClick={props.toggle}
+        className={classNames('toggle-box',{active: props.active})}>
+      {props.title}
+
+    </div>
+)
+
+ToggleBox.propsTypes = {
+  active: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired
+};
+
+export default ToggleBox;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 23541e3..dfbe5eb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,24 +13,6 @@ code {
     monospace;
 }
 
-.favorite {
-    font-weight: bold;
-    background: yellow;
-}
-
-.recipes-view {
-    display: flex;
-    text-align: left;
-}
-
-.recipes-view .middle-grid {
-    width: 40%;
-}
-
-.recipes-view .left-grid {
-    width: 60%;
-}
-
 .form-label {
     display: block;
 }
\ No newline at end of file

From b01992353b287b11708e97aa7ade230394f9021f Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 4 Dec 2018 11:09:52 +0200
Subject: [PATCH 23/25] middleware

---
 src/components/app/App.js | 2 +-
 src/middleware/log.js     | 6 ++++++
 src/store.js              | 7 +++++--
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 src/middleware/log.js

diff --git a/src/components/app/App.js b/src/components/app/App.js
index 5e75e1f..61fd3bf 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * add favorite component and styling
+ * Middleware
  *
  * @param props
  * @returns {*}
diff --git a/src/middleware/log.js b/src/middleware/log.js
new file mode 100644
index 0000000..c5d22e0
--- /dev/null
+++ b/src/middleware/log.js
@@ -0,0 +1,6 @@
+const log = () => next => action => {
+  console.log(`ACTION idan : ${action.type}`, action);
+  next(action);
+}
+
+export default log;
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index b2c91b0..19ff219 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,8 +1,11 @@
 import reducer from './root'
-import { createStore } from 'redux';
+import {applyMiddleware, createStore} from 'redux';
+import logMiddleware from "./middleware/log";
 
 
-const store = createStore(reducer);
+const store = createStore(reducer, applyMiddleware(
+    logMiddleware
+));
 
 window.store = store;
 

From 504b853802cb0a82ae7f1a72651134ee1b268d18 Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 4 Dec 2018 13:07:14 +0200
Subject: [PATCH 24/25] middleware

---
 src/actions/recipes.js             |  8 ++++++++
 src/components/Recipes/Recipes.css |  5 +++++
 src/components/Recipes/Recipes.js  |  8 +++++---
 src/components/app/App.js          |  2 +-
 src/constants/actions-types.js     |  4 +++-
 src/constants/envirement.js        |  1 +
 src/middleware/api.js              | 17 +++++++++++++++++
 src/reducers/recipes.js            | 27 +++++++++++++++------------
 src/store.js                       |  4 +++-
 9 files changed, 58 insertions(+), 18 deletions(-)
 create mode 100644 src/constants/envirement.js
 create mode 100644 src/middleware/api.js

diff --git a/src/actions/recipes.js b/src/actions/recipes.js
index 796fd91..8d36cba 100644
--- a/src/actions/recipes.js
+++ b/src/actions/recipes.js
@@ -12,3 +12,11 @@ export const toggleRecipe = (recipe) => ({
   id: recipe.id
 });
 
+export const fetchRecipes = ()=>({
+  type: consts.API,
+  payload: {
+    url:'recipes.json',
+    success: consts.SET_RECIPES
+  }
+
+})
diff --git a/src/components/Recipes/Recipes.css b/src/components/Recipes/Recipes.css
index d31caf4..7fb9c96 100644
--- a/src/components/Recipes/Recipes.css
+++ b/src/components/Recipes/Recipes.css
@@ -24,6 +24,11 @@
     display: flex;
     justify-content: space-between;
 }
+
+.fetch-recipes {
+    text-decoration: underline;
+    cursor: pointer;
+}
 .favorite {
     font-weight: bold;
     background: yellow;
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index 94a925f..bfecebe 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {Recipe} from "./Recipe";
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {toggleRecipe as toggle} from '../../actions/recipes';
+import {toggleRecipe as toggle, fetchRecipes} from '../../actions/recipes';
 import {Link, withRouter} from 'react-router-dom';
 
 const Recipes = (props) => (
@@ -13,13 +13,15 @@ const Recipes = (props) => (
       <div className="actions">
       <Link to="/add">Add Recipe</Link>
       <Link to="/changeUser">Change user name</Link>
+      <span onClick={props.fetchRecipes} className="fetch-recipes">fetch Recipes</span>
          </div>
     </div>
 );
 
 Recipes.propTypes = {
   recipes: PropTypes.array.isRequired,
-  toggle: PropTypes.func.isRequired
+  toggle: PropTypes.func.isRequired,
+  fetchRecipes: PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) => {
@@ -28,4 +30,4 @@ const mapStateToProps = (state) => {
   }
 };
 
-export default withRouter(connect(mapStateToProps, {toggle})(Recipes));
\ No newline at end of file
+export default withRouter(connect(mapStateToProps, {toggle, fetchRecipes})(Recipes));
\ No newline at end of file
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 61fd3bf..5e16b72 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * Middleware
+ * add api call
  *
  * @param props
  * @returns {*}
diff --git a/src/constants/actions-types.js b/src/constants/actions-types.js
index 951eea7..95fd95a 100644
--- a/src/constants/actions-types.js
+++ b/src/constants/actions-types.js
@@ -1,3 +1,5 @@
 export const ADD_RECIPE = 'ADD_RECIPE';
 export const TOGGLE_RECIPE = 'TOGGLE_RECIPE';
-export const SET_USER = 'SET_USER';
\ No newline at end of file
+export const SET_USER = 'SET_USER';
+export const SET_RECIPES = 'SET_RECIPES';
+export const API = 'API';
\ No newline at end of file
diff --git a/src/constants/envirement.js b/src/constants/envirement.js
new file mode 100644
index 0000000..f17576d
--- /dev/null
+++ b/src/constants/envirement.js
@@ -0,0 +1 @@
+export const BASE_URL = 'https://s3.amazonaws.com/500tech-shared/';
\ No newline at end of file
diff --git a/src/middleware/api.js b/src/middleware/api.js
new file mode 100644
index 0000000..21988bb
--- /dev/null
+++ b/src/middleware/api.js
@@ -0,0 +1,17 @@
+import {BASE_URL} from "../constants/envirement";
+import {API} from "../constants/actions-types";
+
+const apiMiddleware = ({dispatch}) => next => action => {
+  if (action.type !== API) {
+    return next(action);
+  }
+
+  const {url, success} = action.payload;
+
+  fetch(BASE_URL + url)
+      .then(response => response.json())
+      .then(payload => dispatch({type: success, payload}))
+      .catch(error => console.log('Error:', error));
+}
+
+export default apiMiddleware;
\ No newline at end of file
diff --git a/src/reducers/recipes.js b/src/reducers/recipes.js
index 6be6070..75a76b5 100644
--- a/src/reducers/recipes.js
+++ b/src/reducers/recipes.js
@@ -1,18 +1,18 @@
 import * as consts from "../constants/actions-types";
 import {getID} from "../services/utils";
 
-const initialState =  [{
-    id: getID(),
-    title: 'Waffles',
-    favorite: true,
-    description: 'Tasty and belgian'
-
-  }, {
-    id: getID(),
-    title: 'Omelets',
-    favorite: false,
-    description: 'Easy egg work'
-  }];
+const initialState = [{
+  id: getID(),
+  title: 'Waffles',
+  favorite: true,
+  description: 'Tasty and belgian'
+
+}, {
+  id: getID(),
+  title: 'Omelets',
+  favorite: false,
+  description: 'Easy egg work'
+}];
 
 const reducer = (recipes = initialState, action) => {
   console.log(`Got Action ${action.type}`);
@@ -33,6 +33,9 @@ const reducer = (recipes = initialState, action) => {
           ? recipe
           : Object.assign({}, recipe, {favorite: !recipe.favorite}));
 
+    case consts.SET_RECIPES:
+      return action.payload;
+
     default:
       return recipes;
   }
diff --git a/src/store.js b/src/store.js
index 19ff219..7f0b5e5 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,10 +1,12 @@
 import reducer from './root'
 import {applyMiddleware, createStore} from 'redux';
 import logMiddleware from "./middleware/log";
+import apiMiddleware from "./middleware/api";
 
 
 const store = createStore(reducer, applyMiddleware(
-    logMiddleware
+    logMiddleware,
+    apiMiddleware
 ));
 
 window.store = store;

From c7d18b17fccd88c25e815118a37ebd60d8d3de2d Mon Sep 17 00:00:00 2001
From: idannaim <idanaim@gmail.com>
Date: Tue, 4 Dec 2018 13:37:13 +0200
Subject: [PATCH 25/25] clean up

---
 src/actions/recipes.js                | 14 ++++++++------
 src/actions/user.js                   |  6 +++---
 src/components/Recipes/Recipes.js     |  2 +-
 src/components/Recipes/RecipesView.js | 28 ++++++++++++++++++++++++---
 src/components/app/App.js             |  2 +-
 src/reducers/recipes.js               | 23 +++-------------------
 src/reducers/user.js                  |  5 +----
 7 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/actions/recipes.js b/src/actions/recipes.js
index 8d36cba..13e8c96 100644
--- a/src/actions/recipes.js
+++ b/src/actions/recipes.js
@@ -2,20 +2,22 @@ import * as consts from '../constants/actions-types';
 
 export const addRecipe = (recipe) => ({
   type: consts.ADD_RECIPE,
-  title: recipe.title,
-  description: recipe.description,
-  id:recipe.id
+  payload: {
+    title: recipe.title,
+    description: recipe.description,
+    id: recipe.id
+  }
 });
 
 export const toggleRecipe = (recipe) => ({
   type: consts.TOGGLE_RECIPE,
-  id: recipe.id
+  payload: recipe.id
 });
 
-export const fetchRecipes = ()=>({
+export const fetchRecipes = () => ({
   type: consts.API,
   payload: {
-    url:'recipes.json',
+    url: 'recipes.json',
     success: consts.SET_RECIPES
   }
 
diff --git a/src/actions/user.js b/src/actions/user.js
index fa6544a..9868770 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -1,6 +1,6 @@
 import {SET_USER} from '../constants/actions-types'
 
 export const changeUser = (name) => ({
-      type: SET_USER,
-      name
-    });
\ No newline at end of file
+  type: SET_USER,
+  payload: {name}
+});
\ No newline at end of file
diff --git a/src/components/Recipes/Recipes.js b/src/components/Recipes/Recipes.js
index bfecebe..7c7ac0e 100644
--- a/src/components/Recipes/Recipes.js
+++ b/src/components/Recipes/Recipes.js
@@ -13,7 +13,7 @@ const Recipes = (props) => (
       <div className="actions">
       <Link to="/add">Add Recipe</Link>
       <Link to="/changeUser">Change user name</Link>
-      <span onClick={props.fetchRecipes} className="fetch-recipes">fetch Recipes</span>
+      <span onClick={props.fetchRecipes} className="fetch-recipes">reset Recipes</span>
          </div>
     </div>
 );
diff --git a/src/components/Recipes/RecipesView.js b/src/components/Recipes/RecipesView.js
index bb2dccf..81881cf 100644
--- a/src/components/Recipes/RecipesView.js
+++ b/src/components/Recipes/RecipesView.js
@@ -1,16 +1,26 @@
 import React, {Component} from 'react';
 import Recipes from './Recipes';
 import AddRecipe from './AddRecipe';
-import {Route, Switch} from 'react-router-dom';
+import {Route, Switch, withRouter} from 'react-router-dom';
 import RecipeDetails from "./RecipeDetails";
 import ChangeUser from "../change-user/ChangeUser";
+import {fetchRecipes} from '../../actions/recipes';
+import PropTypes from 'prop-types';
 import './Recipes.css';
+import {connect} from "react-redux";
+import User from "../user/User";
+
+
 /**
  * add actions to the components and constants
  */
 
 class RecipesView extends Component {
 
+  componentDidMount() {
+   this.refresh();
+  }
+
   render() {
     return (
         <div>
@@ -22,7 +32,7 @@ class RecipesView extends Component {
 
             <div className="left-grid">
               <Switch>
-                <Route exact path="/" render={() => <h3>Welcome To Recipes</h3>}/>
+                <Route exact path="/" render={() => <h3>Welcome <User /></h3>}/>
                 <Route exact path="/add" component={AddRecipe}/>
                 <Route exact path="/recipe/:id" component={RecipeDetails}/>
                 <Route exact path="/changeUser" component={ChangeUser}/>
@@ -33,6 +43,18 @@ class RecipesView extends Component {
         </div>
     )
   }
+
+  refresh() {
+    this.props.fetchRecipes();
+  }
+}
+
+RecipesView.propTypes = {
+  fetchRecipes: PropTypes.func.isRequired
 }
 
-export default RecipesView;
\ No newline at end of file
+const mapStateToProps = (state) => {
+  return {
+  }
+};
+export default withRouter(connect(mapStateToProps, {fetchRecipes})(RecipesView));
diff --git a/src/components/app/App.js b/src/components/app/App.js
index 5e16b72..0dce50c 100644
--- a/src/components/app/App.js
+++ b/src/components/app/App.js
@@ -6,7 +6,7 @@ import {Footer} from "../footer/Footer";
 
 
 /**Connection with redux:
- * add api call
+ * clean up and fetch recipes
  *
  * @param props
  * @returns {*}
diff --git a/src/reducers/recipes.js b/src/reducers/recipes.js
index 75a76b5..64a671f 100644
--- a/src/reducers/recipes.js
+++ b/src/reducers/recipes.js
@@ -1,35 +1,18 @@
 import * as consts from "../constants/actions-types";
-import {getID} from "../services/utils";
 
-const initialState = [{
-  id: getID(),
-  title: 'Waffles',
-  favorite: true,
-  description: 'Tasty and belgian'
-
-}, {
-  id: getID(),
-  title: 'Omelets',
-  favorite: false,
-  description: 'Easy egg work'
-}];
+const initialState = [];
 
 const reducer = (recipes = initialState, action) => {
   console.log(`Got Action ${action.type}`);
 
   switch (action.type) {
     case consts.ADD_RECIPE:
-      const newRecipe = {
-        id: action.id,
-        title: action.title,
-        description: action.description,
-        favorite: false
-      };
+      const newRecipe = Object.assign({},action.payload,{favorite:false});
       return recipes.concat(newRecipe);
 
 
     case consts.TOGGLE_RECIPE:
-      return recipes.map(recipe => recipe.id !== action.id
+      return recipes.map(recipe => recipe.id !== action.payload
           ? recipe
           : Object.assign({}, recipe, {favorite: !recipe.favorite}));
 
diff --git a/src/reducers/user.js b/src/reducers/user.js
index 54dfbff..cada15e 100644
--- a/src/reducers/user.js
+++ b/src/reducers/user.js
@@ -8,10 +8,7 @@ const initalState = {
 const reducer = (user = initalState, action) => {
   switch (action.type) {
     case consts.SET_USER:
-      debugger
-      return Object.assign({}, user, {
-        name: action.name
-      });
+      return Object.assign({}, user,  action.payload);
     default:
       return user;
   }