- Section 22: Back to the Client
- Table of Contents
- A Few More Pages
- Reminder on Data Fetching with Next
- Two Quick Fixes
- Scaffolding a Form
- Sanitizing Price Input
- Ticket Creation
- Listing All Tickets
- Linking to Wildcard Routes
- Creating an Order
- Programmatic Navigation to Wildcard Routes
- The Expiration Timer
- Displaying the Expiration
- Showing a Stripe Payment Form
- Configuring Stripe
- Test Credit Card Numbers
- Paying for an Order
- Filtering Reserved Tickets
- Header Links
- Rendering a List of Orders
- Type 'thisisunsafe' in Chrome to bypass security warning
- Fetch getCurrentUser in _app.js and index.js
const AppComponent = ({ Component, pageProps, currentUser }) => {
// Fix #1: pass currentUser directly into Component
return (
<div>
<Header currentUser={currentUser} />
<Component currentUser={currentUser} {...pageProps} />
</div>
);
};
AppComponent.getInitialProps = async appContext => {
const client = buildClient(appContext.ctx);
const { data } = await client.get('/api/users/currentuser');
let pageProps = {};
if(appContext.Component.getInitialProps) {
// Fix #2
pageProps = await appContext.Component.getInitialProps(appContext.ctx, client, data.currentUser);
}
return {
pageProps,
...data
};
};
export default AppComponent;const NewTicket = () => {
return (
<div>
<h1>Create a Ticket</h1>
<form>
<div className="form-group">
<label>Title</label>
<input className="form-control" />
</div>
<div className="form-group">
<label>Price</label>
<input className="form-control" />
</div>
<button className="btn btn-primary">Submit</button>
</form>
</div>
);
};
export default NewTicket;import { useState } from 'react';
const NewTicket = () => {
const [title, setTitle] = useState('');
const [price, setPrice] = useState('');
const onBlur = () => {
const value = parseFloat(price);
if (isNaN(value)) {
return;
}
setPrice(value.toFixed(2));
};
return (
<div>
<h1>Create a Ticket</h1>
<form>
<div className="form-group">
<label>Title</label>
<input
value={title}
onChange={(e) => setTitle(e.target.value)}
className="form-control"
/>
</div>
<div className="form-group">
<label>Price</label>
<input
value={price}
onBlur={onBlur}
onChange={(e) => setPrice(e.target.value)}
className="form-control"
/>
</div>
<button className="btn btn-primary">Submit</button>
</form>
</div>
);
};
export default NewTicket; const { doRequest, errors } = useRequest({
url: '/api/tickets',
method: 'post',
body: {
title,
price,
},
onSuccess: (ticket) => console.log(ticket),
});
const onSubmit = (event) => {
event.preventDefault();
doRequest();
};- route to landing page ('/') after create a new ticket
onSuccess: () => Router.push('/')const LandingPage = ({ currentUser, tickets }) => {
const ticketList = tickets.map((ticket) => {
return (
<tr key={ticket.id}>
<td>{ticket.title}</td>
<td>{ticket.price}</td>
</tr>
);
});
return (
<div>
<h1>Tickets</h1>
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>{ticketList}</tbody>
</table>
</div>
);
};
LandingPage.getInitialProps = async (context, client, currentUser) => {
const { data } = await client.get('/api/tickets');
return { tickets: data };
};
export default LandingPage; <Link href="/tickets/[ticketId]" as={`/tickets/${ticket.id}`}>
<a>View</a>
</Link>import useRequest from '../../hooks/use-request';
const TicketShow = ({ ticket }) => {
const { doRequest, errors } = useRequest({
url: '/api/orders',
method: 'post',
body: {
ticketId: ticket.id,
},
onSuccess: (order) => console.log(order),
});
return (
<div>
<h1>{ticket.title}</h1>
<h4>Price: {ticket.price}</h4>
{errors}
<button onClick={doRequest} className="btn btn-primary">
Purchase
</button>
</div>
);
};
TicketShow.getInitialProps = async (context, client) => {
const { ticketId } = context.query;
const { data } = await client.get(`/api/tickets/${ticketId}`);
return { ticket: data };
};
export default TicketShow;- Route to show new order after reserved ticket
onSuccess: (order) => Router.push('/orders/[orderId]', `/orders/${order.id}`),import { useEffect, useState } from 'react';
const OrderShow = ({ order }) => {
const [timeLeft, setTimeLeft] = useState('');
useEffect(() => {
const findTimeLeft = () => {
const msLeft = new Date(order.expiresAt) - new Date();
setTimeLeft(Math.round(msLeft / 1000));
};
findTimeLeft();
const timerId = setInterval(findTimeLeft, 1000);
return () => {
clearInterval(timerId);
};
}, [order]);
return <div>Time left to pay: {timeLeft} seconds</div>;
};
OrderShow.getInitialProps = async (context, client) => {
const { orderId } = context.query;
const { data } = await client.get(`/api/orders/${orderId}`);
return { order: data };
};
export default OrderShow; if (timeLeft < 0) {
return <div>Order Expired</div>;
} return (
<div>
Time left to pay: {timeLeft} seconds
<StripeCheckout
token={(token) => console.log(token)}
stripeKey="pk_test_FlLFVapGHTly3FicMdTU06SC006tWtWbNH"
amount={order.ticket.price * 100}
email={currentUser.email}
/>
</div>
); const { doRequest, errors } = useRequest({
url: '/api/payments',
method: 'post',
body: {
orderId: order.id,
},
onSuccess: (payment) => console.log(payment),
}); const tickets = await Ticket.find({
orderId: undefined,
}); 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' },
]const OrderIndex = ({ orders }) => {
return (
<ul>
{orders.map((order) => {
return (
<li key={order.id}>
{order.ticket.title} - {order.status}
</li>
);
})}
</ul>
);
};
OrderIndex.getInitialProps = async (context, client) => {
const { data } = await client.get('/api/orders');
return { orders: data };
};
export default OrderIndex;