Progress

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

@@ -0,0 +1,50 @@
+import { injectIntl, FormattedMessage } from 'react-intl'
+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 Button from '../../../../components/button'
+import Icon from '../../../../components/icon'
+
+const notificationForScreenReader = (intl, message, timestamp) => {
+  const output = [message]
+
+  output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }))
+
+  return output.join(', ')
+}
+
+export default
+@injectIntl
+class Notification extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  static propTypes = {
+    status: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+    notificationType: PropTypes.string.isRequired,
+    accounts: ImmutablePropTypes.list,
+  }
+
+  renderFavorite = () => {
+    const { status, notificationType, accounts } = this.props
+
+  }
+
+  render() {
+    const { notification } = this.props
+    const account = notification.get('account')
+
+    switch (notification.get('type')) {
+      case 'favourite':
+        return this.renderFavorite()
+    }
+
+    return null
+  }
+
+}

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

@@ -87,7 +87,7 @@ class Notification extends ImmutablePureComponent {
     if (status) this.props.onToggleHidden(status);
   }
 
-  getHandlers () {
+  getHandlers() {
     return {
       reply: this.handleMention,
       favourite: this.handleHotkeyFavourite,
@@ -101,7 +101,7 @@ class Notification extends ImmutablePureComponent {
     };
   }
 
-  renderFollow (notification, account, link) {
+  renderFollow(notification, account, link) {
     const { intl } = this.props;
 
     return (
@@ -123,7 +123,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderMention (notification) {
+  renderMention(notification) {
     return (
       <StatusContainer
         id={notification.get('status')}
@@ -140,7 +140,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderFavourite (notification, link) {
+  renderFavourite(notification, link) {
     const { intl } = this.props;
 
     return (
@@ -173,7 +173,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderReblog (notification, link) {
+  renderReblog(notification, link) {
     const { intl } = this.props;
 
     return (
@@ -205,7 +205,7 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderPoll (notification) {
+  renderPoll(notification) {
     const { intl } = this.props;
 
     return (
@@ -237,23 +237,35 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  render () {
+  render() {
     const { notification } = this.props;
-    const account          = notification.get('account');
-    const displayNameHtml  = { __html: account.get('display_name_html') };
-    const link             = <bdi><Button className='notification__display-name' href={`/${account.get('acct')}`} title={account.get('acct')} to={`/${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
+    const account = notification.get('account');
+    const displayNameHtml = { __html: account.get('display_name_html') };
+    const link = (
+      <bdi>
+        <Button
+          className='notification__display-name'
+          href={`/${account.get('acct')}`}
+          title={account.get('acct')}
+          to={`/${account.get('acct')}`}
+          dangerouslySetInnerHTML={displayNameHtml}
+        />
+      </bdi>
+    );
 
-    switch(notification.get('type')) {
-    // case 'follow':
-    //   return this.renderFollow(notification, account, link);
-    // case 'mention':
-    //   return this.renderMention(notification);
-    case 'favourite':
-      return this.renderFavourite(notification, link);
-    // case 'reblog':
-    //   return this.renderReblog(notification, link);
-    // case 'poll':
-    //   return this.renderPoll(notification);
+    // console.log("notification:", notification)
+
+    switch (notification.get('type')) {
+      // case 'follow':
+      //   return this.renderFollow(notification, account, link);
+      // case 'mention':
+      //   return this.renderMention(notification);
+      case 'favourite':
+        return this.renderFavourite(notification, link);
+      // case 'reblog':
+      //   return this.renderReblog(notification, link);
+      // case 'poll':
+      //   return this.renderPoll(notification);
     }
 
     return null;

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

@@ -11,14 +11,9 @@ import {
 } from '../../actions/notifications';
 import NotificationContainer from './containers/notification_container';
 // import ColumnSettingsContainer from './containers/column_settings_container';
-// import FilterBarContainer from './containers/filter_bar_container';
 import ScrollableList from '../../components/scrollable_list';
 import LoadMore from '../../components/load_more';
-// import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
-
-const messages = defineMessages({
-  title: { id: 'column.notifications', defaultMessage: 'Notifications' },
-});
+import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
 
 const getNotifications = createSelector([
   state => state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
@@ -127,13 +122,39 @@ class Notifications extends ImmutablePureComponent {
 
     let scrollableContent = null;
 
-    // const filterBarContainer = showFilterBar
-    //   ? (<FilterBarContainer />)
-    //   : null;
-
     // : todo : include follow requests
 
-    console.log("notifications:", notifications)
+    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)
 
     if (isLoading && this.scrollableContent) {
       scrollableContent = this.scrollableContent;
@@ -161,28 +182,29 @@ class Notifications extends ImmutablePureComponent {
 
     this.scrollableContent = scrollableContent;
 
-    const scrollContainer = (
-      <ScrollableList
-        scrollKey='notifications'
-        isLoading={isLoading}
-        showLoading={isLoading && notifications.size === 0}
-        hasMore={hasMore}
-        emptyMessage={<FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />}
-        onLoadMore={this.handleLoadOlder}
-        onScrollToTop={this.handleScrollToTop}
-        onScroll={this.handleScroll}
-      >
-        { scrollableContent }
-      </ScrollableList>
-    );
-
     return (
       <div ref={this.setColumnRef}>
-        { /* filterBarContainer */ }
-        { /* <TimelineQueueButtonHeader onClick={this.handleDequeueNotifications} count={totalQueuedNotificationsCount} itemType='notification' /> */ }
-        { scrollContainer }
+
+        <TimelineQueueButtonHeader
+          onClick={this.handleDequeueNotifications}
+          count={totalQueuedNotificationsCount}
+          itemType='notification'
+        />
+
+        <ScrollableList
+          scrollKey='notifications'
+          isLoading={isLoading}
+          showLoading={isLoading && notifications.size === 0}
+          hasMore={hasMore}
+          emptyMessage={<FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />}
+          onLoadMore={this.handleLoadOlder}
+          onScrollToTop={this.handleScrollToTop}
+          onScroll={this.handleScroll}
+        >
+          { scrollableContent }
+        </ScrollableList>
       </div>
-    );
+    )
   }
 
 }