Progress

2020-03-03 22:45:16 -05:00
parent 0df3c073a5
commit 33952e424f
127 changed files with 765 additions and 3588 deletions
--- a/app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js
+++ b/app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js
@@ -1,11 +1,18 @@
-import { injectIntl, FormattedMessage } from 'react-intl'
+import { NavLink } from 'react-router-dom'
+import { injectIntl, defineMessages } 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 Avatar from '../../../../components/avatar'
 import Icon from '../../../../components/icon'
+import Text from '../../../../components/text'
+import DisplayName from '../../../../components/display_name'
+
+const messages = defineMessages({
+
+})

 const notificationForScreenReader = (intl, message, timestamp) => {
  const output = [message]
@@ -33,18 +40,115 @@ class Notification extends ImmutablePureComponent {
  renderFavorite = () => {
    const { status, notificationType, accounts } = this.props

+    return (
+      <div className={[_s.default, _s.paddingHorizontal10PX].join(' ')}>
+        <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
+
+            <Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
+
+            <div className={[_s.default, _s.marginLeft15PX].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.marginRight5PX}
+                    >
+                      <Avatar size='30' account={account} />
+                    </NavLink>
+                  ))
+                }
+              </div>
+              <div className={[_s.default, _s.paddingTop10PX].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.paddingTop10PX].join(' ')}>
+                <Text color='secondary' size='medium'>
+                  post this at 1-14-2020 12:15pm (edited)
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    )
  }

  render() {
-    const { notification } = this.props
-    const account = notification.get('account')
+    const {
+      status,
+      notificationType,
+      accounts,
+      intl
+    } = this.props

-    switch (notification.get('type')) {
-      case 'favourite':
-        return this.renderFavorite()
-    }
+    // const linkTo = '/admin/posts/123/reblogs' // etc.

-    return null
+    return (
+      <NavLink
+        to={`/`}
+        className={[_s.default, _s.paddingHorizontal10PX, _s.backgroundSubtle_onHover].join(' ')}
+      >
+        <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
+
+            <Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
+
+            <div className={[_s.default, _s.marginLeft15PX].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.marginRight5PX}
+                    >
+                      <Avatar size='30' account={account} />
+                    </NavLink>
+                  ))
+                }
+              </div>
+              <div className={[_s.default, _s.paddingTop10PX].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.paddingTop10PX].join(' ')}>
+                <Text color='secondary' size='medium'>
+                  post this at 1-14-2020 12:15pm (edited)
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </NavLink>
+    )
  }

 }
--- a/app/javascript/gabsocial/features/notifications/containers/notification_container.js
+++ b/app/javascript/gabsocial/features/notifications/containers/notification_container.js
@@ -1,70 +1,74 @@
-import { openModal } from '../../../actions/modal';
-import { mentionCompose } from '../../../actions/compose';
+import { openModal } from '../../../actions/modal'
+import { mentionCompose } from '../../../actions/compose'
 import {
  reblog,
  favourite,
  unreblog,
  unfavourite,
-} from '../../../actions/interactions';
+} from '../../../actions/interactions'
 import {
  hideStatus,
  revealStatus,
-} from '../../../actions/statuses';
-import { boostModal } from '../../../initial_state';
-import { makeGetNotification, makeGetStatus } from '../../../selectors';
-import Notification from '../components/notification/notification';
+} from '../../../actions/statuses'
+import { boostModal, me } from '../../../initial_state'
+import { makeGetNotification, makeGetStatus } from '../../../selectors'
+import Notification from '../components/notification/notification-alt'

 const makeMapStateToProps = () => {
-  const getNotification = makeGetNotification();
-  const getStatus = makeGetStatus();
+  const getNotification = makeGetNotification()
+  const getStatus = makeGetStatus()

  const mapStateToProps = (state, props) => {
-    const notification = getNotification(state, props.notification, props.accountId);
+    const notification = getNotification(state, props.notification, props.accountId)
+
+    const account = state.getIn(['accounts', me])
+
    return {
+      accounts: [account, account, account],
      notification: notification,
      status: notification.get('status') ? getStatus(state, { id: notification.get('status') }) : null,
-    };
-  };
+    }
+  }

-  return mapStateToProps;
-};
+  return mapStateToProps
+}

 const mapDispatchToProps = dispatch => ({
  onMention: (account, router) => {
-    dispatch(mentionCompose(account, router));
+    dispatch(mentionCompose(account, router))
  },

  onModalReblog (status) {
-    dispatch(reblog(status));
+    dispatch(reblog(status))
  },

  onReblog (status, e) {
    if (status.get('reblogged')) {
-      dispatch(unreblog(status));
+      dispatch(unreblog(status))
    } else {
      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
+        this.onModalReblog(status)
      } else {
-        dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
+        dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }))
      }
    }
  },

  onFavourite (status) {
    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
+      dispatch(unfavourite(status))
    } else {
-      dispatch(favourite(status));
+      dispatch(favourite(status))
    }
  },

  onToggleHidden (status) {
    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
+      dispatch(revealStatus(status.get('id')))
    } else {
-      dispatch(hideStatus(status.get('id')));
+      dispatch(hideStatus(status.get('id')))
    }
  },
-});
+})

-export default connect(makeMapStateToProps, mapDispatchToProps)(Notification);
+export default connect(makeMapStateToProps, mapDispatchToProps)(Notification)
--- a/app/javascript/gabsocial/features/notifications/notifications.js
+++ b/app/javascript/gabsocial/features/notifications/notifications.js
@@ -1,19 +1,20 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { createSelector } from 'reselect';
-import { List as ImmutableList } from 'immutable';
-import { debounce } from 'lodash';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
+import { createSelector } from 'reselect'
+import { List as ImmutableList } from 'immutable'
+import { debounce } from 'lodash'
 import {
  expandNotifications,
  scrollTopNotifications,
  dequeueNotifications,
-} from '../../actions/notifications';
-import NotificationContainer from './containers/notification_container';
-// import ColumnSettingsContainer from './containers/column_settings_container';
-import ScrollableList from '../../components/scrollable_list';
-import LoadMore from '../../components/load_more';
-import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
+} from '../../actions/notifications'
+import NotificationContainer from './containers/notification_container'
+// import ColumnSettingsContainer from './containers/column_settings_container'
+import ScrollableList from '../../components/scrollable_list'
+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(['settings', 'notifications', 'quickFilter', 'show']),
@@ -25,10 +26,10 @@ const getNotifications = createSelector([
    // 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.filterNot(item => item !== null && excludedTypes.includes(item.get('type')))
  }
-  return notifications.filter(item => item !== null && allowedType === item.get('type'));
-});
+  return notifications.filter(item => item !== null && allowedType === item.get('type'))
+})

 const mapStateToProps = state => ({
  showFilterBar: state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
@@ -37,7 +38,7 @@ const mapStateToProps = state => ({
  isUnread: state.getIn(['notifications', 'unread']) > 0,
  hasMore: state.getIn(['notifications', 'hasMore']),
  totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
-});
+})

 export default
@connect(mapStateToProps)
@@ -54,73 +55,81 @@ class Notifications extends ImmutablePureComponent {
    hasMore: PropTypes.bool,
    dequeueNotifications: PropTypes.func,
    totalQueuedNotificationsCount: PropTypes.number,
-  };
+  }

  componentWillUnmount () {
-    this.handleLoadOlder.cancel();
-    this.handleScrollToTop.cancel();
-    this.handleScroll.cancel();
-    this.props.dispatch(scrollTopNotifications(false));
+    this.handleLoadOlder.cancel()
+    this.handleScrollToTop.cancel()
+    this.handleScroll.cancel()
+    this.props.dispatch(scrollTopNotifications(false))
  }

  componentDidMount() {
-    this.handleDequeueNotifications();
-    this.props.dispatch(scrollTopNotifications(true));
+    this.handleDequeueNotifications()
+    this.props.dispatch(scrollTopNotifications(true))
  }

  handleLoadGap = (maxId) => {
-    this.props.dispatch(expandNotifications({ maxId }));
-  };
+    this.props.dispatch(expandNotifications({ maxId }))
+  }

  handleLoadOlder = debounce(() => {
-    const last = this.props.notifications.last();
-    this.props.dispatch(expandNotifications({ maxId: last && last.get('id') }));
-  }, 300, { leading: true });
+    const last = this.props.notifications.last()
+    this.props.dispatch(expandNotifications({ maxId: last && last.get('id') }))
+  }, 300, { leading: true })

  handleScrollToTop = debounce(() => {
-    this.props.dispatch(scrollTopNotifications(true));
-  }, 100);
+    this.props.dispatch(scrollTopNotifications(true))
+  }, 100)

  handleScroll = debounce(() => {
-    this.props.dispatch(scrollTopNotifications(false));
-  }, 100);
+    this.props.dispatch(scrollTopNotifications(false))
+  }, 100)

  setColumnRef = c => {
-    this.column = c;
+    this.column = c
  }

  handleMoveUp = id => {
-    const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
-    this._selectChild(elementIndex, true);
+    const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1
+    this._selectChild(elementIndex, true)
  }

  handleMoveDown = id => {
-    const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
-    this._selectChild(elementIndex, false);
+    const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1
+    this._selectChild(elementIndex, false)
  }

  _selectChild (index, align_top) {
-    const container = this.column.node;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
+    const container = this.column.node
+    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`)

    if (element) {
      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
+        element.scrollIntoView(true)
      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
+        element.scrollIntoView(false)
      }
-      element.focus();
+      element.focus()
    }
  }

  handleDequeueNotifications = () => {
-    this.props.dispatch(dequeueNotifications());
-  };
+    this.props.dispatch(dequeueNotifications())
+  }

  render () {
-    const { intl, notifications, isLoading, isUnread, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
+    const {
+      intl,
+      notifications,
+      isLoading,
+      isUnread,
+      hasMore,
+      showFilterBar,
+      totalQueuedNotificationsCount
+    } = this.props

-    let scrollableContent = null;
+    let scrollableContent = null

    // : todo : include follow requests

@@ -157,7 +166,7 @@ class Notifications extends ImmutablePureComponent {
    console.log('filteredNotifications:', filteredNotifications)

    if (isLoading && this.scrollableContent) {
-      scrollableContent = this.scrollableContent;
+      scrollableContent = this.scrollableContent
    } else if (notifications.size > 0 || hasMore) {
      scrollableContent = notifications.map((item, index) => item === null ? (
        <LoadMore
@@ -169,18 +178,17 @@ class Notifications extends ImmutablePureComponent {
        />
      ) : (
        <NotificationContainer
-          key={item.get('id')}
+          key={`notification-${index}`}
          notification={item}
-          accountId={item.get('account')}
          onMoveUp={this.handleMoveUp}
          onMoveDown={this.handleMoveDown}
        />
-      ));
+      ))
    } else {
-      scrollableContent = null;
+      scrollableContent = null
    }

-    this.scrollableContent = scrollableContent;
+    this.scrollableContent = scrollableContent

    return (
      <div ref={this.setColumnRef}>
@@ -191,18 +199,20 @@ class Notifications extends ImmutablePureComponent {
          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>
+        <Block>
+          <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>
+        </Block>
      </div>
    )
  }