Add canonical path to listing page

src/containers/ListingPage/ListingPage.js

@@ -167,6 +167,7 @@ export class ListingPageComponent extends Component {
       sendVerificationEmailInProgress,
       sendVerificationEmailError,
       onResendVerificationEmail,
+      flattenedRoutes,
     } = this.props;
     const listingId = new UUID(params.id);
     const currentListing = ensureListing(getListing(listingId));
@@ -344,6 +345,10 @@ export class ListingPageComponent extends Component {
       { title, price: formattedPrice, siteTitle }
     );
 
+    const canonicalPath = createResourceLocatorString('ListingPageCanonical', flattenedRoutes, {
+      id: listingId.uuid,
+    });
+
     return (
       <Page
         authInfoError={authInfoError}
@@ -355,6 +360,7 @@ export class ListingPageComponent extends Component {
         description={description}
         facebookImages={facebookImages}
         twitterImages={twitterImages}
+        canonicalPath={canonicalPath}
         schema={
           `
           {

src/containers/ListingPage/ListingPage.test.js

@@ -17,7 +17,16 @@ describe('ListingPage', () => {
     const listing1 = createListing('listing1', {}, { author: createUser('user-1') });
     const getListing = () => listing1;
     const props = {
-      flattenedRoutes: [],
+      flattenedRoutes: [
+        // Fake route since a circular dependency prevents using the
+        // full routesConfiguration here
+        {
+          path: '/l/:id',
+          exact: true,
+          name: 'ListingPageCanonical',
+          component: noop,
+        },
+      ],
       location: { search: '' },
       history: {
         push: () => console.log('HistoryPush called'),

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -2,6 +2,7 @@ exports[`ListingPage matches snapshot 1`] = `
 <Page
   authInfoError={null}
   author="user-1 display name"
+  canonicalPath="/l/listing1"
   contentType="website"
   description="listing1 description"
   facebookImages={Array []}