Merge pull request #1154 from sharetribe/fix-topbar-inbox-hydrate-bug

Rehydrate bug: existing DOM elements were populated incorrectly

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [fix] Rehydrate bug: existing DOM elements were populated incorrectly
+  [#1154](https://github.com/sharetribe/flex-template-web/pull/1154)
 - [fix] Don't send personal id number or business profile to Stripe API when creating a Stripe
   customer if they are not required in `stripe-config.js`. This happened e.g. if someone filled the
   form after selecting the US and then before sending changed the country to Finland.

src/components/TopbarDesktop/TopbarDesktop.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'react-intl';
 import classNames from 'classnames';
@@ -32,6 +32,14 @@ const TopbarDesktop = props => {
     onSearchSubmit,
     initialSearchFormValues,
   } = props;
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const authenticatedOnClientSide = mounted && isAuthenticated;
+  const isAuthenticatedOrJustHydrated = isAuthenticated || !mounted;
 
   const classes = classNames(rootClassName || css.root, className);
 
@@ -47,7 +55,7 @@ const TopbarDesktop = props => {
 
   const notificationDot = notificationCount > 0 ? <div className={css.notificationDot} /> : null;
 
-  const inboxLink = isAuthenticated ? (
+  const inboxLink = authenticatedOnClientSide ? (
     <NamedLink
       className={css.inboxLink}
       name="InboxPage"
@@ -66,7 +74,7 @@ const TopbarDesktop = props => {
     return currentPage === page || isAccountSettingsPage ? css.currentPage : null;
   };
 
-  const profileMenu = isAuthenticated ? (
+  const profileMenu = authenticatedOnClientSide ? (
     <Menu>
       <MenuLabel className={css.profileMenuLabel} isOpenClassName={css.profileMenuIsOpen}>
         <Avatar className={css.avatar} user={currentUser} disableProfileLink />
@@ -109,7 +117,7 @@ const TopbarDesktop = props => {
     </Menu>
   ) : null;
 
-  const signupLink = isAuthenticated ? null : (
+  const signupLink = isAuthenticatedOrJustHydrated ? null : (
     <NamedLink name="SignupPage" className={css.signupLink}>
       <span className={css.signup}>
         <FormattedMessage id="TopbarDesktop.signup" />
@@ -117,7 +125,7 @@ const TopbarDesktop = props => {
     </NamedLink>
   );
 
-  const loginLink = isAuthenticated ? null : (
+  const loginLink = isAuthenticatedOrJustHydrated ? null : (
     <NamedLink name="LoginPage" className={css.loginLink}>
       <span className={css.login}>
         <FormattedMessage id="TopbarDesktop.login" />