text: import React, { Component } from "react";
  import { Query } from "react-apollo";
  import { formatDistance } from "date-fns";
  import Link from "next/link";
  import styled from "styled-components";
  import gql from "graphql-tag";
  
  import OrderItemStyles from "./styles/OrderItemStyles";
  import OrderUl_Styled from "./styles/OrderUlStyles";
  
  import Error from "./ErrorMessage";
  
  import formatMoney from "../lib/formatMoney";
  
  const USER_ORDERS_QUERY = gql`
    query USER_ORDERS_QUERY {
      orders(orderBy: createdAt_DESC) {
        id
        total
        createdAt
        items {
          id
          title
          price
          description
          quantity
          image
        }
      }
    }
  `;
  
  class OrderList extends Component {
    render() {
      return (
        <Query query={USER_ORDERS_QUERY}>
          {({ data: { orders }, loading, error }) => {
            if (loading) return <p>loading...</p>;
  
            if (error) return <Error erorr={error} />;
            
            return (
              <div>
                <h2>You have {orders.length} orders</h2>
  
                <OrderUl_Styled>
                  {orders.map(order => (
                    <OrderItemStyles key={order.id}>
                      <Link
                        href={{
                          pathname: "/order",
                          query: { id: order.id }
                        }}
                      >
                        <a>
                          <div className="order-meta">
                            <p>
                              {order.items.reduce((a, b) => a + b.quantity, 0)}{" "}
                              Items
                            </p>
                            <p>{order.items.length} Products</p>
                            <p>{formatDistance(order.createdAt, new Date())} ago</p>
                            <p>{formatMoney(order.total)}</p>
                          </div>
  
                          <div className="images">
                            {order.items.map(item => (
                              <img
                                key={item.id}
                                src={item.image}
                                alt={item.title}
                              />
                            ))}
                          </div>
                        </a>
                      </Link>
                    </OrderItemStyles>
                  ))}
                </OrderUl_Styled>
              </div>
            );
          }}
        </Query>
      );
    }
  }
  
  export default OrderList;
  