diff --git a/src/chrome/MainSidebar.js b/src/chrome/MainSidebar.js index 33014e432..6d0c8645e 100644 --- a/src/chrome/MainSidebar.js +++ b/src/chrome/MainSidebar.js @@ -33,7 +33,7 @@ import React from 'react'; import NotificationsHub from '../NotificationsHub.js'; import {selectPlugin} from '../reducers/connections.js'; import {setActiveSheet} from '../reducers/application.js'; -import UserAccount from './UserAccount.js'; +import UserAccount from './UserAccount.tsx'; import {connect} from 'react-redux'; const ListItem = styled('div')(({active}) => ({ diff --git a/src/chrome/UserAccount.js b/src/chrome/UserAccount.tsx similarity index 64% rename from src/chrome/UserAccount.js rename to src/chrome/UserAccount.tsx index c4c44d807..4a412ca14 100644 --- a/src/chrome/UserAccount.js +++ b/src/chrome/UserAccount.tsx @@ -5,15 +5,16 @@ * @format */ -import type {User} from '../reducers/user'; -import type {ActiveSheet} from '../reducers/application'; +import {User} from '../reducers/user'; +import {ActiveSheet} from '../reducers/application'; -import {styled, PureComponent, FlexRow, Glyph, Text, colors} from 'flipper'; +import {styled, FlexRow, Glyph, Text, colors} from 'flipper'; import {logout} from '../reducers/user'; import {setActiveSheet, ACTIVE_SHEET_SIGN_IN} from '../reducers/application.js'; import {connect} from 'react-redux'; import electron from 'electron'; import {findDOMNode} from 'react-dom'; +import React, {PureComponent} from 'react'; const Container = styled(FlexRow)({ alignItems: 'center', @@ -40,16 +41,22 @@ const UserName = styled(Text)({ textOverflow: 'ellipsis', }); -type UserAccountProps = {| - user: User, +type OwnProps = {}; + +type DispatchFromProps = { logout: () => void, setActiveSheet: (activeSheet: ActiveSheet) => void, -|}; +}; -class UserAccount extends PureComponent { - _ref: ?Element; +type StateFromProps = { + user: User, +}; - setRef = (ref: React.ElementRef<*>) => { +type Props = OwnProps & DispatchFromProps & StateFromProps; +class UserAccount extends PureComponent { + _ref: Element | null | undefined; + + setRef = (ref: React.ReactInstance) => { const element = findDOMNode(ref); if (element instanceof HTMLElement) { this._ref = element; @@ -57,7 +64,7 @@ class UserAccount extends PureComponent { }; showDetails = () => { - const menuTemplate: Array = [ + const menuTemplate: Array = [ { label: 'Sign Out', click: this.props.logout, @@ -65,19 +72,26 @@ class UserAccount extends PureComponent { ]; const menu = electron.remote.Menu.buildFromTemplate(menuTemplate); - const {bottom, left} = this._ref ? this._ref.getBoundingClientRect() : {}; + const {bottom = null, left = null} = this._ref + ? this._ref.getBoundingClientRect() + : {}; menu.popup({ window: electron.remote.getCurrentWindow(), + // @ts-ignore async is not part of public api in electron menu popup async: true, - x: parseInt(left, 10), - y: parseInt(bottom, 10) + 8, + x: left || 10, + y: (bottom || 10) + 8, }); }; render() { - return this.props.user?.name ? ( + const {user} = this.props; + const name = user ? user.name : null; + return name ? ( - + {this.props.user.name} @@ -96,7 +110,9 @@ class UserAccount extends PureComponent { } } -export default connect( +// @TODO: TS_MIGRATION +type Store = any; +export default connect( ({user}) => ({ user, }),