diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-09-13 14:18:56 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-09-13 14:18:56 -0400 |
| commit | 8a5825d52271d712ec7c8348447d433067e13ef2 (patch) | |
| tree | ba07c218c1b2d4e59c154f2059b69fd858ae65fe /finished-application/frontend/components/OrderList.js | |
| parent | b0d25a9ad3cc1df2fcc11ddb84e4603b94520b09 (diff) | |
DONE
Diffstat (limited to 'finished-application/frontend/components/OrderList.js')
| -rw-r--r-- | finished-application/frontend/components/OrderList.js | 93 |
1 files changed, 0 insertions, 93 deletions
diff --git a/finished-application/frontend/components/OrderList.js b/finished-application/frontend/components/OrderList.js deleted file mode 100644 index 5886ad7..0000000 --- a/finished-application/frontend/components/OrderList.js +++ /dev/null @@ -1,93 +0,0 @@ -import React 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 formatMoney from '../lib/formatMoney'; -import OrderItemStyles from './styles/OrderItemStyles'; - -const USER_ORDERS_QUERY = gql` - query orders { - orders(orderBy: createdAt_DESC) { - id - total - createdAt - updatedAt - items { - id - title - price - description - quantity - image - } - } - } -`; - -const OrderUl = styled.ul` - display: grid; - grid-gap: 4rem; - grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)); -`; - -class OrderList extends React.Component { - render() { - return ( - <Query query={USER_ORDERS_QUERY}> - {({ data: { orders }, loading, error }) => { - if (loading) return <p>Loading...</p>; - if (error) return <p>Error...</p>; - if (!orders || !orders.length) return <p>No Orders Yet!</p>; - return ( - <div> - <h2>You have {orders.length} Orders</h2> - <OrderUl> - {orders.map(order => ( - <OrderItemStyles key={order.id}> - <Link - href={{ - pathname: '/order', - query: { id: order.id }, - }} - > - <a> - <div className="order-meta"> - <p> - <strong>{order.items.reduce((a, b) => a + b.quantity, 0)}</strong> - Items - </p> - <p> - <strong>{order.items.length}</strong> - Products - </p> - <p> - <strong>{formatDistance(order.createdAt, new Date())}</strong> - ago - </p> - <p> - <strong>{formatMoney(order.total)}</strong> - 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> - </div> - ); - }} - </Query> - ); - } -} - -export default OrderList; -export { USER_ORDERS_QUERY }; |
