diff --git a/CHANGELOG.md b/CHANGELOG.md index f952d169..69e34895 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/components/TopbarDesktop/TopbarDesktop.js b/src/components/TopbarDesktop/TopbarDesktop.js index 54f38347..a90b91e5 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.js +++ b/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 ?
: null; - const inboxLink = isAuthenticated ? ( + const inboxLink = authenticatedOnClientSide ? ( { return currentPage === page || isAccountSettingsPage ? css.currentPage : null; }; - const profileMenu = isAuthenticated ? ( + const profileMenu = authenticatedOnClientSide ? ( @@ -109,7 +117,7 @@ const TopbarDesktop = props => { ) : null; - const signupLink = isAuthenticated ? null : ( + const signupLink = isAuthenticatedOrJustHydrated ? null : ( @@ -117,7 +125,7 @@ const TopbarDesktop = props => { ); - const loginLink = isAuthenticated ? null : ( + const loginLink = isAuthenticatedOrJustHydrated ? null : (