hw-js-16-GraphQL-Redux-React-Navigation/src/components/Orders/DetailOrder/DetailOrder.jsx

import { useEffect } from 'react';
import { useRouteMatch } from 'react-router-dom';
import { useDispatch,useSelector } from 'react-redux';


import s from './DetailOrder.module.css';
import { asyncGetOrderById } from '../../../redux/orders/operations';
import { getOrder} from '../../../redux/orders/selector';

function DetailOrder() {
  const { params:{id} } = useRouteMatch();
  const dispatch = useDispatch();
  const order = useSelector(getOrder);


  useEffect(() => {
    dispatch(asyncGetOrderById(id))
  }, [dispatch, id]);


  return (
      order.length !== 0 &&(
        <div className={s.detailOrder_wrapper}>
          <p>_id : {order[0]._id?order[0]._id:'missed'}</p>
          <p>createdAt : {order[0].createdAt?order[0].createdAt:'missed'}</p>
        </div>
      )
  )
}
export default DetailOrder;