Skip to content

Commit 1b1889e

Browse files
esadakmanesadakman
committed
Order component finished,
1 parent b5d6b65 commit 1b1889e

File tree

3 files changed

+50
-40
lines changed

3 files changed

+50
-40
lines changed

‎components/Header.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import { signIn, signOut, useSession } from "next-auth/client";
88
import { useRouter } from "next/router";
99
import { useSelector } from "react-redux";
1010
import { selectItems } from "../slices/basketSlice";
11-
import amazonLogo from '../public/amazon_logo.png';
11+
import amazonLogo from "../public/amazon_logo.png";
1212

1313
function Header() {
1414
const [session] = useSession();
1515
const router = useRouter();
1616
// console.log(session?.user?.name.split(" ").slice(0, 2).join(" "));
17-
const items = useSelector(selectItems);
17+
const items = useSelector(selectItems);
1818
return (
1919
<header className="fixed w-screen top-0 z-50 ">
2020
<div className="flex items-center bg-amazon_blue top-0 z-50 shadow-lg p-2 py-3 flex-grow">
@@ -50,7 +50,7 @@ function Header() {
5050
</p>
5151
<p className="font-extrabold md:text-sm">Account & Lists</p>
5252
</div>
53-
<div className="link ">
53+
<div onClick={() => router.push("/orders")} className="link ">
5454
<p>Returns</p>
5555
<p className="font-extrabold md:text-sm">& Orders</p>
5656
</div>

‎components/Order.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Currency from "react-currency-formatter";
2+
import moment from "moment/moment";
3+
4+
const Order = ({ id, amount, amountShipping, items, timestamp, images }) => {
5+
return (
6+
<div className="relative border rounded-md">
7+
<div className="flex items-center space-x-10 p-5 bg-gray-100 text-sm text-gray-600">
8+
<div>
9+
<p className="font-bold text-xs">ORDER PLACES</p>
10+
<p>{moment.unix(timestamp).format("DD MMM YYYY")}</p>
11+
</div>
12+
<div>
13+
<p className="text-xs font-bold">TOTAL</p>
14+
<p>
15+
<Currency quantity={amount} currency="USD" />- Next-Day Delivery{" "}
16+
<Currency quantity={amountShipping} currency="USD" />
17+
</p>
18+
</div>
19+
<p className="text-sm whitespace-nowrap sm:text-xl self-end flex-1 text-right text-blue-500">
20+
{items.length} items
21+
</p>
22+
<p className="absolute top-2 right-2 w-40 lg:w-72 truncate text-xs whitespace-nowrap mb-3">
23+
ORDER # {id}
24+
</p>
25+
</div>
26+
27+
<div className="px-5 pb-2">
28+
<div className="flex space-x-10 overflow-x-auto">
29+
{images.map((image, i) => (
30+
<img
31+
src={image}
32+
key={i}
33+
alt="Product Image"
34+
className="h-20 object-contain sm:h-32 rounded-md"
35+
/>
36+
))}
37+
</div>
38+
</div>
39+
</div>
40+
);
41+
};
42+
43+
export default Order;

‎pages/orders.js

+4-37
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import { getSession, useSession } from "next-auth/client";
44
import moment from "moment";
55
import db from "../firebase";
66
import { doc, getDocs, collection } from "firebase/firestore";
7+
import Order from "../components/Order";
78
function Orders({ orders }) {
89
// const { data: session } = useSession();
910
const [session] = useSession();
1011
console.log(orders);
1112
return (
1213
<>
1314
<Header />
14-
<div className="bg-gray-100 h-screen mt-28">
15+
<div className="bg-gray-100 min-h-screen mt-28">
1516
<Head>
1617
<title>Orders</title>
1718
</Head>
@@ -28,7 +29,7 @@ function Orders({ orders }) {
2829
<h2>{orders?.length} Orders</h2>
2930

3031
<div className="mt-5 space-y-4">
31-
{/* {orders?.map(
32+
{orders?.map(
3233
({ id, amount, amountShipping, items, timestamp, images }) => (
3334
<Order
3435
key={id}
@@ -40,7 +41,7 @@ function Orders({ orders }) {
4041
images={images}
4142
/>
4243
)
43-
)} */}
44+
)}
4445
</div>
4546
</main>
4647
</div>
@@ -83,37 +84,3 @@ export async function getServerSideProps(context) {
8384
},
8485
};
8586
}
86-
87-
// Firebase db
88-
// const docRef = doc(db, "users", session.user.email, );
89-
// const stripeOrders = await getDoc(docRef);
90-
// console.log(docSnap);
91-
// const stripeOrders = await db
92-
// .collection("users")
93-
// .doc(session.user.email)
94-
// .collection("orders")
95-
// .orderBy("timestamp", "desc")
96-
// .get();
97-
98-
// const colRef = collection(db, "users");
99-
// const docsSnap = await getDocs(colRef);
100-
// Stripe orders
101-
// const orders = await Promise.all(
102-
// // map through each order and get the data
103-
// // each one would be a promise. so Promise.all will wait
104-
// //for all of them to resolve
105-
// stripeOrders.docs.map(async (order) => ({
106-
// id: order.id,
107-
// amount: order.data().amount, // / 100,
108-
// //amountShipping: order.data().amount_shipping / 100,
109-
// images: order.data().images,
110-
// // get the timestamp from firebase and convert it to a date object
111-
// // so we can format it
112-
// timestamp: moment(order.data().timestamp.toDate()).unix(),
113-
// items: (
114-
// await stripe.checkout.sessions.listLineItems(order.id, {
115-
// limit: 100,
116-
// })
117-
// ).data,
118-
// }))
119-
// );

0 commit comments

Comments
 (0)