상단 네 번째 탭의 MY SALLAB을 클릭하면 내 주문 확인 화면으로 넘어간다. 주문화면에서는 내가 주문한 메뉴, 가격, 주문 상태, 주문 날짜를 확인한다. 실제 유저별 주문을 보여주진 않고 같은 데이터를 보여주는 기능만 구현하였다. 코드는 메뉴 화면과 거의 유사하다. Style은 material-ui의 withStyle을 이용하여 설정하였고 이미지와 데이터는 Firebase에서 받아온다. 주문 데이터는 Order component을 만들어서 반복된 형태의 데이터를 보여주도록 했다.
My.js
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Order from './Order';
import myFireBase from '../../config/MyFireBase'
// Storage and Database from firebase
const storageRef = (new myFireBase).storageRef;
const databaseRef = (new myFireBase).databaseRef;
const styles = () => ({
myTopBackground: {
zIndex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
width: '100%',
height: '12rem',
position: 'absolute'
},
myTop: {
height: '12em',
width: '100%',
position: 'relative',
},
myTopText: {
zIndex: 2,
position: 'absolute',
bottom: '3rem',
left: '3rem',
fontSize: "2rem",
fontWeight: 'bold',
color: 'white',
},
myTopImg: {
height: '12em',
width: '100%',
objectFit: 'cover',
position: 'relative'
},
myOrder:{
marginLeft: '20%',
marginRight: '20%',
'@media (max-width:960px)': {
marginLeft: '5%',
marginRight: '5%',
width: '90%',
}
}
})
class My extends Component {
constructor(props) {
super(props);
this.state = {
isLogin: false,
imgSrcMyTop:'',
orderData: {}
}
}
componentDidMount() {
this.getImage();
this.getOrderData();
}
getImage () {
storageRef.child('mytop.jpg').getDownloadURL().then((url) => {
this.setState({imgSrcMyTop:url});
});
}
// Get Data
getOrderData() {
databaseRef.child('order/').once('value').then(data=>{
this.setState({ orderData: data.val()})
})
}
render() {
// Set classes
const { classes } = this.props;
return (
<div>
<div className={classes.myTop}>
<div className={classes.myTopBackground}></div>
<img className={classes.myTopImg} src={this.state.imgSrcMyTop} alt="mytop" />
<div className={classes.myTopText}>
My Order
</div>
</div>
<div className={classes.myOrder}>
{Object.keys((this.state.orderData)).map(idx => {
const o = this.state.orderData[idx];
return (
<div className={classes.menuContent}>
<Order name={o.name} price={o.price} img={o.image} datePurchased={o.datePurchased} status={o.status} dateDelivery={o.dateDelivery}/>
</div>
)
})}
</div>
<br />
</div>
)
};
}
export default withStyles(styles)(My);
주문 화면에서는 주문 전체 데이터를 받고 반복문안에서 Order component를 이용하여 각 주문을 보여준다.
Order.js
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import myFireBase from '../../config/MyFireBase'
// Storage from firebase
const storageRef = (new myFireBase).storageRef;
const styles = () => ({
root: {
backgroundColor: 'white',
height: 'auto',
width: '100%',
color: '#494949',
marginTop: '1rem',
boxSizing: 'border-box',
overflow: 'auto',
},
img : {
height: 'auto',
width: '15%',
boxSizing: 'border-box',
marginTop : '0.8rem',
borderRadius: '0.1rem',
boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.1)',
float:'left',
'@media (max-width:960px)': {
width: '30%',
}
},
content: {
height: 'auto',
width: '85%',
paddingLeft: '1rem',
boxSizing: 'border-box',
float:'right',
'@media (max-width:960px)': {
width: '70%',
}
},
contentTop:{
height: '2.5rem',
lineHeight: '2.5rem',
width: '100%',
boxSizing: 'border-box',
display: 'inline-flex',
borderBottom: '0.1rem dotted #cccccc',
},
contentMiddle:{
height: '2rem',
lineHeight: '2rem',
width: '100%',
boxSizing: 'border-box',
display: 'inline-flex',
'@media (max-width:960px)': {
display: 'contents',
}
},
contentBottom:{
height: '2rem',
lineHeight: '2rem',
width: '100%',
boxSizing: 'border-box',
},
name : {
fontSize: '1.2rem',
},
datePurchased: {
fontSize: "1rem",
paddingRight: '1rem',
},
dateDelivery: {
fontSize: "1rem",
paddingRight: '1rem',
},
price: {
fontSize: "1rem",
paddingRight: '1rem',
},
status: {
fontSize: "1rem",
},
})
class Order extends Component {
constructor(props) {
super(props);
this.state = {
imgSrcOrder: '',
imgName: ''
}
}
componentDidMount() {
this.getImage();
}
getImage() {
storageRef.child(this.props.img + '.jpg').getDownloadURL().then((url) => {
this.setState({ imgSrcOrder: url });
});
}
render() {
// Set classes
const { classes } = this.props;
// Return
return (
<div className={classes.root}>
<img className={classes.img} alt="menu" src={this.state.imgSrcOrder}/>
<div className={classes.content}>
<div className={classes.contentTop}>
<div className={classes.name}>{this.props.name}</div>
</div>
<div className={classes.contentMiddle}>
<div className={classes.price}>Price : {this.props.price}</div>
<div className={classes.datePurchased}>Date Purchased : {this.props.datePurchased}</div>
<div className={classes.dateDelivery}>Date Delivery : {this.props.dateDelivery}</div>
</div>
<div className={classes.contentBottom}>
<div className={classes.status}>{this.props.status}</div>
</div>
</div>
</div>
);
};
}
export default withStyles(styles)(Order);
다른 화면들과 크게 다른 것이 없다.
'개인 개발 프로젝트 > Lunch Box 앱' 카테고리의 다른 글
[Lunch Box] 14. 마무리 (0) | 2019.10.14 |
---|---|
[Lunch Box] 13. 로그인 화면 (0) | 2019.10.14 |
[Lunch Box] 11. 공지 상세 화면 (0) | 2019.10.13 |
[Lunch Box] 10. 공지 화면 (0) | 2019.10.13 |
[Lunch Box] 9. 메뉴 화면 (0) | 2019.10.09 |