Progress
This commit is contained in:
mgabdev
@@ -1,7 +1,7 @@
|
||||
import axios from 'axios'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
|
||||
import Sticky from 'react-stickynode'
|
||||
import classNames from 'classnames/bind'
|
||||
import {
|
||||
followAccount,
|
||||
@@ -26,9 +26,11 @@ const cx = classNames.bind(_s)
|
||||
|
||||
const messages = defineMessages({
|
||||
follow: { id: 'follow', defaultMessage: 'Follow' },
|
||||
following: { id: 'following', defaultMessage: 'Following' },
|
||||
unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
|
||||
requested: { id: 'requested', defaultMessage: 'Requested' },
|
||||
unblock: { id: 'unblock', defaultMessage: 'Unblock' },
|
||||
blocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
follows: { id: 'account.follows', defaultMessage: 'Follows' },
|
||||
profile: { id: 'account.profile', defaultMessage: 'Profile' },
|
||||
@@ -92,6 +94,10 @@ class ProfileHeader extends ImmutablePureComponent {
|
||||
openProfileOptionsPopover: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
stickied: false,
|
||||
}
|
||||
|
||||
handleOpenMore = () => {
|
||||
const { openProfileOptionsPopover, account } = this.props
|
||||
openProfileOptionsPopover({
|
||||
@@ -110,7 +116,7 @@ class ProfileHeader extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
// : todo :
|
||||
makeInfo() {
|
||||
makeInfo = () => {
|
||||
const { account, intl } = this.props
|
||||
|
||||
const info = []
|
||||
@@ -132,12 +138,24 @@ class ProfileHeader extends ImmutablePureComponent {
|
||||
return info
|
||||
}
|
||||
|
||||
onStickyStateChange = (status) => {
|
||||
switch (status.status) {
|
||||
case Sticky.STATUS_FIXED:
|
||||
this.setState({ stickied: true })
|
||||
break;
|
||||
default:
|
||||
this.setState({ stickied: false })
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setOpenMoreNodeRef = (n) => {
|
||||
this.openMoreNode = n
|
||||
}
|
||||
|
||||
render() {
|
||||
const { account, intl } = this.props
|
||||
const { stickied } = this.state
|
||||
|
||||
const tabs = !account ? null : [
|
||||
{
|
||||
@@ -160,6 +178,60 @@ class ProfileHeader extends ImmutablePureComponent {
|
||||
|
||||
const headerSrc = !!account ? account.get('header') : ''
|
||||
const headerMissing = headerSrc.indexOf('/headers/original/missing.png') > -1 || !headerSrc
|
||||
const avatarSize = headerMissing ? '75' : '150'
|
||||
|
||||
let buttonText = ''
|
||||
let buttonOptions = {}
|
||||
|
||||
if (!account) {
|
||||
//
|
||||
} else {
|
||||
if (!account.get('relationship')) {
|
||||
// Wait until the relationship is loaded
|
||||
} else {
|
||||
const isRequested = account.getIn(['relationship', 'requested'])
|
||||
const isBlocking = account.getIn(['relationship', 'blocking'])
|
||||
const isFollowing = account.getIn(['relationship', 'following'])
|
||||
const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
|
||||
|
||||
if (isRequested) {
|
||||
buttonText = intl.formatMessage(messages.requested)
|
||||
buttonOptions = {
|
||||
onClick: this.handleFollow,
|
||||
color: 'primary',
|
||||
backgroundColor: 'tertiary',
|
||||
}
|
||||
} else if (isBlocking) {
|
||||
buttonText = intl.formatMessage(messages.blocked)
|
||||
buttonOptions = {
|
||||
onClick: this.handleBlock,
|
||||
color: 'white',
|
||||
backgroundColor: 'danger',
|
||||
}
|
||||
} else if (isFollowing) {
|
||||
buttonText = intl.formatMessage(messages.following)
|
||||
buttonOptions = {
|
||||
onClick: this.handleFollow,
|
||||
color: 'white',
|
||||
backgroundColor: 'brand',
|
||||
}
|
||||
} else if (isBlockedBy) {
|
||||
//Don't show
|
||||
}
|
||||
else {
|
||||
buttonText = intl.formatMessage(messages.follow)
|
||||
buttonOptions = {
|
||||
onClick: this.handleFollow,
|
||||
color: 'brand',
|
||||
backgroundColor: 'none',
|
||||
outline: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('buttonOptions:', buttonText, buttonOptions)
|
||||
console.log('account: ', account)
|
||||
|
||||
const avatarContainerClasses = cx({
|
||||
circle: 1,
|
||||
@@ -168,78 +240,18 @@ class ProfileHeader extends ImmutablePureComponent {
|
||||
border2PX: 1,
|
||||
})
|
||||
|
||||
const avatarSize = headerMissing ? '75' : '150'
|
||||
const stickyBarContainerClasses = cx({
|
||||
default: 1,
|
||||
flexRow: 1,
|
||||
px15: 1,
|
||||
alignItemsCenter: 1,
|
||||
displayNone: !stickied,
|
||||
})
|
||||
|
||||
let buttonText = ''
|
||||
let buttonOptions = {}
|
||||
|
||||
if (!account) {
|
||||
console.log('no account')
|
||||
} else {
|
||||
if (!account.get('relationship')) {
|
||||
console.log('no relationship')
|
||||
// Wait until the relationship is loaded
|
||||
} else if (account.getIn(['relationship', 'requested'])) {
|
||||
buttonText = intl.formatMessage(messages.requested)
|
||||
buttonOptions = {
|
||||
narrow: true,
|
||||
onClick: this.handleFollow,
|
||||
color: 'primary',
|
||||
backgroundColor: 'tertiary',
|
||||
}
|
||||
} else if (!account.getIn(['relationship', 'blocking'])) {
|
||||
const isFollowing = account.getIn(['relationship', 'following'])
|
||||
const isBlockedBy = account.getIn(['relationship', 'blocked_by'])
|
||||
buttonText = intl.formatMessage(isFollowing ? messages.unfollow : messages.follow)
|
||||
buttonOptions = {
|
||||
narrow: true,
|
||||
onClick: this.handleFollow,
|
||||
color: 'primary',
|
||||
backgroundColor: 'tertiary',
|
||||
disabled: isBlockedBy,
|
||||
}
|
||||
} else if (account.getIn(['relationship', 'blocking'])) {
|
||||
buttonText = intl.formatMessage(messages.unblock)
|
||||
buttonOptions = {
|
||||
narrow: true,
|
||||
onClick: this.handleBlock,
|
||||
color: 'primary',
|
||||
backgroundColor: 'tertiary',
|
||||
}
|
||||
} else {
|
||||
console.log('no nothin')
|
||||
}
|
||||
|
||||
// if (account.get('id') !== me && account.get('relationship', null) !== null) {
|
||||
// const following = account.getIn(['relationship', 'following'])
|
||||
// const requested = account.getIn(['relationship', 'requested'])
|
||||
// const blocking = account.getIn(['relationship', 'blocking'])
|
||||
|
||||
// if (requested || blocking) {
|
||||
// buttonText = intl.formatMessage(requested ? messages.requested : messages.unblock)
|
||||
// buttonOptions = {
|
||||
// narrow: true,
|
||||
// onClick: requested ? this.handleFollow : this.handleBlock,
|
||||
// color: 'primary',
|
||||
// backgroundColor: 'tertiary',
|
||||
// }
|
||||
// } else if (!account.get('moved') || following) {
|
||||
// buttonOptions = {
|
||||
// narrow: true,
|
||||
// outline: !following,
|
||||
// color: !following ? 'brand' : 'white',
|
||||
// backgroundColor: !following ? 'none' : 'brand',
|
||||
// onClick: this.handleFollow,
|
||||
// }
|
||||
// buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
|
||||
// } else {
|
||||
// console.log("SHOW ELSE")
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
console.log('buttonOptions:', buttonText, buttonOptions)
|
||||
console.log('account: ', account)
|
||||
const tabBarContainerClasses = cx({
|
||||
default: 1,
|
||||
displayNone: stickied,
|
||||
})
|
||||
|
||||
|
||||
// : todo : "follows you", "mutual follow"
|
||||
@@ -260,7 +272,7 @@ class ProfileHeader extends ImmutablePureComponent {
|
||||
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary, _s.width100PC].join(' ')}>
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.px15].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.px15, _s.mb5].join(' ')}>
|
||||
<div className={avatarContainerClasses}>
|
||||
<Avatar size={avatarSize} account={account} />
|
||||
</div>
|
||||
@@ -271,87 +283,103 @@ class ProfileHeader extends ImmutablePureComponent {
|
||||
account && account.get('locked') &&
|
||||
<Icon id='lock-filled' height='14px' width='14px' className={[_s.mt10, _s.ml10].join(' ')} />
|
||||
}
|
||||
{
|
||||
/* : todo :
|
||||
account.getIn(['relationship', 'muting'])
|
||||
*/
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.borderBottom1PX, _s.borderColorSecondary, _s.mt5, _s.height53PX].join(' ')}>
|
||||
<div className={[_s.default].join(' ')}>
|
||||
<TabBar tabs={tabs} large />
|
||||
</div>
|
||||
|
||||
{
|
||||
account && account.get('id') === me &&
|
||||
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
|
||||
<Button
|
||||
outline
|
||||
backgroundColor='none'
|
||||
color='brand'
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
|
||||
href=''
|
||||
>
|
||||
<Text
|
||||
color='inherit'
|
||||
weight='bold'
|
||||
size='medium'
|
||||
className={[_s.px15].join(' ')}
|
||||
>
|
||||
Edit Profile
|
||||
</Text>
|
||||
</Button>
|
||||
|
||||
<Sticky enabled onStateChange={this.onStickyStateChange}>
|
||||
<div className={[_s.default, _s.flexRow, _s.backgroundColorSecondary3, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX].join(' ')}>
|
||||
<div className={tabBarContainerClasses}>
|
||||
<TabBar tabs={tabs} large />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
account && account.get('id') !== me &&
|
||||
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
|
||||
<div ref={this.setOpenMoreNodeRef}>
|
||||
<Button
|
||||
outline
|
||||
icon='ellipsis'
|
||||
iconWidth='18px'
|
||||
iconHeight='18px'
|
||||
iconClassName={_s.inheritFill}
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
|
||||
onClick={this.handleOpenMore}
|
||||
/>
|
||||
<div className={stickyBarContainerClasses}>
|
||||
<Avatar size={36} account={account} />
|
||||
<div className={[_s.default, _s.ml10].join(' ')}>
|
||||
<DisplayName account={account} noUsername large />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action='https://chat.gab.com/private-message' method='POST'>
|
||||
{
|
||||
account && account.get('id') === me &&
|
||||
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
|
||||
<Button
|
||||
type='submit'
|
||||
outline
|
||||
icon='chat'
|
||||
iconWidth='18px'
|
||||
iconHeight='18px'
|
||||
iconClassName={_s.inheritFill}
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
|
||||
/>
|
||||
<input type='hidden' value={account.get('username')} name='username' />
|
||||
</form>
|
||||
|
||||
<Button
|
||||
{...buttonOptions}
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
|
||||
>
|
||||
<span className={[_s.px15].join(' ')}>
|
||||
color='brand'
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
|
||||
href=''
|
||||
>
|
||||
<Text
|
||||
color='inherit'
|
||||
weight='bold'
|
||||
size='medium'
|
||||
className={[_s.px15].join(' ')}
|
||||
>
|
||||
{buttonText}
|
||||
Edit Profile
|
||||
</Text>
|
||||
</span>
|
||||
</Button>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{
|
||||
account && account.get('id') !== me &&
|
||||
<div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
|
||||
<div ref={this.setOpenMoreNodeRef}>
|
||||
<Button
|
||||
outline
|
||||
icon='ellipsis'
|
||||
iconWidth='18px'
|
||||
iconHeight='18px'
|
||||
iconClassName={_s.inheritFill}
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
|
||||
onClick={this.handleOpenMore}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form action='https://chat.gab.com/private-message' method='POST'>
|
||||
<Button
|
||||
type='submit'
|
||||
outline
|
||||
icon='chat'
|
||||
iconWidth='18px'
|
||||
iconHeight='18px'
|
||||
iconClassName={_s.inheritFill}
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
|
||||
/>
|
||||
<input type='hidden' value={account.get('username')} name='username' />
|
||||
</form>
|
||||
|
||||
{
|
||||
!!buttonText &&
|
||||
<Button
|
||||
{...buttonOptions}
|
||||
narrow
|
||||
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
|
||||
>
|
||||
<Text
|
||||
color='inherit'
|
||||
weight='bold'
|
||||
size='medium'
|
||||
className={_s.px10}
|
||||
>
|
||||
{buttonText}
|
||||
</Text>
|
||||
</Button>
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</Sticky>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user