Merge pull request #195 from sharetribe/rename-topbar-mobilemenu

MobileMenu to more informative TopbarMobileMenu

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -1,14 +1,14 @@
 /**
- *  MobileMenu prints the menu content for authenticated user or
+ *  TopbarMobileMenu prints the menu content for authenticated user or
  * shows login actions for those who are not authenticated.
  */
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Avatar, InlineButton, NamedLink } from '../../components';
 
-import css from './MobileMenu.css';
+import css from './TopbarMobileMenu.css';
 
-const MobileMenu = props => {
+const TopbarMobileMenu = props => {
   const { isAuthenticated, currentUserHasListings, name, onLogout } = props;
 
   if (!isAuthenticated) {
@@ -16,15 +16,15 @@ const MobileMenu = props => {
       <div className={css.root}>
         <div className={css.authenticationLinks}>
           <NamedLink name="SignupPage" className={css.signupLink}>
-            <FormattedMessage id="MobileMenu.signupLink" />
+            <FormattedMessage id="TopbarMobileMenu.signupLink" />
           </NamedLink>
           <NamedLink name="LoginPage" className={css.loginLink}>
-            <FormattedMessage id="MobileMenu.loginLink" />
+            <FormattedMessage id="TopbarMobileMenu.loginLink" />
           </NamedLink>
         </div>
         <div className={css.createNewListingLink}>
           <NamedLink name="NewListingPage">
-            <FormattedMessage id="MobileMenu.newListingLink" />
+            <FormattedMessage id="TopbarMobileMenu.newListingLink" />
           </NamedLink>
         </div>
       </div>
@@ -33,7 +33,7 @@ const MobileMenu = props => {
 
   const inboxLink = (
     <NamedLink name="InboxPage" params={{ tab: currentUserHasListings ? 'sales' : 'orders' }}>
-      <FormattedMessage id="MobileMenu.inboxLink" />
+      <FormattedMessage id="TopbarMobileMenu.inboxLink" />
     </NamedLink>
   );
 
@@ -44,7 +44,7 @@ const MobileMenu = props => {
         <div className={css.userInfo}>
           <span>{name}</span>
           <NamedLink className={css.createNewListingLink} name="NewListingPage">
-            <FormattedMessage id="MobileMenu.newListingLink" />
+            <FormattedMessage id="TopbarMobileMenu.newListingLink" />
           </NamedLink>
         </div>
       </div>
@@ -53,22 +53,22 @@ const MobileMenu = props => {
       </div>
       <div className={css.footer}>
         <InlineButton className={css.logoutButton} onClick={onLogout}>
-          <FormattedMessage id="MobileMenu.logoutLink" />
+          <FormattedMessage id="TopbarMobileMenu.logoutLink" />
         </InlineButton>
       </div>
     </div>
   );
 };
 
-MobileMenu.defaultProps = { name: '' };
+TopbarMobileMenu.defaultProps = { name: '' };
 
 const { bool, func, string } = PropTypes;
 
-MobileMenu.propTypes = {
+TopbarMobileMenu.propTypes = {
   isAuthenticated: bool.isRequired,
   currentUserHasListings: bool.isRequired,
   name: string,
   onLogout: func.isRequired,
 };
 
-export default MobileMenu;
+export default TopbarMobileMenu;

src/components/index.js

@@ -23,7 +23,6 @@ import LocationAutocompleteInput from './LocationAutocompleteInput/LocationAutoc
 import Map from './Map/Map';
 import MapPanel from './MapPanel/MapPanel';
 import Menu from './Menu/Menu';
-import MobileMenu from './MobileMenu/MobileMenu';
 import Modal from './Modal/Modal';
 import ModalInMobile from './ModalInMobile/ModalInMobile';
 import NamedLink from './NamedLink/NamedLink';
@@ -41,6 +40,7 @@ import StripeBankAccountToken from './StripeBankAccountToken/StripeBankAccountTo
 import TabNav from './TabNav/TabNav';
 import Tabs from './Tabs/Tabs';
 import TopbarDesktop from './TopbarDesktop/TopbarDesktop';
+import TopbarMobileMenu from './TopbarMobileMenu/TopbarMobileMenu';
 import ValidationError from './ValidationError/ValidationError';
 
 export {
@@ -71,7 +71,6 @@ export {
   Map,
   MapPanel,
   Menu,
-  MobileMenu,
   Modal,
   ModalInMobile,
   NamedLink,
@@ -89,5 +88,6 @@ export {
   TabNav,
   Tabs,
   TopbarDesktop,
+  TopbarMobileMenu,
   ValidationError,
 };

src/containers/Topbar/Topbar.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { intlShape, injectIntl } from 'react-intl';
 import { pickBy } from 'lodash';
 import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
-import { FlatButton, MobileMenu, Modal, NamedLink, TopbarDesktop } from '../../components';
+import { FlatButton, Modal, NamedLink, TopbarDesktop, TopbarMobileMenu } from '../../components';
 import { SearchForm } from '../../containers';
 import { withFlattenedRoutes } from '../../util/contextHelpers';
 import { parse, stringify } from '../../util/urlHelpers';
@@ -101,7 +101,7 @@ class TopbarComponent extends Component {
     const isMobileMenuOpen = mobilemenu === 'open';
     const isMobileSearchOpen = mobilesearch === 'open';
     const mobileMenu = (
-      <MobileMenu
+      <TopbarMobileMenu
         isAuthenticated={isAuthenticated}
         currentUserHasListings={currentUserHasListings}
         name={name}

src/translations/en.json

@@ -77,11 +77,6 @@
   "LoginForm.logIn": "Log in",
   "LoginForm.passwordLabel": "Password",
   "LoginForm.passwordRequired": "required",
-  "MobileMenu.inboxLink": "Inbox",
-  "MobileMenu.loginLink": "Log in",
-  "MobileMenu.logoutLink": "Log out",
-  "MobileMenu.newListingLink": "+ Add your sauna",
-  "MobileMenu.signupLink": "Sign up",
   "Modal.closeModal": "Close modal",
   "OrderDetailsPanel.orderAcceptedStatus": "{providerName} accepted the booking.",
   "OrderDetailsPanel.orderAcceptedTitle": "You have booked {title}.",
@@ -193,5 +188,10 @@
   "TopbarDesktop.inbox": "Inbox",
   "TopbarDesktop.login": "Log in",
   "TopbarDesktop.logo": "Logo",
-  "TopbarDesktop.signup": "Sign up"
+  "TopbarDesktop.signup": "Sign up",
+  "TopbarMobileMenu.inboxLink": "Inbox",
+  "TopbarMobileMenu.loginLink": "Log in",
+  "TopbarMobileMenu.logoutLink": "Log out",
+  "TopbarMobileMenu.newListingLink": "+ Add your sauna",
+  "TopbarMobileMenu.signupLink": "Sign up"
 }