Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 4x 4x | import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { RouteComponentProps } from '@reach/router';
import { Layout } from './Layout';
import { useTranslation } from 'react-i18next';
const styles = require('./Profile.module.css')
import { Loading } from 'ag-ems-ui-library';
import { format, formatToPrice } from '../../helpers';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
import { useQuery } from '@apollo/client';
import { GET_USER_ORDERS } from '../../contexts/userContext/queries';
export const UserOrders: FC<RouteComponentProps> = () => {
const { t } = useTranslation();
const { data: ordersData, refetch: getNextOrders } = useQuery(GET_USER_ORDERS, {
variables: { currentPage: 1, pageSize: 5 }
});
const [orders, setOrders] = useState<any[]>();
console.groupCollapsed('Orders');
console.log(orders);
console.groupEnd();
const [preloader, setPreloader] = useState(false);
useEffect(() => {
if (ordersData) {
setOrders(
orders
? [...orders, ...ordersData.customer.orders.items]
: ordersData.customer.orders.items
);
}
}, [ordersData]);
const currentPage = useMemo(() => ordersData ? ordersData.customer.orders.page_info.current_page : 1, [ordersData]);
const totalPages = useMemo(() => ordersData ? ordersData.customer.orders.page_info.total_pages : 0, [ordersData]);
const loadOlderOrders = useCallback(async () => {
if (ordersData) {
setPreloader(true);
await getNextOrders({
currentPage: currentPage + 1,
pageSize: 5
});
setPreloader(false);
}
}, [ordersData]);
const orderItems = useMemo(() => orders ? (
orders.map(order => (
<div key={order.id} className={styles.ProfileOrder}>
<Link to={`/profile/order/${order.number}`} className={styles.ProfileOrderNumber}>
<span className={styles.ProfileOrderProp}>{t('order')}:</span>
{order.number}
</Link>
<p className={styles.ProfileOrderDate}>
<span className={styles.ProfileOrderProp}>{t('date')}:</span>
{format(order.order_date, 'dd.MM.yyyy')}
</p>
<p className={styles.ProfileOrderTotal}>
<span className={styles.ProfileOrderProp}>{t('orderTotal')}:</span>
{formatToPrice(order.total.grand_total.value)}
</p>
<p className={styles.ProfileOrderStatus}>
<span className={styles.ProfileOrderProp}>{t('status')}:</span>
{order.status}
</p>
</div>
))
) : null, [orders]);
return <Layout current="orders" classes={styles.ProfileOrders}>
<h1>{t('profile.myOrders')}</h1>
{orders ? orders.length ? <div className={styles.ProfileOrdersContent}>
<div className={`${styles.ProfileOrder} ${styles.ProfileOrdersHeader}`}>
<p className={styles.ProfileOrderNumber}><span className={styles.ProfileOrderProp}>{t('order')}</span></p>
<p className={styles.ProfileOrderDate}><span className={styles.ProfileOrderProp}>{t('date')}</span></p>
<p className={styles.ProfileOrderTotal}><span className={styles.ProfileOrderProp}>{t('orderTotal')}</span></p>
<p className={styles.ProfileOrderStatus}><span className={styles.ProfileOrderProp}>{t('status')}</span></p>
</div>
{orderItems}
{
currentPage < totalPages
&& <button
type="button"
className={styles.ProfileOrdersLoad}
onClick={loadOlderOrders}
>{t('profile.loadOlderOrders')}</button>
}
</div> : <p>{t('profile.noOrders')}</p> : <Loading color="#007c00" />}
{preloader && <Loading color="#007c00" />}
</Layout>;
};
|