gab-social/app/javascript/gabsocial/components/profile_header.js

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl } from 'react-intl'
import Sticky from 'react-stickynode'
import {
  CX,
  POPOVER_PROFILE_OPTIONS,
  PLACEHOLDER_MISSING_HEADER_SRC,
  MODAL_EDIT_PROFILE,
  BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import {
  addShortcut,
  removeShortcut,
} from '../actions/shortcuts'
import { openModal } from '../actions/modal'
import { openPopover } from '../actions/popover'
import { me } from '../initial_state'
import AccountActionButton from './account_action_button'
import Avatar from './avatar'
import Button from './button'
import DisplayName from './display_name'
import Image from './image'
import TabBar from './tab_bar'
import Pills from './pills'
import Text from './text'
import Responsive from '../features/ui/util/responsive_component';
import ProfileHeaderXSPlaceholder from './placeholder/profile_header_xs_placeholder'

class ProfileHeader extends ImmutablePureComponent {

  state = {
    stickied: false,
  }

  handleOnEditProfile = () => {
    this.props.onEditProfile()
  }

  handleOpenMore = () => {
    const { openProfileOptionsPopover, account } = this.props

    openProfileOptionsPopover({
      account,
      targetRef: this.openMoreNode,
      position: 'left',
    })
  }

  handleToggleShortcut = () => {
    const { account, isShortcut } = this.props
    const accountId = !!account ? account.get('id') : null
    
    if (!accountId) return

    if (isShortcut) {
      this.props.onRemoveShortcut(accountId)
    } else {
      this.props.onAddShortcut(accountId)
    }
  }

  onStickyStateChange = (status) => {
    if (status.status === Sticky.STATUS_FIXED) {
      this.setState({ stickied: true })
    } else {
      this.setState({ stickied: false })
    }
  }

  setOpenMoreNodeRef = (n) => {
    this.openMoreNode = n
  }

  render() {
    const {
      account,
      children,
      intl,
      isShortcut,
      isXS
    } = this.props
    const { stickied } = this.state

    if (isXS && !account) {
      return (
        <div className={[_s.d, _s.z1, _s.w100PC].join(' ')}>
          <div className={[_s.d, _s.z1, _s.w100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
            <div className={[_s.d, _s.w100PC].join(' ')}>
              <ProfileHeaderXSPlaceholder />
            </div>
          </div>
        </div>
      )
    }

    const tabs = !account ? null : [
      {
        to: `/${account.get('acct')}`,
        title: intl.formatMessage(messages.timeline),
      },
      {
        to: `/${account.get('acct')}/comments`,
        title: intl.formatMessage(messages.comments),
      },
      {
        to: `/${account.get('acct')}/photos`,
        title: intl.formatMessage(messages.photos),
      },
      {
        to: `/${account.get('acct')}/videos`,
        title: intl.formatMessage(messages.videos),
      },
    ]

    const isMyProfile = !account ? false : account.get('id') === me
    if (isMyProfile) {
      tabs.push({
        to: `/${account.get('acct')}/bookmarks`,
        title: intl.formatMessage(messages.bookmarks),
      })
    }

    const headerSrc = !!account ? account.get('header') : undefined
    const headerMissing = !headerSrc ? true : headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
    const avatarSize = headerMissing ? 75 : 150
    const top = headerMissing ? -46 : -380

    const avatarContainerClasses = CX({
      d: 1,
      circle: 1,
      mtNeg75PX: !headerMissing,
      boxShadowProfileAvatar: !headerMissing,
    })

    const stickyBarContainerClasses = CX({
      d: 1,
      flexRow: 1,
      px15: 1,
      aiCenter: 1,
      displayNone: !stickied,
    })

    const tabBarContainerClasses = CX({
      d: 1,
      displayNone: stickied,
    })

    const mobileAvatarContainerClasses = CX({
      d: 1,
      circle: 1,
      boxShadowProfileAvatar: 1,
      mtNeg50PX: !headerMissing,
    })

    const mobileDescriptionContainerClasses = CX({
      d: 1,
      w100PC: 1,
      px15: 1,
      mt5: !!me,
      mb10: 1,
      pt15: !!me,
      pb10: 1,
    })

    return (
      <div className={[_s.d, _s.z1, _s.w100PC].join(' ')}>
        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
          <div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>

            <div className={[_s.d, _s.w100PC].join(' ')}>
              {
                !headerMissing &&
                <div className={[_s.d, _s.h200PX, _s.px10, _s.w100PC, _s.mt10, _s.overflowHidden].join(' ')}>
                  <Image
                    alt={intl.formatMessage(messages.headerPhoto)}
                    className={[_s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.h100PC].join(' ')}
                    src={headerSrc}
                    expandOnClick
                  />
                </div>
              }
              {
                headerMissing &&
                <div className={[_s.d, _s.h20PX, _s.w100PC].join(' ')} />
              }

              <div className={[_s.d, _s.w100PC].join(' ')}>

                <div className={[_s.d, _s.aiCenter, _s.px15, _s.mb5].join(' ')}>
                  <div className={mobileAvatarContainerClasses}>
                    <Avatar size={100} account={account} noHover expandOnClick />
                  </div>

                  <div className={[_s.d, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
                    <DisplayName
                      account={account}
                      isMultiline
                      isLarge
                      isCentered
                      noHover
                    />
                  </div>
                </div>


                <div className={[_s.d, _s.bgPrimary, _s.aiCenter].join(' ')}>
                  {
                    account && account.get('id') === me &&
                    <div className={[_s.d,_s.py5].join(' ')}>
                      <Button
                        isOutline
                        backgroundColor='none'
                        color='brand'
                        className={[_s.jcCenter, _s.aiCenter].join(' ')}
                        onClick={this.handleOnEditProfile}
                      >
                        <Text color='inherit' weight='bold' size='medium' className={_s.px15}>
                          {intl.formatMessage(messages.editProfile)}
                        </Text>
                      </Button>
                    </div>
                  }

                  {
                    account && account.get('id') !== me && !!me &&
                    <div className={[_s.d, _s.flexRow, _s.py5].join(' ')}>
                      
                      <Button
                        icon={isShortcut ? 'star' : 'star-outline'}
                        iconSize='18px'
                        color='brand'
                        backgroundColor='none'
                        className={[_s.jcCenter, _s.aiCenter, _s.px10, _s.mr15].join(' ')}
                        onClick={this.handleToggleShortcut}
                      />

                      <div className={[_s.d, _s.flexRow, _s.mr15].join(' ')}>
                        <AccountActionButton account={account} />
                      </div>

                      <div>
                        <Button
                          isOutline
                          icon='ellipsis'
                          iconSize='18px'
                          iconClassName={_s.inheritFill}
                          color='brand'
                          backgroundColor='none'
                          className={[_s.jcCenter, _s.aiCenter, _s.ml10, _s.px10].join(' ')}
                          onClick={this.handleOpenMore}
                          buttonRef={this.setOpenMoreNodeRef}
                        />
                      </div>

                    </div>
                  }

                  <div className={mobileDescriptionContainerClasses}>
                    {children}
                  </div>

                  <div className={[_s.d, _s.mt10, _s.mb10, _s.pt5, _s.w100PC, _s.pr10].join(' ')}>
                    <Pills pills={tabs} />
                  </div>
                </div>
              </div>
            </div>
          </div>

        </Responsive>

        { /** desktop */ }
        <Responsive min={BREAKPOINT_EXTRA_SMALL}>
          <Sticky top={top} enabled onStateChange={this.onStickyStateChange}>
            <div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>

              <div className={[_s.d, _s.w1015PX].join(' ')}>
                {
                  !headerMissing &&
                  <div className={[_s.d, _s.h350PX, _s.w100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
                    <Image
                      alt={intl.formatMessage(messages.headerPhoto)}
                      className={_s.h100PC}
                      src={headerSrc}
                      expandOnClick
                    />
                  </div>
                }
                {
                  headerMissing &&
                  <div className={[_s.d, _s.h20PX, _s.w100PC].join(' ')} />
                }

                <div className={[_s.d, _s.w100PC].join(' ')}>

                  <div className={[_s.d, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
                    <div className={avatarContainerClasses}>
                      {
                        account &&
                        <Avatar size={avatarSize} account={account} noHover expandOnClick />
                      }
                      {
                        !account &&
                        <div
                          className={[_s.d, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
                          style={{
                            width: `${avatarSize}px`,
                            height: `${avatarSize}px`,
                          }}
                        />
                      }
                    </div>

                    <div className={[_s.d, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
                      <DisplayName account={account} isMultiline isLarge noHover />
                    </div>
                  </div>


                  <div className={[_s.d, _s.flexRow, _s.bgPrimary, _s.h53PX].join(' ')}>
                    <div className={tabBarContainerClasses}>
                      <TabBar tabs={tabs} isLarge />
                    </div>

                    <div className={stickyBarContainerClasses}>
                      <Avatar size={36} account={account} noHover />
                      <div className={[_s.d, _s.ml10].join(' ')}>
                        <DisplayName account={account} noUsername noRelationship noHover isLarge />
                      </div>
                    </div>

                    {
                      account && account.get('id') === me &&
                      <div className={[_s.d, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
                        <Button
                          isOutline
                          backgroundColor='none'
                          color='brand'
                          className={[_s.jcCenter, _s.aiCenter].join(' ')}
                          onClick={this.handleOnEditProfile}
                        >
                          <Text color='inherit' weight='bold' size='medium' className={_s.px15}>
                            {intl.formatMessage(messages.editProfile)}
                          </Text>
                        </Button>
                      </div>
                    }

                    {
                      account && account.get('id') !== me &&
                      <div className={[_s.d, _s.flexRow, _s.mlAuto, _s.pb2, _s.pt7].join(' ')}>
                        {
                          !!me &&
                          <div className={[_s.d, _s.flexRow, _s.mr5, _s.aiCenter, _s.jcCenter].join(' ')}>
                            <Button
                              icon={isShortcut ? 'star' : 'star-outline'}
                              iconSize='18px'
                              color='brand'
                              backgroundColor='none'
                              className={[_s.jcCenter, _s.aiCenter, _s.px10, _s.mr10].join(' ')}
                              onClick={this.handleToggleShortcut}
                            />
                            <Button
                              isOutline
                              icon='ellipsis'
                              iconSize='18px'
                              iconClassName={_s.inheritFill}
                              color='brand'
                              backgroundColor='none'
                              className={[_s.jcCenter, _s.aiCenter, _s.mr15, _s.px10].join(' ')}
                              onClick={this.handleOpenMore}
                              buttonRef={this.setOpenMoreNodeRef}
                            />
                          </div>
                        }

                        <div className={[_s.d, _s.flexRow, _s.pb2].join(' ')}>
                          <AccountActionButton account={account} />
                        </div>

                      </div>
                    }
                  </div>
                </div>
              </div>
            </div>
          </Sticky>
        </Responsive>
      </div>
    )
  }

}

const mapStateToProps = (state, { account }) => {
  const accountId = account ? account.get('id') : null
  const shortcuts = state.getIn(['shortcuts', 'items'])
  const isShortcut = !!shortcuts.find((s) => {
    return s.get('shortcut_id') == accountId && s.get('shortcut_type') === 'account'
  })
  return { isShortcut }
}

const messages = defineMessages({
  followers: { id: 'account.followers', defaultMessage: 'Followers' },
  follows: { id: 'account.follows', defaultMessage: 'Following' },
  profile: { id: 'account.profile', defaultMessage: 'Profile' },
  headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
  timeline: { id: 'timeline', defaultMessage: 'Timeline' },
  comments: { id: 'comments', defaultMessage: 'Comments' },
  photos: { id: 'photos', defaultMessage: 'Photos' },
  videos: { id: 'videos', defaultMessage: 'Videos' },
  bookmarks: { id: 'bookmarks', defaultMessage: 'Bookmarks' },
  accountFollowsYou: { id: 'account.follows_you', defaultMessage: 'Follows you' },
  editProfile: { id: "account.edit_profile", defaultMessage: "Edit profile" },
})

const mapDispatchToProps = (dispatch) => ({
  openProfileOptionsPopover(props) {
    dispatch(openPopover(POPOVER_PROFILE_OPTIONS, props))
  },
  onEditProfile() {
    dispatch(openModal(MODAL_EDIT_PROFILE))
  },
  onAddShortcut(accountId) {
    dispatch(addShortcut('account', accountId))
  },
  onRemoveShortcut(accountId) {
    dispatch(removeShortcut(null, 'account', accountId))
  },
});

ProfileHeader.propTypes = {
  account: ImmutablePropTypes.map,
  children: PropTypes.any,
  intl: PropTypes.object.isRequired,
  onAddShortcut: PropTypes.func.isRequired,
  onEditProfile: PropTypes.func.isRequired,
  onRemoveShortcut: PropTypes.func.isRequired,
  openProfileOptionsPopover: PropTypes.func.isRequired,
  isShortcut: PropTypes.bool.isRequired,
  isXS: PropTypes.bool,
}

export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ProfileHeader))