Merge pull request #761 from sharetribe/fix-managelistingcard-ff

Fix FF bug on ManageListingCard

src/components/ManageListingCard/ManageListingCard.css

@@ -15,6 +15,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  cursor: pointer;
 
   /* Remove link's hover effect */
   &:hover {

src/components/ManageListingCard/ManageListingCard.js

@@ -8,7 +8,7 @@ import routeConfiguration from '../../routeConfiguration';
 import { LISTING_STATE_PENDING_APPROVAL, LISTING_STATE_CLOSED, propTypes } from '../../util/types';
 import { formatMoney } from '../../util/currency';
 import { ensureOwnListing } from '../../util/data';
-import { createSlug } from '../../util/urlHelpers';
+import { LISTING_PAGE_PENDING_APPROVAL_VARIANT, createSlug } from '../../util/urlHelpers';
 import { createResourceLocatorString } from '../../util/routes';
 import {
   InlineTextButton,
@@ -16,7 +16,6 @@ import {
   MenuLabel,
   MenuContent,
   MenuItem,
-  ListingLink,
   IconSpinner,
   ResponsiveImage,
 } from '../../components';
@@ -48,7 +47,7 @@ const priceData = (price, intl) => {
   return {};
 };
 
-const createURL = (routes, listing) => {
+const createEditListingURL = (routes, listing) => {
   const id = listing.id.uuid;
   const slug = createSlug(listing.attributes.title);
   const pathParams = { id, slug, type: 'edit', tab: 'description' };
@@ -56,6 +55,27 @@ const createURL = (routes, listing) => {
   return createResourceLocatorString('EditListingPage', routes, pathParams, {});
 };
 
+const createListingURL = (routes, listing) => {
+  const id = listing.id.uuid;
+  const slug = createSlug(listing.attributes.title);
+  const isPendingApproval = listing.attributes.state === LISTING_STATE_PENDING_APPROVAL;
+  const linkProps = isPendingApproval
+    ? {
+        name: 'ListingPageVariant',
+        params: {
+          id,
+          slug,
+          variant: LISTING_PAGE_PENDING_APPROVAL_VARIANT,
+        },
+      }
+    : {
+        name: 'ListingPage',
+        params: { id, slug },
+      };
+
+  return createResourceLocatorString(linkProps.name, routes, linkProps.params, {});
+};
+
 // Cards are not fixed sizes - So, long words in title make flexboxed items to grow too big.
 // 1. We split title to an array of words and spaces.
 //    "foo bar".split(/([^\s]+)/gi) => ["", "foo", " ", "bar", ""]
@@ -196,7 +216,21 @@ export const ManageListingCardComponent = props => {
   });
 
   return (
-    <ListingLink className={classes} listing={listing}>
+    <div
+      className={classes}
+      tabIndex={0}
+      onClick={event => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        // ManageListingCard contains links, buttons and elements that are working with routing.
+        // This card doesn't work if <a> or <button> is used to wrap events that are card 'clicks'.
+        //
+        // NOTE: It might be better to absolute-position those buttons over a card-links.
+        // (So, that they have no parent-child relationship - like '<a>bla<a>blaa</a></a>')
+        history.push(createListingURL(routeConfiguration(), listing));
+      }}
+    >
       <div className={css.threeToTwoWrapper}>
         <div className={css.aspectWrapper}>
           <ResponsiveImage
@@ -275,13 +309,13 @@ export const ManageListingCardComponent = props => {
           onClick={event => {
             event.preventDefault();
             event.stopPropagation();
-            history.push(createURL(routeConfiguration(), listing));
+            history.push(createEditListingURL(routeConfiguration(), listing));
           }}
         >
           <FormattedMessage id="ManageListingCard.edit" />
         </button>
       </div>
-    </ListingLink>
+    </div>
   );
 };
 

src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap

@@ -1,31 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ManageListingCard matches snapshot 1`] = `
-<ListingLink
+<div
   className=""
-  listing={
-    Object {
-      "attributes": Object {
-        "deleted": false,
-        "description": "listing1 description",
-        "geolocation": LatLng {
-          "lat": 40,
-          "lng": 60,
-        },
-        "price": Money {
-          "amount": 5500,
-          "currency": "USD",
-        },
-        "publicData": Object {},
-        "state": "published",
-        "title": "listing1 title",
-      },
-      "id": UUID {
-        "uuid": "listing1",
-      },
-      "type": "ownListing",
-    }
-  }
+  onClick={[Function]}
+  tabIndex={0}
 >
   <div>
     <div>
@@ -157,5 +136,5 @@ exports[`ManageListingCard matches snapshot 1`] = `
       />
     </button>
   </div>
-</ListingLink>
+</div>
 `;