From 14ba5096a8d4a870d9e88142c6f7acf335b58359 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Mon, 8 May 2017 14:31:26 +0300
Subject: [PATCH] Use TabNav component in Inbox tabs

 - Use TabNav component
 - Show both tabs always
 - Change copy texts
---
 src/containers/InboxPage/InboxPage.css        | 11 +--
 src/containers/InboxPage/InboxPage.js         | 66 ++++++-------
 .../__snapshots__/InboxPage.test.js.snap      | 94 ++++++++++---------
 src/translations/en.json                      | 12 +--
 4 files changed, 89 insertions(+), 94 deletions(-)

diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css
index d0db0e9f..dc446c26 100644
--- a/src/containers/InboxPage/InboxPage.css
+++ b/src/containers/InboxPage/InboxPage.css
@@ -2,17 +2,8 @@
   margin: 1rem;
 }
 
-.tab {
-  float: left;
+.tabs {
   margin-left: 1rem;
-  font-size: 20px;
-  letter-spacing: -0.5px;
-  text-decoration: none;
-}
-
-.activeTab {
-  font-weight: bold;
-  text-decoration: underline;
 }
 
 .error {
diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js
index 634433dc..e545bc8c 100644
--- a/src/containers/InboxPage/InboxPage.js
+++ b/src/containers/InboxPage/InboxPage.js
@@ -2,7 +2,14 @@ import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { Avatar, NamedLink, NamedRedirect, PageLayout, PaginationLinks } from '../../components';
+import {
+  Avatar,
+  NamedLink,
+  NamedRedirect,
+  PageLayout,
+  PaginationLinks,
+  TabNav,
+} from '../../components';
 import * as propTypes from '../../util/propTypes';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { loadData } from './InboxPage.duck';
@@ -86,8 +93,6 @@ export const InboxPageComponent = props => {
     fetchOrdersOrSalesError,
     pagination,
     transactions,
-    currentUserHasListings,
-    currentUserHasListingsError,
     intl,
     params,
   } = props;
@@ -112,7 +117,7 @@ export const InboxPageComponent = props => {
     );
   };
 
-  const error = fetchOrdersOrSalesError || currentUserHasListingsError
+  const error = fetchOrdersOrSalesError
     ? <p className={css.error}>
         <FormattedMessage id="InboxPage.fetchFailed" />
       </p>
@@ -133,31 +138,36 @@ export const InboxPageComponent = props => {
       />
     : null;
 
+  const tabs = [
+    {
+      text: intl.formatMessage({
+        id: 'InboxPage.ordersTabTitle',
+      }),
+      selected: isOrders,
+      linkProps: {
+        name: 'InboxPage',
+        params: { tab: 'orders' },
+      },
+    },
+    {
+      text: intl.formatMessage({
+        id: 'InboxPage.salesTabTitle',
+      }),
+      selected: !isOrders,
+      linkProps: {
+        name: 'InboxPage',
+        params: { tab: 'sales' },
+      },
+    },
+  ];
+  const nav = <TabNav className={css.tabs} tabs={tabs} />;
+
   return (
     <PageLayout title={title}>
       <h1 className={css.title}>
         <FormattedMessage id="InboxPage.title" />
       </h1>
-      {currentUserHasListings
-        ? <nav>
-            <NamedLink
-              className={css.tab}
-              name="InboxPage"
-              params={{ tab: 'orders' }}
-              activeClassName={isOrders ? css.activeTab : null}
-            >
-              <FormattedMessage id="InboxPage.ordersTabTitle" />
-            </NamedLink>
-            <NamedLink
-              className={css.tab}
-              name="InboxPage"
-              params={{ tab: 'sales' }}
-              activeClassName={!isOrders ? css.activeTab : null}
-            >
-              <FormattedMessage id="InboxPage.salesTabTitle" />
-            </NamedLink>
-          </nav>
-        : null}
+      {nav}
       {error}
       <ul>
         {!fetchInProgress ? transactions.map(toTxItem) : null}
@@ -171,8 +181,6 @@ export const InboxPageComponent = props => {
 InboxPageComponent.defaultProps = {
   fetchOrdersOrSalesError: null,
   pagination: null,
-  currentUserHasListings: false,
-  currentUserHasListingsError: null,
 };
 
 InboxPageComponent.propTypes = {
@@ -184,8 +192,6 @@ InboxPageComponent.propTypes = {
   fetchOrdersOrSalesError: instanceOf(Error),
   pagination: propTypes.pagination,
   transactions: arrayOf(propTypes.transaction).isRequired,
-  currentUserHasListings: bool,
-  currentUserHasListingsError: instanceOf(Error),
 
   // from injectIntl
   intl: intlShape.isRequired,
@@ -197,16 +203,12 @@ const mapStateToProps = state => {
     fetchOrdersOrSalesError,
     pagination,
     transactionRefs,
-    currentUserHasListings,
-    currentUserHasListingsError,
   } = state.InboxPage;
   return {
     fetchInProgress,
     fetchOrdersOrSalesError,
     pagination,
     transactions: getMarketplaceEntities(state, transactionRefs),
-    currentUserHasListings,
-    currentUserHasListingsError,
   };
 };
 
diff --git a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
index 90688d63..959f29fb 100644
--- a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
+++ b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
@@ -6,31 +6,32 @@ exports[`InboxPage matches snapshot 1`] = `
       id="InboxPage.title"
       values={Object {}} />
   </h1>
-  <nav>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      name="InboxPage"
-      params={
+  <TabNav
+    className=""
+    tabs={
+      Array [
         Object {
-          "tab": "orders",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.ordersTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      activeClassName={null}
-      name="InboxPage"
-      params={
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "orders",
+            },
+          },
+          "selected": true,
+          "text": "InboxPage.ordersTabTitle",
+        },
         Object {
-          "tab": "sales",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.salesTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-  </nav>
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "sales",
+            },
+          },
+          "selected": false,
+          "text": "InboxPage.salesTabTitle",
+        },
+      ]
+    } />
   <ul>
     <li>
       <Component
@@ -182,31 +183,32 @@ exports[`InboxPage matches snapshot 3`] = `
       id="InboxPage.title"
       values={Object {}} />
   </h1>
-  <nav>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      activeClassName={null}
-      name="InboxPage"
-      params={
+  <TabNav
+    className=""
+    tabs={
+      Array [
         Object {
-          "tab": "orders",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.ordersTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      name="InboxPage"
-      params={
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "orders",
+            },
+          },
+          "selected": false,
+          "text": "InboxPage.ordersTabTitle",
+        },
         Object {
-          "tab": "sales",
-        }
-      }>
-      <FormattedMessage
-        id="InboxPage.salesTabTitle"
-        values={Object {}} />
-    </withFlattenedRoutes(withRouter(NamedLink))>
-  </nav>
+          "linkProps": Object {
+            "name": "InboxPage",
+            "params": Object {
+              "tab": "sales",
+            },
+          },
+          "selected": true,
+          "text": "InboxPage.salesTabTitle",
+        },
+      ]
+    } />
   <ul>
     <li>
       <Component
diff --git a/src/translations/en.json b/src/translations/en.json
index 4b86283b..96627aa4 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -45,12 +45,12 @@
   "HeroSection.subTitle": "The largest online community to rent music studios",
   "HeroSection.title": "Book Studiotime anywhere",
   "InboxPage.fetchFailed": "Could not load all messages. Please try again.",
-  "InboxPage.noOrdersFound": "No orders found.",
-  "InboxPage.noSalesFound": "No sales found.",
-  "InboxPage.ordersTabTitle": "Guest",
-  "InboxPage.ordersTitle": "Inbox: Orders",
-  "InboxPage.salesTabTitle": "Host",
-  "InboxPage.salesTitle": "Inbox: Sales",
+  "InboxPage.noOrdersFound": "You haven't made any bookings.",
+  "InboxPage.noSalesFound": "Nobody has booked anything from you yet.",
+  "InboxPage.ordersTabTitle": "Bathing",
+  "InboxPage.ordersTitle": "Inbox: Bathing",
+  "InboxPage.salesTabTitle": "Hosting",
+  "InboxPage.salesTitle": "Inbox: Hosting",
   "InboxPage.stateAccepted": "Accepted",
   "InboxPage.statePending": "Pending",
   "InboxPage.stateRejected": "Rejected",