Added static data to MealPlanner

Related to #8
GroceriStar · Jun 28, 2018 · fb7764b · fb7764b
1 parent 27bfcc6
commit fb7764b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 deletions.
diff --git 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 {
                         <div>
                         <Col xs='3'>
                           <Card style={cardWidth}  key={index}>
+                          <Card style={cardSize}  key={index}>
                             <CardImg key={index} top width="100%" style={cardHeight} src={this.state.images[index]} alt="This image is not supported" />
                             <CardBody key={index}>
                               <CardTitle>{meal}</CardTitle>
@@ -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}  />
             <div style={topMargin}>
+            <div>{this.state.showAddMealMessage ? <h3>Meal was added</h3> : null}</div>
             <ul>
                 {this.renderMeals()}
             </ul>

diff --git 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 }
+export { cardSize, cardHeight, topMargin }
diff --git 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 → src/data/Data_WorkSceh.js b/src/data/Data.js → src/data/Data_WorkSceh.js
diff --git a/src/data/Images_url.js 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 }