22. Back to the Client | 09. Creating an Order

Author: webmakaka

22_Back_to_the_Client.md

@@ -52,6 +52,18 @@ If chome will block page for security reasons, type: **thisisunsafe**
 
 <br/>
 
+### 08. Linking to Wildcard Routess
+
+<br/>
+
+### 09. Creating an Order
+
+<br/>
+
+![Application](/img/pic-22-04.png?raw=true)
+
+<br/>
+
 ---
 
 <br/>

22_Back_to_the_Client/app/client/pages/index.js

@@ -1,9 +1,16 @@
+import Link from 'next/link';
+
 const LandingPage = ({ currentUser, tickets }) => {
   const ticketList = tickets.map((ticket) => {
     return (
       <tr key={ticket.id}>
         <td>{ticket.title}</td>
         <td>{ticket.price}</td>
+        <td>
+          <Link href="/tickets/[ticketId]" as={`/tickets/${ticket.id}`}>
+            <a>View</a>
+          </Link>
+        </td>
       </tr>
     );
   });
@@ -16,6 +23,7 @@ const LandingPage = ({ currentUser, tickets }) => {
           <tr>
             <th>Title</th>
             <th>Price</th>
+            <th>Link</th>
           </tr>
         </thead>
         <tbody>{ticketList}</tbody>

22_Back_to_the_Client/app/client/pages/tickets/[ticketId].js

@@ -0,0 +1,33 @@
+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 className="btn btn-primary" onClick={doRequest}>
+        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;