Progress
This commit is contained in:
mgabdev
@@ -4,7 +4,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { HotKeys } from 'react-hotkeys'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import StatusContainer from '../../../containers/status_container'
|
||||
import AccountContainer from '../../../containers/account_container'
|
||||
import Avatar from '../../../components/avatar'
|
||||
import Icon from '../../../components/icon'
|
||||
import Text from '../../../components/text'
|
||||
@@ -46,269 +45,95 @@ class Notification extends ImmutablePureComponent {
|
||||
type: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
renderMention = () => {
|
||||
const { intl, accounts, createdAt, statusId } = this.props
|
||||
|
||||
if (accounts.size === 0) return null
|
||||
const account = accounts.get(0)
|
||||
|
||||
// : todo : render statuscontainer or commentcontainer
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.px10].join(' ')}>
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
|
||||
|
||||
<Icon id='comment' height='20px' width='20px' className={_s.mt5} />
|
||||
|
||||
<div className={[_s.default, _s.ml15, _s.flexGrow1].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<NavLink to={`/${account.get('acct')}`}>
|
||||
<Avatar size='30' account={account} />
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className={[_s.default, _s.pt10].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<div className={_s.text}>
|
||||
<DisplayName account={account} noUsername />
|
||||
</div>
|
||||
<Text size='medium'>
|
||||
{' '}
|
||||
{intl.formatMessage(messages.mentionedInPost)}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={[_s.default, _s.pt10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
id={statusId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderPoll = () => {
|
||||
const { intl, statusId } = this.props
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.px10].join(' ')}>
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
|
||||
|
||||
<Icon id='poll' height='20px' width='20px' className={_s.mt5} />
|
||||
|
||||
<div className={[_s.default, _s.ml15, _s.flexGrow1].join(' ')}>
|
||||
<div className={[_s.default, _s.pt5].join(' ')}>
|
||||
<Text size='medium'>
|
||||
{intl.formatMessage(messages.poll)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className={[_s.default, _s.pt10, _s.mt10].join(' ')}>
|
||||
<StatusContainer
|
||||
id={statusId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderFollow = () => {
|
||||
const { intl, accounts, statusId } = this.props
|
||||
|
||||
const count = accounts.size
|
||||
if (count === 0) return null
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundSubtle_onHover].join(' ')}>
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
|
||||
|
||||
<Icon id='group' height='20px' width='20px' className={_s.mt5} />
|
||||
|
||||
<div className={[_s.default, _s.ml15, _s.flexGrow1].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
{
|
||||
accounts.slice(0, 8).map((account, i) => (
|
||||
<NavLink
|
||||
to={`/${account.get('acct')}`}
|
||||
key={`fav-avatar-${i}`}
|
||||
className={_s.mr5}
|
||||
>
|
||||
<Avatar size='30' account={account} />
|
||||
</NavLink>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className={[_s.default, _s.pt10].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<div className={_s.text}>
|
||||
{
|
||||
accounts.slice(0, 1).map((account, i) => (
|
||||
<DisplayName key={i} account={account} noUsername />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<Text size='medium'>
|
||||
{' '}
|
||||
{intl.formatMessage(count > 1 ? messages.followedYouMultiple : messages.followedYouOne, {
|
||||
count: count - 1,
|
||||
})}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderLike = () => {
|
||||
const { intl, accounts, statusId } = this.props
|
||||
|
||||
const count = accounts.size
|
||||
if (count === 0 || !statusId) return null
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundSubtle_onHover].join(' ')}>
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
|
||||
|
||||
<Icon id='like' height='20px' width='20px' className={_s.mt5} />
|
||||
|
||||
<div className={[_s.default, _s.ml15, _s.flexGrow1].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
{
|
||||
accounts.slice(0, 8).map((account, i) => (
|
||||
<NavLink
|
||||
to={`/${account.get('acct')}`}
|
||||
key={`fav-avatar-${i}`}
|
||||
className={_s.mr5}
|
||||
>
|
||||
<Avatar size='30' account={account} />
|
||||
</NavLink>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className={[_s.default, _s.pt10].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<div className={_s.text}>
|
||||
{
|
||||
accounts.slice(0, 1).map((account, i) => (
|
||||
<DisplayName key={i} account={account} noUsername />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<Text size='medium'>
|
||||
{' '}
|
||||
{intl.formatMessage(count > 1 ? messages.likedStatusMultiple : messages.likedStatusOne, {
|
||||
count: count - 1,
|
||||
})}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className={[_s.default, _s.pt10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
id={statusId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderRepost = () => {
|
||||
const { intl, accounts, statusId } = this.props
|
||||
|
||||
const count = accounts.size
|
||||
if (count === 0 || !statusId) return null
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundSubtle_onHover].join(' ')}>
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
|
||||
|
||||
<Icon id='repost' height='20px' width='20px' className={_s.mt5} />
|
||||
|
||||
<div className={[_s.default, _s.ml15, _s.flexGrow1].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
{
|
||||
accounts.slice(0, 8).map((account, i) => (
|
||||
<NavLink
|
||||
to={`/${account.get('acct')}`}
|
||||
key={`fav-avatar-${i}`}
|
||||
className={_s.mr5}
|
||||
>
|
||||
<Avatar size='30' account={account} />
|
||||
</NavLink>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className={[_s.default, _s.pt10].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<div className={_s.text}>
|
||||
{
|
||||
accounts.slice(0, 1).map((account, i) => (
|
||||
<DisplayName key={i} account={account} noUsername />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<Text size='medium'>
|
||||
{' '}
|
||||
{intl.formatMessage(count > 1 ? messages.repostedStatusMultiple : messages.repostedStatusOne, {
|
||||
count: count - 1,
|
||||
})}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className={[_s.default, _s.pt10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
id={statusId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { type } = this.props
|
||||
const { intl, accounts, createdAt, type, statusId } = this.props
|
||||
|
||||
const count = !!accounts ? accounts.size : 0
|
||||
|
||||
let message
|
||||
let icon
|
||||
switch (type) {
|
||||
case 'follow':
|
||||
return this.renderFollow()
|
||||
icon = 'group'
|
||||
message = intl.formatMessage(count > 1 ? messages.followedYouMultiple : messages.followedYouOne, {
|
||||
count: count - 1,
|
||||
})
|
||||
break
|
||||
case 'mention':
|
||||
return this.renderMention()
|
||||
icon = 'comment'
|
||||
message = intl.formatMessage(messages.mentionedInPost)
|
||||
break
|
||||
case 'like':
|
||||
return this.renderLike()
|
||||
icon = 'like'
|
||||
message = intl.formatMessage(count > 1 ? messages.likedStatusMultiple : messages.likedStatusOne, {
|
||||
count: count - 1,
|
||||
})
|
||||
break
|
||||
case 'repost':
|
||||
return this.renderRepost();
|
||||
icon = 'repost'
|
||||
message = intl.formatMessage(count > 1 ? messages.repostedStatusMultiple : messages.repostedStatusOne, {
|
||||
count: count - 1,
|
||||
})
|
||||
break
|
||||
case 'poll':
|
||||
return this.renderPoll()
|
||||
icon = 'poll'
|
||||
message = intl.formatMessage(messages.poll)
|
||||
break
|
||||
default:
|
||||
return null
|
||||
}
|
||||
|
||||
return null
|
||||
return (
|
||||
<div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundSubtle_onHover].join(' ')}>
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
|
||||
|
||||
<Icon id={icon} height='20px' width='20px' className={_s.mt5} />
|
||||
|
||||
<div className={[_s.default, _s.ml15, _s.flexNormal].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
{
|
||||
accounts.slice(0, 8).map((account, i) => (
|
||||
<NavLink
|
||||
to={`/${account.get('acct')}`}
|
||||
key={`fav-avatar-${i}`}
|
||||
className={_s.mr5}
|
||||
>
|
||||
<Avatar size={30} account={account} />
|
||||
</NavLink>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className={[_s.default, _s.pt10].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<div className={_s.text}>
|
||||
{
|
||||
accounts.slice(0, 1).map((account, i) => (
|
||||
<DisplayName key={i} account={account} noUsername />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<Text size='medium'>
|
||||
{' '}
|
||||
{message}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
!!statusId &&
|
||||
<div className={[_s.default, _s.pt10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
id={statusId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@ const makeMapStateToProps = () => {
|
||||
return mapStateToProps
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onMention: (account, router) => {
|
||||
dispatch(mentionCompose(account, router))
|
||||
},
|
||||
|
||||
@@ -16,22 +16,8 @@ import LoadMore from '../../components/load_more'
|
||||
import TimelineQueueButtonHeader from '../../components/timeline_queue_button_header'
|
||||
import Block from '../../components/block'
|
||||
|
||||
const getNotifications = createSelector([
|
||||
state => state.getIn(['notifications', 'filter', 'active']),
|
||||
state => ImmutableList(state.getIn(['settings', 'notifications', 'shows']).filter(item => !item).keys()),
|
||||
state => state.getIn(['notifications', 'items']),
|
||||
], (allowedType, excludedTypes, notifications) => {
|
||||
if (allowedType === 'all') {
|
||||
// used if user changed the notification settings after loading the notifications from the server
|
||||
// otherwise a list of notifications will come pre-filtered from the backend
|
||||
// we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
|
||||
return notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type')))
|
||||
}
|
||||
return notifications.filter(item => item !== null && allowedType === item.get('type'))
|
||||
})
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
notifications: getNotifications(state),
|
||||
const mapStateToProps = (state) => ({
|
||||
notifications: state.getIn(['notifications', 'items']),
|
||||
isLoading: state.getIn(['notifications', 'isLoading'], true),
|
||||
isUnread: state.getIn(['notifications', 'unread']) > 0,
|
||||
hasMore: state.getIn(['notifications', 'hasMore']),
|
||||
@@ -112,6 +98,7 @@ class Notifications extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
handleDequeueNotifications = () => {
|
||||
window.scrollTo(0, 0)
|
||||
this.props.dispatch(dequeueNotifications())
|
||||
}
|
||||
|
||||
@@ -129,7 +116,7 @@ class Notifications extends ImmutablePureComponent {
|
||||
|
||||
// : todo : include follow requests
|
||||
|
||||
// console.log('notifications:', notifications)
|
||||
console.log('--0--notifications:', notifications)
|
||||
|
||||
if (isLoading && this.scrollableContent) {
|
||||
scrollableContent = this.scrollableContent
|
||||
|
||||
Reference in New Issue
Block a user