Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .idea/encodings.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/misc.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 6 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
28 changes: 0 additions & 28 deletions src/App.js

This file was deleted.

24 changes: 24 additions & 0 deletions src/actions/recipes.js
Original file line number Diff line number Diff line change
@@ -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
}

})
6 changes: 6 additions & 0 deletions src/actions/user.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {SET_USER} from '../constants/actions-types'

export const changeUser = (name) => ({
type: SET_USER,
payload: {name}
});
41 changes: 41 additions & 0 deletions src/components/Recipes/AddRecipe.js
Original file line number Diff line number Diff line change
@@ -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));
13 changes: 13 additions & 0 deletions src/components/Recipes/Recipe.js
Original file line number Diff line number Diff line change
@@ -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
};
36 changes: 36 additions & 0 deletions src/components/Recipes/RecipeDetails.js
Original file line number Diff line number Diff line change
@@ -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);
58 changes: 58 additions & 0 deletions src/components/Recipes/Recipes.css
Original file line number Diff line number Diff line change
@@ -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;
}
33 changes: 33 additions & 0 deletions src/components/Recipes/Recipes.js
Original file line number Diff line number Diff line change
@@ -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));
60 changes: 60 additions & 0 deletions src/components/Recipes/RecipesView.js
Original file line number Diff line number Diff line change
@@ -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));
File renamed without changes.
29 changes: 29 additions & 0 deletions src/components/app/App.js
Original file line number Diff line number Diff line change
@@ -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;
File renamed without changes.
Loading