Merge pull request #235 from alwinsimon/v1

V1

client/components/header.js

@@ -2,9 +2,11 @@ import Link from "next/link";
 
 export default ({ currentUser }) => {
   const Links = [
-    !currentUser && { label: "Sign Up", href: "auth/signup" },
-    !currentUser && { label: "Sign In", href: "auth/signin" },
-    currentUser && { label: "Sign Out", href: "auth/signout" },
+    !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((validLinks) => validLinks)
     .map(({ label, href }) => {

client/hooks/use-request.js

@@ -4,11 +4,11 @@ import axios from "axios";
 export default ({ url, method, body, onSuccess }) => {
   const [errors, setErrors] = useState(null);
 
-  const makeRequest = async () => {
+  const makeRequest = async (props={}) => {
     try {
       setErrors(null); // Setting error to null initially to prevent errors from being displayed always.
 
-      const response = await axios[method](url, body);
+      const response = await axios[method](url, {...body, ...props});
 
       // If the call back exist, then return the call back with response data.
       if (onSuccess) {

client/package.json

@@ -13,7 +13,9 @@
     "axios": "^1.5.1",
     "bootstrap": "^5.3.2",
     "next": "^13.5.4",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-stripe-checkout": "^2.6.3"
   }
 }

client/pages/_app.js

@@ -7,7 +7,9 @@ const AppComponent = ({ Component, pageProps, currentUser }) => {
   return (
     <div>
       <Header currentUser={currentUser} />
-      <Component {...pageProps} />
+      <div className="container">
+        <Component currentUser={currentUser} {...pageProps} />
+      </div>
     </div>
   );
 };
@@ -20,7 +22,11 @@ AppComponent.getInitialProps = async (appContext) => {
     // If the child component has getInitialProps method, then execute it manually from here.
     let pageProps = {};
     if (appContext.Component.getInitialProps) {
-      pageProps = await appContext.Component.getInitialProps(appContext.ctx);
+      pageProps = await appContext.Component.getInitialProps(
+        appContext.ctx,
+        client,
+        response.data.currentUser
+      );
     }
 
     return { pageProps, currentUser: response.data.currentUser };

client/pages/index.js

@@ -1,34 +1,56 @@
-import buildClient from "../api/build-client";
+import Link from 'next/link';
 
-const IndexPage = ({ currentUser }) => {
+const IndexPage = ({ currentUser, tickets }) => {
   if (!currentUser) {
     return (
       <>
         <h1>Landing Page</h1>
-        <br/>
+        <br />
         <h5>Signed Out</h5>
       </>
     );
   }
 
+  let ticketList;
+  if (currentUser) {
+    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}`}>
+              View
+            </Link>
+          </td>
+        </tr>
+      );
+    });
+  }
+
   return (
     <>
-      <h1>Landing Page</h1>
-      <br />
       <h5>Welcome {currentUser.email}</h5>
+
+      <h1>Tickets</h1>
+      <table className="table table-striped">
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Price</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+
+        <tbody>{currentUser && ticketList}</tbody>
+      </table>
     </>
   );
 };
 
-IndexPage.getInitialProps = async (context) => {
-  try {
-    const client = buildClient(context);
-    const response = await client.get("/api/users/currentuser");
-    return response.data;
-  } catch (err) {
-    console.error("Error in making request to get current user:", err.message);
-    return { currentUser: null };
-  }
+IndexPage.getInitialProps = async (context, client, currentUser) => {
+  const { data } = await client.get("/api/tickets");
+  return { tickets: data };
 };
 
 export default IndexPage;

client/pages/orders/[orderId].js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import Router from "next/router";
+import StripeCheckout from "react-stripe-checkout";
+import useRequest from "../../hooks/use-request";
+
+const OrderShow = ({ order, currentUser }) => {
+  const [timeLeft, setTimeLeft] = useState(0);
+  const [makeRequest, errors] = useRequest({
+    url: "/api/payments",
+    method: "post",
+    body: {
+      orderId: order.id,
+    },
+    onSuccess: (payment) => {
+      Router.push("/orders");
+    },
+  });
+
+  useEffect(() => {
+    const findTimeLeft = () => {
+      const milliSecondsLeft = new Date(order.expiresAt) - new Date();
+      const secondsLeft = Math.round(milliSecondsLeft / 1000);
+
+      setTimeLeft(secondsLeft);
+    };
+
+    findTimeLeft();
+    const timer = setInterval(findTimeLeft, 1000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [order]);
+
+  if (timeLeft < 0) {
+    return (
+      <div>
+        <h3 className="text text-danger">Order Expired !!!</h3>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      Time left to complete payment: {timeLeft} seconds.
+      <StripeCheckout
+        token={(token) => {
+          makeRequest({ token: token.id });
+        }}
+        stripeKey="pk_test_51O53zRSJtuYafghXhYNZzaJqYAh6afqRduQ3UAMs6Wm4vkv30ayq09gBPgU3jYkQPXrofQa9aRbIlb4uuCp3FC6O000J86xaKc"
+        amount={order.ticket.price * 100}
+        email={currentUser.email}
+      />
+      {errors}
+    </div>
+  );
+};
+
+OrderShow.getInitialProps = async (context, client) => {
+  const { orderId } = context.query;
+  const { data } = await client.get(`/api/orders/${orderId}`);
+
+  return { order: data };
+};
+
+export default OrderShow;

client/pages/orders/index.js

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

client/pages/tickets/[ticketId].js

@@ -0,0 +1,40 @@
+import Router from "next/router";
+import useRequest from "../../hooks/use-request";
+
+const TicketShow = ({ ticket }) => {
+  const [makeRequest, errors] = useRequest({
+    url: "/api/orders",
+    method: "post",
+    body: {
+      ticketId: ticket.id,
+    },
+    onSuccess: (orderData) => {
+      Router.push("/orders/[orderId]", `/orders/${orderData.id}`);
+    },
+  });
+
+  const handleClick = async () => {
+    makeRequest();
+  };
+
+  return (
+    <div>
+      <h1>{ticket.title}</h1>
+      <h4>Price: {ticket.price} INR</h4>
+      {errors}
+      <button className="btn btn-primary" onClick={handleClick}>
+        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;

client/pages/tickets/new.js

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import Router from "next/router";
+import useRequest from "../../hooks/use-request";
+
+const NewTicket = () => {
+  const [title, setTitle] = useState("");
+  const [price, setPrice] = useState("");
+  const [makeRequest, errors] = useRequest({
+    url: "/api/tickets",
+    method: "post",
+    body: {
+      title: title,
+      price: price,
+    },
+    onSuccess: () => {
+      Router.push("/");
+    },
+  });
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    if (!title || !price) {
+      return;
+    }
+
+    makeRequest();
+  };
+
+  const roundOff = () => {
+    const roundedPrice = parseFloat(price);
+
+    if (isNaN(roundedPrice)) {
+      // If price is not a number
+      return;
+    }
+
+    setPrice(roundedPrice.toFixed(2));
+  };
+  return (
+    <div>
+      <h1>Create A Ticket</h1>
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label>Title</label>
+          <input
+            className="form-control"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+        <div className="form-group">
+          <label>Price</label>
+          <input
+            className="form-control"
+            type="number"
+            step="0.01"
+            onBlur={roundOff}
+            value={price}
+            onChange={(e) => setPrice(e.target.value)}
+          />
+        </div>
+        {errors}
+        <button className="btn btn-primary">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default NewTicket;