jtpmcdevitt/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated order page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-27 19:20:54 -05:00
parent 7627910159
commit dc6672a96d
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
donutshop_ecommerce/src/app/orders/page.js
View file

@ -2,6 +2,8 @@
import React, { useEffect, useState } from 'react'
import UserTab from '../../components/layout/UserTab'
import useProfile from '../../components/UseProfile'
import Link from 'next/link'
const OrderPage = () => {
const {loading, data} = useProfile();
@ -11,11 +13,12 @@ const OrderPage = () => {
useEffect(() => {
fetch('/api/orders').then(res => {
res.json().then(orders => {
setOrders(orders);
setOrders(orders.reverse());
})
})
}, [])
//date&time for createdAt
function dateTime(str){
return str.replace('T', ' ').substring(0, 16)
@ -33,14 +36,17 @@ const OrderPage = () => {
<div className='px-5 mb-10'>
<UserTab isAdmin={true}/>
<div className='max-w-md mx-auto mt-10'>
{orders?.length > 0 && orders.map(order => (
{orders?.length > 0 && orders.map((order) => (
<div className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
<div className='flex flex-col'>
<div className='flex flex-col gap-2'>
<div className='text-gray-700 font-semibold'>{order.userEmail}</div>
<div className={order.paid? 'text-green-600 text-sm' : 'text-red-600 text-sm'}>{order.paid ? 'Paid' : 'Payment required'}</div>
<div className='mb-2'>
<Link href={'/orders/'+order._id} className='bg-gray-200 text-gray-700 p-2 text-xs font-semibold'>Order info</Link>
</div>
<div className='text-xs text-gray-500'>{dateTime(order.createdAt)}</div>
</div>
<div>
{dateTime(order.createdAt)}
<div className='text-xs text-center text-white font-medium'>
<div className={order.paid? 'bg-green-600 p-[5px] w-[50px] rounded-[4px]' : 'bg-red-600 p-[5px] w-[120px] rounded-[4px]'}>{order.paid ? 'Paid' : 'Payment required'}</div>
</div>
</div>
))}