Added follow, following count to UserInfoPopover

• Added:
- follow, following count to UserInfoPopover
- return null if no current user logged in

app/javascript/gabsocial/components/popover/user_info_popover.js

@@ -1,31 +1,41 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { NavLink } from 'react-router-dom'
+import { FormattedMessage } from 'react-intl'
+import { makeGetAccount } from '../../selectors'
+import { shortNumberFormat } from '../../utils/numbers'
+import { me } from '../../initial_state'
 import PopoverLayout from './popover_layout'
 import AccountActionButton from '../account_action_button'
 import Avatar from '../avatar'
 import DisplayName from '../display_name'
+import Text from '../text'
 
-export default class UserInfoPopover extends ImmutablePureComponent {
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, props.accountId),
+})
+
+export default
+@connect(mapStateToProps)
+class UserInfoPopover extends ImmutablePureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
+    account: ImmutablePropTypes.map,
+    accountId: PropTypes.string.isRequired,
     isXS: PropTypes.bool,
   }
 
   render() {
     const { account, isXS } = this.props
 
-    if (isXS) return null
+    if (isXS || !me) return null
     
     const content = !account ? null : { __html: account.get('note_emojified') }
     const to = !account ? '' : `/${account.get('acct')}`
-    
-    // : todo : is remote
 
     return (
       <PopoverLayout width={280}>
-        <div className={[_s.default, _s.width100PC, _s.px15, _s.py15].join(' ')}>
+        <div className={[_s.default, _s.width100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
           
           <div className={[_s.default, _s.flexRow].join(' ')}>
             <NavLink
@@ -45,6 +55,31 @@ export default class UserInfoPopover extends ImmutablePureComponent {
             <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
           </div>
 
+          <div className={[_s.default, _s.flexRow, _s.mt10].join(' ')}>
+            <NavLink
+              to={`${to}/followers`}
+              className={[_s.default, _s.flexRow, _s.mr10, _s.noUnderline, _s.colorPrimary, _s.underline_onHover].join(' ')}
+            >
+              <Text weight='extraBold' color='primary'>
+                {shortNumberFormat(account.get('followers_count'))}&nbsp;
+              </Text>
+              <Text color='secondary'>
+                <FormattedMessage id='account.followers' defaultMessage='Followers' />
+              </Text>
+            </NavLink>
+            <NavLink
+              to={`${to}/following`}
+              className={[_s.default, _s.flexRow, _s.noUnderline, _s.colorPrimary, _s.underline_onHover].join(' ')}
+            >
+              <Text weight='extraBold' color='primary'>
+                {shortNumberFormat(account.get('following_count'))}&nbsp;
+              </Text>
+              <Text color='secondary'>
+                <FormattedMessage id='account.follows' defaultMessage='Following' />
+              </Text>
+            </NavLink>
+          </div>
+
         </div>
       </PopoverLayout>
     )