diff --git a/src/component/MealPlanner/MealPlan.js b/src/component/MealPlanner/MealPlan.js index aae8991..f4086d6 100644 --- a/src/component/MealPlanner/MealPlan.js +++ b/src/component/MealPlanner/MealPlan.js @@ -1,7 +1,9 @@ import React, { Component } from 'react'; import { AddMeal } from '../Modals/AddMealModal'; import { Container, Row, Col, Card, CardImg, CardText, CardBody, CardTitle, } from 'reactstrap'; -import { cardWidth, cardHeight, topMargin } from './MealPlanStyle' +import { cardSize, cardHeight, topMargin } from './MealPlanStyle' +import { img_url } from '../../data/Images_url' + class MealPlan extends Component { constructor(props) { super(props); @@ -13,7 +15,8 @@ class MealPlan extends Component { description: '', descriptions: [], step: '', - steps: [] + steps: [], + showAddMealMessage: false }; this.renderMeals = this.renderMeals.bind(this); this.handleClick = this.handleClick.bind(this); @@ -34,6 +37,7 @@ class MealPlan extends Component {
+ {meal} @@ -77,13 +81,28 @@ class MealPlan extends Component { handleClick() { this.setState({ - meals: [...this.state.meals, this.state.meal], - images: [...this.state.images, this.state.imgURL], - descriptions: [...this.state.descriptions, this.state.description], - steps: [...this.state.steps, this.state.step] + meals : [...this.state.meals, this.state.meal], + images : [...this.state.images, this.state.imgURL], + descriptions : [...this.state.descriptions, this.state.description], + steps : [...this.state.steps, this.state.step] }); } + componentWillMount() { + this.setState({ + meals : ['Burger', 'Pizza'], + images : img_url, + descriptions : ['Burgers are eaten all over the world, and are one of the most handy and easy to make recipy', 'Pizza is a mouth watering dish'] + }) + } + + componentDidUpdate(prevProps, prevState) { + if (prevState.meals.length < this.state.meals.length) { + this.setState({showAddMealMessage: true}); + setTimeout(() => this.setState({showAddMealMessage: false}), 2000); + } + } + @@ -99,6 +118,7 @@ class MealPlan extends Component { changeHandle={this.changeHandle} handleClick={this.handleClick} />
+
{this.state.showAddMealMessage ?

Meal was added

: null}
    {this.renderMeals()}
diff --git a/src/component/MealPlanner/MealPlanStyle.js b/src/component/MealPlanner/MealPlanStyle.js index 32547ca..34bd23f 100644 --- a/src/component/MealPlanner/MealPlanStyle.js +++ b/src/component/MealPlanner/MealPlanStyle.js @@ -1,5 +1,6 @@ -let cardWidth = { - width: '300px' +let cardSize = { + width: '300px', + height: '400px' } let cardHeight = { @@ -11,4 +12,4 @@ let topMargin = { } -export { cardWidth, cardHeight, topMargin } \ No newline at end of file +export { cardSize, cardHeight, topMargin } \ No newline at end of file diff --git a/src/component/WorkSchedule/DayModel.js b/src/component/WorkSchedule/DayModel.js index 5244301..2872b48 100644 --- a/src/component/WorkSchedule/DayModel.js +++ b/src/component/WorkSchedule/DayModel.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { data } from '../../data/Data'; +import { data } from '../../data/Data_WorkSceh'; import { Modals } from '../Modals/ModalWork'; import { ListGroupItem, ListGroup } from 'reactstrap'; import { defaultBlockHeight, fillerBlockHeight } from '../../data/style_vars' diff --git a/src/data/Data.js b/src/data/Data_WorkSceh.js similarity index 100% rename from src/data/Data.js rename to src/data/Data_WorkSceh.js diff --git a/src/data/Images_url.js b/src/data/Images_url.js new file mode 100644 index 0000000..3e69321 --- /dev/null +++ b/src/data/Images_url.js @@ -0,0 +1,6 @@ +let img_url = [ + 'https://dmi4pvc5gbhhd.cloudfront.net/2016/08/easy-black-bean-burger-4-650x433.jpg', + 'https://recipes.timesofindia.com/photo/53110049.cms' +] + +export { img_url } \ No newline at end of file