Integrate with Tito API for tickets

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
+.netlify/
 npm-debug.log
 node_modules/

app/screens/Home/index.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Link} from 'react-router';
+import axios from 'axios';
 import moment from 'moment';
 import cx from 'classnames';
 import constants from 'helpers/constants';
@@ -8,7 +9,6 @@ import About from 'components/About';
 import Button from 'components/Button';
 import Person from 'components/Person';
 import SpeakerData from '../../../api/speakers';
-import Tickets from '../../../api/tickets';
 
 const {Dates} = constants;
 
@@ -34,32 +34,46 @@ const UpcomingDate = ({timestamp, description}) => {
   );
 };
 
-const TicketCard = ({name, description, price, soldOut}) => {
+const TicketCard = ({ticket}) => {
+  const price = (isNaN(ticket.price) ? '' : '$') + parseInt(ticket.price, 10);
+  const isOnSale = moment.utc().isAfter(moment.utc(ticket.start_at));
+  const buttonLabel = ticket.sold_out
+    ? 'Sold Out'
+    : isOnSale
+    ? 'Buy Now'
+    : 'Coming Soon';
+
   return (
     <div
       className={cx('Home__TicketCard', {
-        'Home__TicketCard--disabled': soldOut,
+        'Home__TicketCard--disabled': ticket.sold_out,
       })}>
       <div className="Home__TicketCard__Details">
-        <h3>{name}</h3>
-        <p>{description}</p>
+        <h3>{ticket.title}</h3>
+        <p>{ticket.description}</p>
       </div>
       <div className="Home__TicketCard__Order">
-        {!isNaN(price) && (
-          <h2>{`$${price}`}</h2>
-        )}
+        <h2>{price}</h2>
         <Button
           className="primary"
           href={constants.Links.TICKET_SALES}
-          disabled={soldOut}>
-          {soldOut ? 'Sold Out' : 'Buy Now'}
+          disabled={ticket.sold_out}>
+          {buttonLabel}
         </Button>
       </div>
     </div>
   );
 };
 
 export default () => {
+  const [ticketList, setTicketList] = useState([]);
+
+  useEffect(() => {
+    axios.get('/api/tickets').then(res => {
+      setTicketList(res.data.releases);
+    });
+  }, []);
+
   return (
     <div className="Home">
       <section className="Home__About">
@@ -69,6 +83,7 @@ export default () => {
           More about React Rally &raquo;
         </Link>
       </section>
+
       {Object.keys(SpeakerData).length > 0 ? (
         <section>
           <h2>Featured Speakers</h2>
@@ -111,9 +126,9 @@ export default () => {
 
       <section>
         <h2>Tickets</h2>
-        {Tickets.map((t, i) => {
-          return <TicketCard key={i} {...t} />;
-        })}
+        {ticketList.map(t => (
+          <TicketCard key={t.id} ticket={t} />
+        ))}
       </section>
     </div>
   );

lambda/tickets.js

@@ -0,0 +1,38 @@
+const axios = require('axios');
+
+exports.handler = function(event, context, callback) {
+  axios
+    .get('https://api.tito.io/v3/trace-events/react-rally-2019/releases', {
+      headers: {
+        Authorization: 'Token token=' + process.env.TITO_ACCESS_TOKEN,
+      },
+    })
+    .then(res => {
+      res.data.releases = res.data.releases
+        ? res.data.releases.filter(r => !r.secret)
+        : res.data.data
+            .filter(r => !r.attributes.secret)
+            .map(r => ({
+              id: r.attributes.id,
+              title: r.attributes.title,
+              description: r.attributes.description,
+              price: r.attributes.price,
+              start_at: r.attributes['start-at'],
+              sold_out: r.attributes['sold-out'],
+            }));
+
+      delete res.data.data;
+
+      callback(null, {
+        statusCode: res.status,
+        headers: res.headers,
+        body: JSON.stringify(res.data),
+      });
+    })
+    .catch(err => {
+      callback(err, {
+        statusCode: 500,
+        body: null,
+      });
+    });
+};

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  command = "npm run build"
+  functions = ".netlify/functions"