Progress

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

@@ -1,5 +1,6 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import { Manager, Reference, Popper } from 'react-popper'
 import classnames from 'classnames/bind'
 import Overlay from 'react-overlays/lib/Overlay'
 import spring from 'react-motion/lib/spring'
@@ -52,14 +53,16 @@ class PopoverBase extends ImmutablePureComponent {
     isModalOpen: PropTypes.bool.isRequired,
     onOpen: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
-    popoverPlacement: PropTypes.string,
+    position: PropTypes.string,
     openPopoverType: PropTypes.number,
     openedViaKeyboard: PropTypes.bool,
     visible: PropTypes.bool,
+    targetRef: PropTypes.node,
   }
 
   static defaultProps = {
     title: 'Menu',
+    position: 'bottom',
   }
 
   state = {
@@ -124,7 +127,19 @@ class PopoverBase extends ImmutablePureComponent {
   }
 
   render() {
-    const { icon, children, visible, items, size, title, disabled, popoverPlacement, openPopoverType, openedViaKeyboard } = this.props
+    const {
+      icon,
+      children,
+      visible,
+      items,
+      size,
+      title,
+      disabled,
+      position,
+      openPopoverType,
+      openedViaKeyboard,
+      targetRef,
+    } = this.props
     const open = this.state.id === openPopoverType
 
     const containerClasses = cx({
@@ -134,12 +149,24 @@ class PopoverBase extends ImmutablePureComponent {
     })
 
     return (
-      <div onKeyDown={this.handleKeyDown} className={containerClasses}>
-        { /* <div show={open} placement={popoverPlacement} target={this.findTarget}>
-          <PopoverMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
-          {children}
-        </div> */}
-      </div>
+      <Manager>
+        <Popper
+          placement={position}
+          referenceElement={targetRef}
+        >
+          {({ ref, style, placement, arrowProps }) => (
+            <div ref={ref} style={style} data-placement={placement}>
+              <div ref={arrowProps.ref} style={arrowProps.style} />
+              <div data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
+              {children}
+                { /* <div show={open} placement={popoverPlacement} target={this.findTarget}>
+                  <PopoverMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+                </div> */}
+              </div>
+            </div>
+          )}
+        </Popper>
+      </Manager>
     )
   }
 

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

@@ -24,7 +24,7 @@ const POPOVER_COMPONENTS = {
   SIDEBAR_MORE: () => Promise.resolve({ default: SidebarMorePopover }),
   STATUS_OPTIONS: () => Promise.resolve({ default: StatusOptionsPopover }),
   STATUS_VISIBILITY: () => Promise.resolve({ default: StatusVisibilityPopover }),
-  USER_INFO: () => UserInfoPopover,
+  USER_INFO: () => Promise.resolve({ default: UserInfoPopover }),
 }
 
 const mapStateToProps = state => ({
@@ -148,26 +148,45 @@ class PopoverRoot extends PureComponent {
     }
   }
 
-  renderError = (props) => {
-    return <BundleModalError />
+  renderError = () => {
+    return null
+  }
+
+  renderLoading = () => {
+    return null
   }
 
   render() {
-    const { type, style, placement } = this.props
+    const {
+      type,
+      style,
+      props,
+    } = this.props
     const { mounted } = this.state
     const visible = !!type
 
-    console.log("popover root - type, visible:", type, visible)
-
-    // <PopoverBase className={`popover-menu ${placement}`} visible={visible} ref={this.setRef}>
-    //     {
-    //       visible &&
-    //       <UserInfoPopover />
-    //     }
-    //   </PopoverBase>
+    console.log("popover root - type, visible:", type, visible, props, POPOVER_COMPONENTS[type])
 
     return (
-      <div></div>
+      <PopoverBase
+        visible={visible}
+        ref={this.setRef}
+        {...props}
+      >
+        {
+          visible &&
+          <Bundle
+            fetchComponent={POPOVER_COMPONENTS[type]}
+            loading={this.renderLoading(type)}
+            error={this.renderError}
+            renderDelay={200}
+          >
+            {
+              (SpecificComponent) => <SpecificComponent {...props} />
+            }
+          </Bundle>
+        }
+      </PopoverBase>
     )
   }
 }

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

@@ -1,11 +1,62 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { shortNumberFormat } from '../../utils/numbers'
 import PopoverLayout from './popover_layout'
+import Avatar from '../avatar'
+import Button from '../button'
+import DisplayName from '../display_name'
 import Text from '../text'
 
-export default class UserInfoPopover extends PureComponent {
+export default class UserInfoPopover extends ImmutablePureComponent {
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+  }
+
   render() {
+    const { account } = this.props
+
+    const content = !account ? null : { __html: account.get('note_emojified') }
+
     return (
       <PopoverLayout>
-        <Text>testing</Text>
+        <div className={[_s.default, _s.px15, _s.py15].join(' ')} style={{width: '260px'}}>
+          
+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div className={[_s.default, _s.flexGrow1].join(' ')}>
+              <Avatar account={account} size={42} />
+              <DisplayName account={account} multiline noHover />
+            </div>
+            <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
+              <Button
+                color='white'
+              >
+                <Text size='medium' weight='bold' color='inherit'>
+                  Following
+                </Text>
+              </Button>
+            </div>
+          </div>
+
+          <div className={[_s.default, _s.my10].join(' ')}>
+            <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
+          </div>
+
+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div>
+              <Text size='small'>
+                {shortNumberFormat(account.get('following_count'))}
+                Following
+              </Text>
+            </div>
+            <div>
+              <Text size='small'>
+                {shortNumberFormat(account.get('followers_count'))}
+                Followers
+              </Text>
+            </div>
+          </div>
+
+        </div>
       </PopoverLayout>
     )
   }