Skip to content

Commit

Permalink
feat(manager): Clean up manage-subscription page
Browse files Browse the repository at this point in the history
  • Loading branch information
David Emory committed May 10, 2018
1 parent 9029a7b commit 12e7fac
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 95 deletions.
159 changes: 99 additions & 60 deletions lib/public/components/UserAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ export default class UserAccount extends Component {
}

componentWillMount () {
this.props.onComponentMount(this.props)
this.props.onComponentMount(this.props, () => {
this.setState({ loadedProjectsAndFeed: true })
})
}

_onClickGet = () => this.props.getUser(this.props.user.profile.user_id)
Expand All @@ -29,7 +31,6 @@ export default class UserAccount extends Component {
render () {
const {user} = this.props
const messages = getComponentMessages('UserAccount')
const removeIconStyle = {cursor: 'pointer'}
const subscriptions = user.profile.app_metadata.datatools.find(dt => dt.client_id === process.env.AUTH0_CLIENT_ID).subscriptions
const ACCOUNT_SECTIONS = [
{
Expand Down Expand Up @@ -95,25 +96,20 @@ export default class UserAccount extends Component {
<Button
onClick={this._onClickUnsubscribeAll}
className='pull-right'
bsSize='xsmall'>
bsStyle='info'
bsSize='xsmall'
>
<Icon type='eye-slash' />
{' '}
{getMessage(messages, 'notifications.unsubscribeAll')}
</Button>
{getMessage(messages, 'notifications.subscriptions')}
</h4>
}>
<ul>
{subscriptions && subscriptions.length
? subscriptions.map(sub => {
return (
<SubscriptionListItem
removeIconStyle={removeIconStyle}
subscription={sub}
{...this.props} />
)
})
: <li>No subscriptions.</li>
}
</ul>
{subscriptions && subscriptions.length
? <SubscriptionsManager subscriptions={subscriptions} {...this.props} />
: <li>No subscriptions.</li>
}
</Panel>
</div>
)
Expand Down Expand Up @@ -180,67 +176,110 @@ export default class UserAccount extends Component {
}
}

class SubscriptionListItem extends Component {
_onClickRemoveSubscriptionType = () => {
const {removeUserSubscription, subscription, user} = this.props
removeUserSubscription(user.profile, subscription.type)

class SubscriptionsManager extends Component {
render () {
const { subscriptions } = this.props

const projectSub = subscriptions.find(sub => sub.type === 'project-updated')
const feedSub = subscriptions.find(sub => sub.type === 'feed-updated')
return <div>
{projectSub && (
<div>
<h4><Icon type='eye' /> Watched Projects</h4>
{projectSub.target.length
? (
<ListGroup>
{projectSub.target.map((target, k) =>
<WatchedProject key={k} target={target} {...this.props} />
)}
</ListGroup>
)
: <span>No projects currently being watched</span>
}
</div>
)}
{feedSub && (
<div style={{ marginTop: 30 }}>
<h4><Icon type='eye' /> Watched Feeds</h4>
{feedSub.target.length
? (
<ListGroup>
{feedSub.target.map((target, k) =>
<WatchedFeed key={k} target={target} {...this.props} />
)}
</ListGroup>
)
: <span>No feeds currently being watched</span>
}
</div>
)}
</div>
}
}

class WatchedProject extends Component {
_onClickRemoveSubscriptionTarget = () => {
const {target, updateUserSubscription, user} = this.props
updateUserSubscription(user.profile, target, 'project-updated')
}

render () {
const {removeIconStyle, subscription} = this.props
const {projects, target} = this.props
const project = projects && projects.find(p => p.id === target)
const projectLink = project
? <span><Icon type='folder-open' /> <Link to={`/project/${project.id}`}>{project.name}</Link></span>
: <span style={{ fontStyle: 'italic', color: 'gray' }}>{target} (Deleted)</span>
return (
<li>
{subscription.type.replace('-', ' ')}{' '}
<Icon
type='trash'
className='text-danger'
style={removeIconStyle}
onClick={this._onClickRemoveSubscriptionType} />
<ul>
{subscription.target.length
? subscription.target.map(target => (
<SubscriptionTarget
target={target}
{...this.props} />
))
: <li>No feeds subscribed to.</li>
}
</ul>
</li>
<ListGroupItem>
{projectLink}
<Button bsSize='xsmall' bsStyle='info'
className='pull-right'
onClick={this._onClickRemoveSubscriptionTarget}
><Icon type='eye-slash' /> Unwatch</Button>
</ListGroupItem>
)
}
}

class SubscriptionTarget extends Component {
class WatchedFeed extends Component {
_onClickRemoveSubscriptionTarget = () => {
const {subscription, target, updateUserSubscription, user} = this.props
updateUserSubscription(user.profile, target, subscription.type)
const {target, updateUserSubscription, user} = this.props
updateUserSubscription(user.profile, target, 'feed-updated')
}

render () {
const {projects, removeIconStyle, target} = this.props
let fs = null // this.props.projects ? this.props.projects.reduce(proj => proj.feedSources.filter(fs => fs.id === target)) : null
const {projects, target} = this.props
// Find the FeedSource and Project, if present
let feedSource
let project
if (projects) {
for (var i = 0; i < projects.length; i++) {
const feed = projects[i].feedSources
? projects[i].feedSources.find(fs => fs.id === target)
: null
fs = feed || fs
if (!projects[i].feedSources) continue
const fs = projects[i].feedSources.find(fs => fs.id === target)
if (fs) {
feedSource = fs
project = projects[i]
break
}
}
}
const feedLink = fs
? <Link to={fs.isPublic ? `/public/feed/${fs.id}` : `/feed/${fs.id}`}>{fs.name}</Link>
: <span>{target}</span>

const fsLink = feedSource
? <span>
<Icon type='folder-open' /> <Link to={`/project/${project.id}`}>{project.name}</Link>
{' / '}
<Icon type='bus' /> <Link to={`/feed/${feedSource.id}`}>{feedSource.name}</Link>
</span>
: <span style={{ fontStyle: 'italic', color: 'gray' }}>{target} (Deleted)</span>
return (
<li>
{feedLink}
{' '}
<Icon
type='trash'
className='text-danger'
style={removeIconStyle}
onClick={this._onClickRemoveSubscriptionTarget} />
</li>
<ListGroupItem>
{fsLink}
<Button bsSize='xsmall' bsStyle='info'
className='pull-right'
onClick={this._onClickRemoveSubscriptionTarget}
><Icon type='eye-slash' /> Unwatch</Button>
</ListGroupItem>
)
}
}
41 changes: 6 additions & 35 deletions lib/public/containers/ActiveUserAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { browserHistory } from 'react-router'
import UserAccount from '../components/UserAccount'
import { setVisibilitySearchText } from '../../manager/actions/visibilityFilter'
import { fetchProjects } from '../../manager/actions/projects'
import { fetchFeedSource } from '../../manager/actions/feeds'
import { fetchProjectFeeds } from '../../manager/actions/feeds'
import {
updateUserData,
fetchUser,
Expand All @@ -30,40 +30,11 @@ const mapDispatchToProps = (dispatch, ownProps) => {
if (!ownProps.routeParams.subpage) {
browserHistory.push('/settings/profile')
}
if (!initialProps.projects) {
dispatch(fetchProjects())
.then(() => {
const subscriptions = initialProps.user.profile.app_metadata.datatools.find(dt => dt.client_id === process.env.AUTH0_CLIENT_ID).subscriptions
if (subscriptions) {
Promise.all(
subscriptions.map(sub => {
console.log(sub)
sub.target.map(target => {
console.log('queuing feed source ', target)
return (dispatch(fetchFeedSource(target)))
})
})
).then(results => {
console.log('got feed sources', results)
})
}
})
} else {
const subscriptions = initialProps.user.profile.app_metadata.datatools.find(dt => dt.client_id === process.env.AUTH0_CLIENT_ID).subscriptions
if (subscriptions) {
Promise.all(
subscriptions.map(sub => {
console.log(sub)
sub.target.map(target => {
console.log('queuing feed source ', target)
return (dispatch(fetchFeedSource(target)))
})
})
).then(results => {
console.log('got feed sources', results)
})
}
}
// Get all projects and their contained feeds (for subscription management)
dispatch(fetchProjects())
.then((projects) =>
Promise.all(projects.map(project => dispatch(fetchProjectFeeds(project.id))))
)
},
searchTextChanged: (text) => dispatch(setVisibilitySearchText(text)),
updateUserName: (user, permissions) => dispatch(updateUserData(user, permissions)),
Expand Down

0 comments on commit 12e7fac

Please sign in to comment.