Grouped notifications (v1)

app/controllers/api/v1/notifications_controller.rb

@@ -8,7 +8,7 @@ class Api::V1::NotificationsController < Api::BaseController
 
   respond_to :json
 
-  DEFAULT_NOTIFICATIONS_LIMIT = 50
+  DEFAULT_NOTIFICATIONS_LIMIT = 30
 
   def index
     @notifications = load_notifications

app/javascript/gabsocial/components/input.js

@@ -73,7 +73,7 @@ export default class Input extends PureComponent {
     })
 
     const btnClasses = cx({
-      displayNone: value.length === 0,
+      displayNone: !value || value.length === 0,
       px10: 1,
       mr5: 1,
     })

app/javascript/gabsocial/components/panel/notification_filter_panel.js

@@ -1,16 +1,7 @@
-import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import { shortNumberFormat } from '../../utils/numbers'
 import PanelLayout from './panel_layout'
-import Button from '../button'
-import Divider from '../divider'
-import Heading from '../heading'
-import Icon from '../icon'
-import Input from '../input'
 import Switch from '../switch'
-import Text from '../text'
 
 const messages = defineMessages({
   title: { id: 'notification_filters', defaultMessage: 'Notification Filters' },
@@ -27,25 +18,8 @@ class NotificationFilterPanel extends ImmutablePureComponent {
   render() {
     const { intl } = this.props
 
-    // date
-    // verfied or not
-    // specific user
-    // specific status
-    // only people i do/not follow
-
     return (
       <PanelLayout title={intl.formatMessage(messages.title)}>
-        <Text>Start Date</Text>
-        <Text>End Date</Text>
-
-        <Divider small />
-
-        <Input title='From specific user(s)' small />
-
-        <Input title='From a specific status' small />
-
-        <Divider small />
-
         <Switch 
           id='notifications-verified'
           label='Only Verified Users'

app/javascript/gabsocial/components/tab_bar_item.js

@@ -59,6 +59,7 @@ class TabBarItem extends PureComponent {
       justifyContentCenter: 1,
       borderBottom2PX: 1,
       py5: 1,
+      cursorPointer: 1,
       backgroundTransparent: 1,
       borderColorTransparent: !isCurrent,
       borderColorBrand: isCurrent,

app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js

@@ -11,7 +11,15 @@ import Text from '../../../../components/text'
 import DisplayName from '../../../../components/display_name'
 
 const messages = defineMessages({
-
+  poll: { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' },
+  mentionedInPost: { id: 'mentioned_in_post', defaultMessage: 'mentioned you in their post' },
+  mentionedInComment: { id: 'mentioned_in_comment', defaultMessage: 'mentioned you in their comment' },
+  followedYouOne: { id: 'followed_you_one', defaultMessage: 'followed you' },
+  followedYouMultiple: { id: 'followed_you_multiple', defaultMessage: 'and {count} others followed you' },
+  likedStatusOne: { id: 'liked_status_one', defaultMessage: 'liked your status' },
+  likedStatusMultiple: { id: 'liked_status_multiple', defaultMessage: 'and {count} others liked your status' },
+  repostedStatusOne: { id: 'reposted_status_one', defaultMessage: 'reposted your status' },
+  repostedStatusMultiple: { id: 'reposted_status_multiple', defaultMessage: 'and {count} others reposted your status' },
 })
 
 const notificationForScreenReader = (intl, message, timestamp) => {
@@ -31,26 +39,108 @@ class Notification extends ImmutablePureComponent {
   }
 
   static propTypes = {
-    status: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
-    notificationType: PropTypes.string.isRequired,
-    accounts: ImmutablePropTypes.list,
+    accounts: ImmutablePropTypes.list.isRequired,
+    createdAt: PropTypes.string,
+    statusId: PropTypes.string,
+    type: PropTypes.string.isRequired,
   }
 
-  renderFavorite = () => {
-    const { status, notificationType, accounts } = this.props
+  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='apps' height='20px' width='20px' className={_s.mt5} />
+            <Icon id='comment' height='20px' width='20px' className={_s.mt5} />
 
-            <div className={[_s.default, _s.ml15].join(' ')}>
+            <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, 6).map((account, i) => (
+                  accounts.slice(0, 8).map((account, i) => (
                     <NavLink
                       to={`/${account.get('acct')}`}
                       key={`fav-avatar-${i}`}
@@ -71,15 +161,128 @@ class Notification extends ImmutablePureComponent {
                     }
                   </div>
                   <Text size='medium'>
-                    &nbsp;and 3 others favorited your gab
+                    {' '}
+                    {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(' ')}>
-                <Text color='secondary' size='medium'>
-                  post this at 1-14-2020 12:15pm (edited)
-                </Text>
+                <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>
 
@@ -90,65 +293,22 @@ class Notification extends ImmutablePureComponent {
   }
 
   render() {
-    const {
-      status,
-      notificationType,
-      accounts,
-      intl
-    } = this.props
+    const { type } = this.props
 
-    // const linkTo = '/admin/posts/123/reblogs' // etc.
+    switch (type) {
+      case 'follow':
+        return this.renderFollow()
+      case 'mention':
+        return this.renderMention()
+      case 'like':
+        return this.renderLike()
+      case 'repost':
+        return this.renderRepost();
+      case 'poll':
+        return this.renderPoll()
+    }
 
-    return (
-      <NavLink
-        to={`/`}
-        className={[_s.default, _s.px10, _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='apps' height='20px' width='20px' className={_s.mt5} />
-
-            <div className={[_s.default, _s.ml15].join(' ')}>
-              <div className={[_s.default, _s.flexRow].join(' ')}>
-                {
-                  accounts.slice(0, 6).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'>
-                    &nbsp;and 3 others favorited your gab
-                  </Text>
-                </div>
-              </div>
-
-              <div className={[_s.default, _s.pt10].join(' ')}>
-                <Text color='secondary' size='medium'>
-                  post this at 1-14-2020 12:15pm (edited)
-                </Text>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </NavLink>
-    )
+    return null
   }
 
 }

app/javascript/gabsocial/features/notifications/containers/notification_container.js

@@ -1,3 +1,4 @@
+import { List as ImmutableList } from 'immutable'
 import { openModal } from '../../../actions/modal'
 import { mentionCompose } from '../../../actions/compose'
 import {
@@ -10,23 +11,68 @@ import {
   hideStatus,
   revealStatus,
 } from '../../../actions/statuses'
-import { boostModal, me } from '../../../initial_state'
-import { makeGetNotification, makeGetStatus } from '../../../selectors'
+import { boostModal } from '../../../initial_state'
+import { makeGetNotification } from '../../../selectors'
 import Notification from '../components/notification/notification-alt'
 
+const getAccountFromState = (state, accountId) => {
+  return state.getIn(['accounts', accountId])
+}
+
 const makeMapStateToProps = () => {
   const getNotification = makeGetNotification()
-  const getStatus = makeGetStatus()
 
   const mapStateToProps = (state, props) => {
-    const notification = getNotification(state, props.notification, props.accountId)
+    const isFollows = !!props.notification.get('follow')
+    const isLikes = !!props.notification.get('like')
+    const isReposts = !!props.notification.get('repost')
+    const isGrouped = isFollows || isLikes || isReposts
 
-    const account = state.getIn(['accounts', me])
+    if (isFollows) {
+      const list = props.notification.get('follow')
+      
+      let accounts = ImmutableList()
+      list.forEach((item) => {
+        const account = getAccountFromState(state, item.get('account'))
+        accounts = accounts.set(accounts.size, account)
+      })
+  
+      return {
+        type: 'follow',
+        accounts: accounts, 
+        createdAt: undefined,
+        statusId: undefined,
+      }
+    } else if (isLikes || isReposts) {
+      const theType = isLikes ? 'like' : 'repost'
+      const list = props.notification.get(theType)
 
-    return {
-      accounts: [account, account, account],
-      notification: notification,
-      status: notification.get('status') ? getStatus(state, { id: notification.get('status') }) : null,
+      let accounts = ImmutableList()
+      const accountIdArr = list.get('accounts')
+
+      for (let i = 0; i < accountIdArr.length; i++) {
+        const accountId = accountIdArr[i];
+        const account = getAccountFromState(state, accountId)
+        accounts = accounts.set(accounts.size, account)
+      }
+
+      return {
+        type: theType,
+        accounts: accounts,
+        createdAt: undefined,
+        statusId: list.get('status'),
+      }
+    } else if (!isGrouped) {
+      const notification = getNotification(state, props.notification, props.notification.get('account'))
+      const account = notification.get('account')
+      const statusId = notification.get('status')
+
+      return {
+        accounts: !!account ? ImmutableList([account]) : ImmutableList(),
+        type: notification.get('type'),
+        createdAt: notification.get('created_at'),
+        statusId: statusId || undefined,
+      }
     }
   }
 

app/javascript/gabsocial/features/notifications/notifications.js

@@ -133,37 +133,7 @@ class Notifications extends ImmutablePureComponent {
 
     // : todo : include follow requests
 
-    console.log('notifications:', notifications)
-
-    let filteredNotifications = {follows:[]}
-
-    notifications.forEach((notification) => {
-      // const createdAt = notification.get('createdAt')
-      // const account = notification.get('account')
-      const type = notification.get('type')
-      const status = notification.get('status')
-      if (type === 'follow') {
-        filteredNotifications.follows.push(notification)
-      } else if (type === 'favourite') {
-        if (filteredNotifications[status] === undefined) {
-          filteredNotifications[status] = {}
-        }
-        if (filteredNotifications[status]['favorite'] === undefined) {
-          filteredNotifications[status].favorite = []
-        }
-        filteredNotifications[status].favorite.push(notification)
-      } else if (type === 'poll') {
-        if (filteredNotifications[status] === undefined) {
-          filteredNotifications[status] = {}
-        }
-        if (filteredNotifications[status]['poll'] === undefined) {
-          filteredNotifications[status].poll = []
-        }
-        filteredNotifications[status].poll.push(notification)
-      }
-    })
-
-    console.log('filteredNotifications:', filteredNotifications)
+    // console.log('notifications:', notifications)
 
     if (isLoading && this.scrollableContent) {
       scrollableContent = this.scrollableContent

app/javascript/gabsocial/pages/notifications_page.js

@@ -56,27 +56,27 @@ class NotificationsPage extends PureComponent {
         active: false,
       },
       {
-        title: ' @ ',
+        title: 'Mentions',
         onClick: null,
         active: false,
       },
       {
-        icon: 'like',
+        title: 'Likes',
         onClick: null,
         active: false,
       },
       {
-        icon: 'repost',
+        title: 'Reposts',
         onClick: null,
         active: false,
       },
       {
-        icon: 'poll',
+        title: 'Polls',
         onClick: null,
         active: false,
       },
       {
-        icon: 'user-plus',
+        title: 'Follows',
         onClick: null,
         active: false,
       },

app/javascript/gabsocial/reducers/notifications.js

@@ -17,7 +17,7 @@ import {
   ACCOUNT_MUTE_SUCCESS,
 } from '../actions/accounts';
 import { TIMELINE_DELETE, TIMELINE_DISCONNECT } from '../actions/timelines';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import compareId from '../utils/compare_id';
 import { unreadCount } from '../initial_state';
 
@@ -57,31 +57,95 @@ const normalizeNotification = (state, notification) => {
 };
 
 const expandNormalizedNotifications = (state, notifications, next) => {
-  let items = ImmutableList();
+  //Grouped items
+  let follows = ImmutableList()
+  let likes = {}
+  let reposts = {}
+  
+  let items = ImmutableList()
 
   // : todo filter notiications here:
 
-  notifications.forEach((n, i) => {
-    items = items.set(i, notificationToMap(n));
-  });
+  notifications.forEach((n) => {
+    const notification = notificationToMap(n)
+    const statusId = notification.get('status')
+    const type = notification.get('type')
+    
+    switch (type) {
+      case 'follow': {
+        follows = follows.set(follows.size, notification)
+        break
+      }
+      case 'favourite': {
+        if (likes[statusId] === undefined) likes[statusId] = []
+        likes[statusId].push({
+          account: notification.get('account'),
+        })
+        break
+      }
+      case 'reblog': {
+        if (reposts[statusId] === undefined) reposts[statusId] = []
+        reposts[statusId].push({
+          account: notification.get('account'),
+        })
+        break
+      }
+      default: {
+        items = items.set(items.size, notification)
+        break
+      }
+    }
+  })
 
-  console.log("reducer notifications:", notifications)
+  if (follows.size > 0) {
+    items = items.set(items.size, ImmutableMap({
+      follow: follows,
+    }))
+  }
+  if (Object.keys(likes).length > 0) {
+    for (const statusId in likes) {
+      if (likes.hasOwnProperty(statusId)) {
+        const likeArr = likes[statusId]
+        const accounts = likeArr.map((l) => l.account)
+        items = items.set(items.size, ImmutableMap({
+          like: ImmutableMap({
+            status: statusId,
+            accounts: accounts,
+          })
+        }))
+      }
+    }
+  }
+  if (Object.keys(reposts).length > 0) {
+    for (const statusId in reposts) {
+      if (reposts.hasOwnProperty(statusId)) {
+        const repostArr = reposts[statusId]
+        const accounts = repostArr.map((l) => l.account)
+        items = items.set(items.size, ImmutableMap({
+          repost: ImmutableMap({
+            status: statusId,
+            accounts: accounts,
+          })
+        }))
+      }
+    }
+  }
 
   return state.withMutations(mutable => {
     if (!items.isEmpty()) {
       mutable.update('items', list => {
         const lastIndex = 1 + list.findLastIndex(
           item => item !== null && (compareId(item.get('id'), items.last().get('id')) > 0 || item.get('id') === items.last().get('id'))
-        );
+        )
 
         const firstIndex = 1 + list.take(lastIndex).findLastIndex(
           item => item !== null && compareId(item.get('id'), items.first().get('id')) > 0
-        );
+        )
+
+        const pop = list.take(firstIndex).concat(items, list.skip(lastIndex))
 
-        const pop = list.take(firstIndex).concat(items, list.skip(lastIndex));
-        console.log("pop:", pop)
         return pop
-      });
+      })
     }
 
     if (!next) {