[Lunch Box] 12. 주문 화면

상단 네 번째 탭의  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);

다른 화면들과 크게 다른 것이 없다.