Step 19

package.json

@@ -3,9 +3,14 @@
   "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",
-    "react-scripts": "2.1.1"
+    "react-redux": "^5.1.1",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "2.1.1",
+    "redux": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/recipes.js

@@ -0,0 +1,24 @@
+import * as consts from '../constants/actions-types';
+
+export const addRecipe = (recipe) => ({
+  type: consts.ADD_RECIPE,
+  payload: {
+    title: recipe.title,
+    description: recipe.description,
+    id: recipe.id
+  }
+});
+
+export const toggleRecipe = (recipe) => ({
+  type: consts.TOGGLE_RECIPE,
+  payload: recipe.id
+});
+
+export const fetchRecipes = () => ({
+  type: consts.API,
+  payload: {
+    url: 'recipes.json',
+    success: consts.SET_RECIPES
+  }
+
+})

src/actions/user.js

@@ -0,0 +1,6 @@
+import {SET_USER} from '../constants/actions-types'
+
+export const changeUser = (name) => ({
+  type: SET_USER,
+  payload: {name}
+});

src/components/Recipes/AddRecipe.js

@@ -0,0 +1,41 @@
+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 {getID} from "../../services/utils";
+
+class AddRecipe extends Component {
+
+  onSubmit(e) {
+    e.preventDefault();
+
+    const id = getID();
+    this.props.addRecipe({id, title: this.title.value, description: this.description.value});
+    this.title.value = '';
+    this.description.value = '';
+  }
+
+  render() {
+    return (
+        <form onSubmit={this.onSubmit.bind(this)}>
+          <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>
+
+    )
+  }
+}
+
+AddRecipe.propTypes = {
+  addRecipe: PropTypes.func.isRequired
+};
+
+
+export default withRouter(connect(null, {addRecipe})(AddRecipe));

src/components/Recipes/Recipe.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+
+export const Recipe = ({recipe}) => (
+    <NavLink to={ `/recipe/${ recipe.id }` } className='recipe' activeClassName='current'>
+      {recipe.title}
+    </NavLink>
+);
+
+Recipe.propTypes = {
+  recipe: PropTypes.object.isRequired
+};

src/components/Recipes/RecipeDetails.js

@@ -0,0 +1,36 @@
+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, toggleRecipe }) => (
+    <div>
+      <h3>{ recipe.title }</h3>
+      <p>{ recipe.description }</p>
+      <ToggleBox title="favorite" active={recipe.favorite} toggle={()=> toggleRecipe(recipe)} />
+
+    </div>
+);
+
+const RecipeDetailsWrapper = ({ recipe, toggleRecipe }) =>
+    recipe
+        ? <RecipeDetails recipe={ recipe } toggleRecipe={toggleRecipe}/>
+        : <h3>Not found</h3>;
+
+
+RecipeDetails.propTypes = {
+  recipe: PropTypes.object.isRequired,
+  toggleRecipe: PropTypes.func.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,{toggleRecipe})(RecipeDetailsWrapper);

src/components/Recipes/Recipes.css

@@ -0,0 +1,58 @@
+.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;
+}
+
+.fetch-recipes {
+    text-decoration: underline;
+    cursor: pointer;
+}
+.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;
+}

src/components/Recipes/Recipes.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Recipe} from "./Recipe";
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {toggleRecipe as toggle, fetchRecipes} from '../../actions/recipes';
+import {Link, withRouter} from 'react-router-dom';
+
+const Recipes = (props) => (
+    <div className="recipes">
+      {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>
+      <span onClick={props.fetchRecipes} className="fetch-recipes">reset Recipes</span>
+         </div>
+    </div>
+);
+
+Recipes.propTypes = {
+  recipes: PropTypes.array.isRequired,
+  toggle: PropTypes.func.isRequired,
+  fetchRecipes: PropTypes.func.isRequired
+};
+
+const mapStateToProps = (state) => {
+  return {
+    recipes: state.recipes
+  }
+};
+
+export default withRouter(connect(mapStateToProps, {toggle, fetchRecipes})(Recipes));

src/components/Recipes/RecipesView.js

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import Recipes from './Recipes';
+import AddRecipe from './AddRecipe';
+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>
+          <div className="recipes-view">
+
+            <div className="middle-grid">
+              <Recipes/>
+            </div>
+
+            <div className="left-grid">
+              <Switch>
+                <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}/>
+              </Switch>
+            </div>
+
+          </div>
+        </div>
+    )
+  }
+
+  refresh() {
+    this.props.fetchRecipes();
+  }
+}
+
+RecipesView.propTypes = {
+  fetchRecipes: PropTypes.func.isRequired
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+};
+export default withRouter(connect(mapStateToProps, {fetchRecipes})(RecipesView));

src/components/app/App.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import './App.css';
+import RecipesView from "../Recipes/RecipesView";
+import Header from "../header/Header";
+import {Footer} from "../footer/Footer";
+
+
+/**Connection with redux:
+ * clean up and fetch recipes
+ *
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+
+class App extends Component {
+  render() {
+    return (
+        <div className="App">
+          <Header/>
+          <RecipesView/>
+          <Footer/>
+        </div>
+    );
+  }
+
+}
+
+export default App;