From 12e7faca48cea0438b4f7f553b09b9cf808c0046 Mon Sep 17 00:00:00 2001
From: David Emory <demory@conveyal.com>
Date: Thu, 10 May 2018 09:20:32 -0400
Subject: [PATCH] feat(manager): Clean up manage-subscription page

---
 lib/public/components/UserAccount.js       | 159 +++++++++++++--------
 lib/public/containers/ActiveUserAccount.js |  41 +-----
 2 files changed, 105 insertions(+), 95 deletions(-)

diff --git a/lib/public/components/UserAccount.js b/lib/public/components/UserAccount.js
index b767a4d4a..5c1beb2cf 100644
--- a/lib/public/components/UserAccount.js
+++ b/lib/public/components/UserAccount.js
@@ -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)
@@ -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 = [
       {
@@ -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>
         )
@@ -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>
     )
   }
 }
diff --git a/lib/public/containers/ActiveUserAccount.js b/lib/public/containers/ActiveUserAccount.js
index 32c591131..15ba32e40 100644
--- a/lib/public/containers/ActiveUserAccount.js
+++ b/lib/public/containers/ActiveUserAccount.js
@@ -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,
@@ -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)),