diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index 0e1627460..5295ae044 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -18,8 +18,8 @@ export class App extends Component { - this.props.uiFactory.createHomePage(location) + render={({ location, history }) => + this.props.uiFactory.createHomePage(location, history) } /> ): ReactElement { + public createHomePage( + location: H.Location, + history: H.History + ): ReactElement { return ( ); } diff --git a/frontend/src/component/pages/HomePage.tsx b/frontend/src/component/pages/HomePage.tsx index b7dc427ac..796a0c90d 100644 --- a/frontend/src/component/pages/HomePage.tsx +++ b/frontend/src/component/pages/HomePage.tsx @@ -9,7 +9,7 @@ import { Modal } from '../ui/Modal'; import { ExtPromo } from './shared/promos/ExtPromo'; import { validateLongLinkFormat } from '../../validators/LongLink.validator'; import { validateCustomAliasFormat } from '../../validators/CustomAlias.validator'; -import { Location } from 'history'; +import { Location, History } from 'history'; import { AuthService } from '../../service/Auth.service'; import { IBrowserExtensionService } from '../../service/extensionService/BrowserExtension.service'; import { VersionService } from '../../service/Version.service'; @@ -61,10 +61,12 @@ interface Props { analyticsService: AnalyticsService; store: Store; location: Location; + history: History; } interface State { isUserSignedIn?: boolean; + shouldShowAdminButton?: boolean; shouldShowPromo?: boolean; longLink?: string; alias?: string; @@ -108,11 +110,19 @@ export class HomePage extends Component { this.setState({ isUserSignedIn: true }); + this.showAdminButton(); this.handleStateChange(); this.autoFillLongLink(); this.autoShowChangeLog(); } + private showAdminButton = async () => { + const decision = await this.props.featureDecisionService.includeAdminPage(); + this.setState({ + shouldShowAdminButton: decision + }); + }; + autoShowChangeLog = async () => { const showChangeLog = await this.props.featureDecisionService.includeViewChangeLogButton(); if (!showChangeLog) { @@ -194,8 +204,10 @@ export class HomePage extends Component { } requestSignIn = () => { + // TODO(issue#833): make feature Toggle handle dynamic rendering condition. this.setState({ - isUserSignedIn: false + isUserSignedIn: false, + shouldShowAdminButton: false }); this.props.authService.signOut(); this.showSignInModal(); @@ -214,6 +226,10 @@ export class HomePage extends Component { this.requestSignIn(); }; + handleAdminButtonClick = () => { + this.props.history.push('/admin'); + }; + handleLongLinkChange = (newLongLink: string) => { this.props.store.dispatch(updateLongLink(newLongLink)); }; @@ -356,7 +372,9 @@ export class HomePage extends Component { onSearchBarInputChange={this.handleSearchBarInputChange} autoCompleteSuggestions={this.state.autoCompleteSuggestions} shouldShowSignOutButton={this.state.isUserSignedIn} + shouldShowAdminButton={this.state.shouldShowAdminButton} onSignOutButtonClick={this.handleSignOutButtonClick} + onAdminButtonClick={this.handleAdminButtonClick} />
void; autoCompleteSuggestions?: Array; shouldShowSignOutButton?: boolean; + shouldShowAdminButton?: boolean; onSignOutButtonClick: () => void; + onAdminButtonClick: () => void; } export class Header extends Component { @@ -24,13 +26,20 @@ export class Header extends Component { autoCompleteSuggestions: this.props.autoCompleteSuggestions })}
- {this.props.shouldShowSignOutButton && ( -
- -
- )} + );