ListingPage

src/Routes.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { Match, Miss, Redirect } from 'react-router';
-import { LandingPage, SearchPage, NotFoundPage } from './containers';
+import {
+  LandingPage,
+  ListingPage,
+  SearchPage,
+  NotFoundPage,
+} from './containers';
 
 // This is only used for testing that redirects work correct in the
 // client and when rendering in the server.
@@ -12,6 +17,10 @@ const Routes = () => (
 
     {/* Search view */}
     <Match exactly pattern="/s" component={ SearchPage } />
+
+    {/* Listing view */}
+    <Match exactly pattern="/l/:slug" component={ ListingPage } />
+    <Match exactly pattern="/l" component={ RedirectLandingPage } />
     <Miss component={ NotFoundPage } />
   </div>
 );

src/containers/ListingPage/ListingPage.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Page } from '../../components';
+
+export default ({ params }) => {
+
+  // Listing id should be located either in the end of slug
+  // - https://example.com/l/listing-title-as-slug-12345
+  // - https://example.com/l/12345
+  const slugAndId = params.slug.split('-');
+  const id = slugAndId[slugAndId.length - 1];
+
+  // TODO: Fetch data from SDK if no data is passed through props
+
+  return (
+    <Page title={ `Listing page with listing id: #${ id }` }>
+      <p>Slug: { params.slug }</p>
+      <Link to={ `/checkout/${id}` }><button>Book</button></Link>
+    </Page>
+  )
+};

src/containers/index.js

@@ -1,9 +1,11 @@
 import LandingPage from './LandingPage/LandingPage';
+import ListingPage from './ListingPage/ListingPage';
 import SearchPage from './SearchPage/SearchPage';
 import NotFoundPage from './NotFoundPage/NotFoundPage';
 
 export {
   LandingPage,
+  ListingPage,
   SearchPage,
   NotFoundPage,
 };