Change ActionBar to allow for extension based on listing state

src/containers/ListingPage/ListingPage.js

@@ -60,8 +60,9 @@ const priceData = (price, intl) => {
   return {};
 };
 
-export const ActionBar = props => {
-  const { isOwnListing, isClosed, editParams } = props;
+export const ActionBarMaybe = props => {
+  const { isOwnListing, listing, editParams } = props;
+  const isClosed = listing.attributes.closed;
 
   if (isOwnListing) {
     return (
@@ -92,13 +93,13 @@ export const ActionBar = props => {
 
 const { arrayOf, bool, func, object, oneOf, shape, string } = PropTypes;
 
-ActionBar.propTypes = {
+ActionBarMaybe.propTypes = {
   isOwnListing: bool.isRequired,
-  isClosed: bool.isRequired,
+  listing: propTypes.listing.isRequired,
   editParams: object.isRequired,
 };
 
-ActionBar.displayName = 'ActionBar';
+ActionBarMaybe.displayName = 'ActionBarMaybe';
 
 const gotoBookTab = (history, listing) => {
   if (!listing.id) {
@@ -405,9 +406,9 @@ export class ListingPageComponent extends Component {
     // to the parent that would otherwise open the image carousel
     const actionBar = currentListing.id ? (
       <div onClick={e => e.stopPropagation()}>
-        <ActionBar
+        <ActionBarMaybe
           isOwnListing={isOwnListing}
-          isClosed={currentListing.attributes.closed}
+          listing={currentListing}
           editParams={editParams}
         />
       </div>

src/containers/ListingPage/ListingPage.test.js

@@ -13,7 +13,7 @@ import { showListingRequest, showListingError, showListing } from './ListingPage
 // Otherwise, ListingPage itself is not initialized correctly when routeConfiguration is imported
 // (loadData call fails).
 import routeConfiguration from '../../routeConfiguration';
-import { ListingPageComponent, ActionBar } from './ListingPage';
+import { ListingPageComponent, ActionBarMaybe } from './ListingPage';
 
 const { UUID } = sdkTypes;
 const noop = () => null;
@@ -101,30 +101,48 @@ describe('ListingPage', () => {
     });
   });
 
-  describe('ActionBar', () => {
+  describe('ActionBarMaybe', () => {
     it('shows users own listing status', () => {
-      const actionBar = shallow(<ActionBar isOwnListing isClosed={false} editParams={{}} />);
+      const listing = createListing('listing-published', {
+        closed: false,
+        state: 'published',
+      });
+      const actionBar = shallow(<ActionBarMaybe isOwnListing listing={listing} editParams={{}} />);
       const formattedMessages = actionBar.find(FormattedMessage);
       expect(formattedMessages.length).toEqual(2);
       expect(formattedMessages.at(0).props().id).toEqual('ListingPage.ownListing');
       expect(formattedMessages.at(1).props().id).toEqual('ListingPage.editListing');
     });
     it('shows users own closed listing status', () => {
-      const actionBar = shallow(<ActionBar isOwnListing isClosed editParams={{}} />);
+      const listing = createListing('listing-closed', {
+        closed: true,
+        state: 'published',
+      });
+      const actionBar = shallow(<ActionBarMaybe isOwnListing listing={listing} editParams={{}} />);
       const formattedMessages = actionBar.find(FormattedMessage);
       expect(formattedMessages.length).toEqual(2);
       expect(formattedMessages.at(0).props().id).toEqual('ListingPage.ownClosedListing');
       expect(formattedMessages.at(1).props().id).toEqual('ListingPage.editListing');
     });
     it('shows closed listing status', () => {
-      const actionBar = shallow(<ActionBar isOwnListing={false} isClosed editParams={{}} />);
+      const listing = createListing('listing-closed', {
+        closed: true,
+        state: 'published',
+      });
+      const actionBar = shallow(
+        <ActionBarMaybe isOwnListing={false} listing={listing} editParams={{}} />
+      );
       const formattedMessages = actionBar.find(FormattedMessage);
       expect(formattedMessages.length).toEqual(1);
       expect(formattedMessages.at(0).props().id).toEqual('ListingPage.closedListing');
     });
     it("is missing if listing is not closed or user's own", () => {
+      const listing = createListing('listing-published', {
+        closed: false,
+        state: 'published',
+      });
       const actionBar = shallow(
-        <ActionBar isOwnListing={false} isClosed={false} editParams={{}} />
+        <ActionBarMaybe isOwnListing={false} listing={listing} editParams={{}} />
       );
       expect(actionBar.equals(null)).toEqual(true);
     });

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

@@ -41,7 +41,7 @@ exports[`ListingPage matches snapshot 1`] = `
             <div
               onClick={[Function]}
             >
-              <ActionBar
+              <ActionBarMaybe
                 editParams={
                   Object {
                     "id": "listing1",
@@ -50,8 +50,46 @@ exports[`ListingPage matches snapshot 1`] = `
                     "type": "edit",
                   }
                 }
-                isClosed={false}
                 isOwnListing={false}
+                listing={
+                  Object {
+                    "attributes": Object {
+                      "closed": false,
+                      "customAttributes": 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",
+                    },
+                    "author": Object {
+                      "attributes": Object {
+                        "banned": false,
+                        "profile": Object {
+                          "abbreviatedName": "TT",
+                          "displayName": "user-1 display name",
+                        },
+                      },
+                      "id": UUID {
+                        "uuid": "user-1",
+                      },
+                      "type": "user",
+                    },
+                    "id": UUID {
+                      "uuid": "listing1",
+                    },
+                    "images": Array [],
+                    "type": "listing",
+                  }
+                }
               />
             </div>
             <ResponsiveImage