complete all the flow

ticketing/client/components/header.js

@@ -4,6 +4,8 @@ export default ({ currentUser }) => {
   const links = [
     !currentUser && { label: 'Sign Up', href: '/auth/signup' },
     !currentUser && { label: 'Sign In', href: '/auth/signin' },
+    currentUser && {label: 'Sell Tickets', href: '/tickets/new'},
+    currentUser && {label: 'My Orders', href: '/orders'},
     currentUser && { label: 'Sign Out', href: '/auth/signout' },
   ]
     .filter((linkConfig) => linkConfig)

ticketing/client/hooks/use-request.js

@@ -4,10 +4,10 @@ import { useState } from "react";
 const useRequest = ({url, method, body, onSuccess}) => {
     const [errors, setErrors] = useState(null);
 
-    const doRequest = async () => {
+    const doRequest = async (props = {}) => {
         try {
            setErrors(null);
-           const response = await axios[method](url, body);
+           const response = await axios[method](url,{...body, ...props});
            if(onSuccess) {
                 onSuccess(response.data);
            }

ticketing/client/package.json

@@ -13,7 +13,9 @@
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "next": "^13.5.7",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-stripe-checkout": "^2.6.3"
   }
 }

ticketing/client/pages/orders/[orderId].js

@@ -1,7 +1,19 @@
-import {useEffect, useState} from 'react'
-const OrderShow = ({order}) => {
+import {useEffect, useState} from 'react';
+import StripeCheckout from 'react-stripe-checkout';
+import Router from 'next/router';
+import userRequest from '../../hooks/use-request';
+
+const OrderShow = ({order, currentUser}) => {
 
     const [timeLeft, setTimeLeft] = useState('');
+    const {doRequest, errors} = userRequest({
+        url: '/api/payments',
+        method: 'post',
+        body: {
+            orderId: order.id
+        },
+        onSuccess: (payment) => Router.push('/orders')
+    })
 
     useEffect(()=>{
         const findTimeLeft = () => {
@@ -22,7 +34,15 @@ const OrderShow = ({order}) => {
 
     return (
         <div>
-            <div>Tme letf to pay: {timeLeft} seconds</div>
+            <div>Tme letf to pay: {timeLeft} seconds
+                <StripeCheckout 
+                    token = {({id}) => doRequest({token: id})}
+                    stripeKey='<TODO: add Pub Key>'
+                    amount={order.ticket.price * 100}
+                    email={currentUser.email}
+                />
+                {errors}
+            </div>
         </div>
     )
 }

ticketing/client/pages/orders/index.js

@@ -0,0 +1,20 @@
+const OrderIndex = ({orders}) => {
+    return (
+        <div>
+            <ul>
+                {orders.map(order => {
+                    return <li key={order.id}>
+                        {order.ticket.title} - {order.status}
+                    </li>
+                })}
+            </ul>
+        </div>
+    )
+}
+
+OrderIndex.getInitialProps = async (context, client) => {
+    const {data} = await client.get('/api/orders')
+    return {orders: data};
+}
+
+export default OrderIndex;

ticketing/client/pages/tickets/[ticketId].js

@@ -17,7 +17,7 @@ const TicketShow = ({ticket}) => {
             <h1>{ticket.title}</h1>
             <h4>Price: {ticket.price}</h4>
             {errors}
-            <button onClick={doRequest} className="btn btn-primary">Purchase</button>
+            <button onClick={() => doRequest()} className="btn btn-primary">Purchase</button>
         </div>
     )
 

ticketing/tickets/src/routes/index.ts

@@ -4,7 +4,7 @@ import { Ticket } from '../models/ticket';
 const router = express.Router();
 
 router.get('/api/tickets', async (req: Request, res: Response) => {
-    const tickets = await Ticket.find({});
+    const tickets = await Ticket.find({orderId: undefined});
     res.send(tickets);
 });