maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rehydrate bug: existing DOM elements were populated incorrectly

Browse source
This commit is contained in:
Vesa Luusua 2019-08-16 17:10:43 +03:00
parent f0fdc46ef3
commit 468b387499
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/TopbarDesktop/TopbarDesktop.js
View file

@ -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" />