(Youtube)Amazon Clone Project(Day3)

금일 진행 사항

[Part9]The Orders History Page

 

- Set up Cloud Firestore(Real Time Database)

- Make Read and Create functions for Orders History

- Deploy functions(Back-end) and hosting(Front-end) by firebase

---

Make Read and Create functions for Orders History

Orders.js

import React, { useState, useEffect } from 'react'
import './Orders.css'
import { db } from './firebase'
import { useStateValue } from './StateProvider'
import Order from './Order'

function Orders() {
  const [{basket, user}, dispatch] = useStateValue();
  const [orders, setOrders] = useState([])

  useEffect(() => {
    if(user) {
      db
      .collection('users')
      .doc(user?.uid)
      .collection('orders')
      .orderBy('created', 'desc')
      .onSnapshot (snapshot => {
        setOrders(snapshot.docs.map(doc => ({
          id: doc.id,
          data: doc.data()
        })))
      })
    } else {
      setOrders([]);
    }
  }, [])

  return (
    <div className="orders">
      <h1>Your orders</h1>
      <div className="orders__order">
        {orders?.map(order => (
          <Order order={order}></Order>
        ))}
      </div>
    </div>
  )
}

export default Orders

Order.js

import React from 'react'
import './Order.css'
import moment from 'moment'
import CheckoutProduct from './CheckoutProduct'
import CurrencyFormat from 'react-currency-format';

function Order({order}) {
  // console.log(order)
  return (
    <div className="order">
      <h2>Order</h2>
      <p>{moment.unix(order.data.created).format('MMMM Do YYYY, h:mma')}</p>
      <p className="order__id">
        <small>{order.id}</small>
      </p>
      {order.data.basket?.map(item => (
        <CheckoutProduct
          id = {item.id}
          title = {item.title}
          image = {item.image}
          price = {item.price}
          rating = {item.rating}
          hideButton
        />
      ))}
        <CurrencyFormat
          renderText={(value) => (
            <h3 className="order__total">
              Order Total: {value}
            </h3>
          )}
          decimalScale={2}
          value={order.data.amount / 100}
          displayType={"text"}
          thousandSeparator={true}
          prefix={"$"}
        />
    </div>
  )
}

export default Order

moment

<p>{moment.unix(order.data.created).format('MMMM Do YYYY, h:mma')}</p>

유닉스 시간(영어: Unix time)은 시각을 나타내는 방식이다. POSIX 시간이나 Epoch 시간이라고 부르기도 한다. 1970년 1월 1일 00:00:00 협정 세계시(UTC) 부터의 경과 시간을 초로 환산하여 정수로 나타낸 것이다.

 

For more detail: momentjs.com/

Moment.js | Home

---

Deploy functions(Back-end) and hosting(Front-end) by firebase

 

In functions(back-side)

firebase deploy --only functions

In amazon-clone(front-side) (after build)

firebase deploy --only hosting

 

*Authorizing Access to Cloud Functions via IAM

: cloud.google.com/functions/docs/securing/managing-access-iam?&_ga=2.211049555.-773355073.1569955356#enabling_access_to_a_function