Progress

2020-04-28 01:33:58 -04:00
parent 763694b5ab
commit c3d0d8bde2
87 changed files with 1392 additions and 826 deletions
--- a/app/javascript/gabsocial/components/panel/group_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/group_info_panel.js
@@ -1,5 +1,5 @@
 import { Fragment } from 'react'
-import { defineMessages, injectIntl } from 'react-intl'
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { shortNumberFormat } from '../../utils/numbers'
@@ -9,6 +9,7 @@ import Divider from '../divider'
 import Heading from '../heading'
 import Icon from '../icon'
 import Text from '../text'
+import RelativeTimestamp from '../relative_timestamp'

 const messages = defineMessages({
  title: { id: 'about', defaultMessage: 'About' },
@@ -27,15 +28,19 @@ class GroupInfoPanel extends ImmutablePureComponent {
  render() {
    const { intl, group } = this.props

+    console.log("group:", group)
+
    return (
      <PanelLayout title={intl.formatMessage(messages.title)}>
        {
          !!group &&
          <Fragment>

-            <Heading size='h2'>
-              {group.get('title')}
-            </Heading>
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <Text weight='medium'>
+                {group.get('title')}
+              </Text>
+            </div>

            <Divider isSmall />

@@ -63,6 +68,23 @@ class GroupInfoPanel extends ImmutablePureComponent {

            <Divider isSmall />

+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <Icon id='calendar' size='12px' className={_s.fillColorSecondary} />
+              <Text
+                size='small'
+                color='secondary'
+                className={_s.ml5}
+              >
+                {
+                  <FormattedMessage id='lists.panel_created' defaultMessage='Created: {date}' values={{
+                    date: <RelativeTimestamp timestamp={group.get('created_at')} />,
+                  }} />
+                }
+              </Text>
+            </div>
+
+            <Divider isSmall />
+
            <Text>
              {group.get('description')}
            </Text>
--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -1,9 +1,10 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
+import { fetchGroups } from '../../actions/groups'
 import PanelLayout from './panel_layout'
 import GroupListItem from '../group_list_item'
-import Button from '../button'
+import ScrollableList from '../scrollable_list'

 const messages = defineMessages({
  title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups you\'re in' },
@@ -15,13 +16,41 @@ const mapStateToProps = (state) => ({
  groupIds: state.getIn(['group_lists', 'member']),
 })

+const mapDispatchToProps = (dispatch) => ({
+  onFetchGroups: (type) => {
+    dispatch(fetchGroups(type))
+  }
+})
+
 export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
 class GroupSidebarPanel extends ImmutablePureComponent {
  static propTypes = {
    groupIds: ImmutablePropTypes.list,
-    slim: PropTypes.bool,
+    isLazy: PropTypes.bool, 
+    isSlim: PropTypes.bool,
+    onFetchGroups: PropTypes.func.isRequired,
+  }
+
+  state = {
+    fetched: false,
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
+      return {
+        fetched: true
+      }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (!prevState.fetched && this.state.fetched && this.props.isLazy) {
+      this.props.onFetchGroups('member')
+    }
  }

  render() {
@@ -42,16 +71,20 @@ class GroupSidebarPanel extends ImmutablePureComponent {
        noPadding={slim}
      >
        <div className={_s.default}>
-          {
-            groupIds.slice(0, maxCount).map((groupId, i) => (
-              <GroupListItem
-                key={`group-panel-item-${groupId}`}
-                id={groupId}
-                slim={slim}
-                isLast={groupIds.length - 1 === i}
-              />
-            ))
-          }
+          <ScrollableList
+            scrollKey='groups-panel'
+          >
+            {
+              groupIds.slice(0, maxCount).map((groupId, i) => (
+                <GroupListItem
+                  key={`group-panel-item-${groupId}`}
+                  id={groupId}
+                  slim={slim}
+                  isLast={groupIds.length - 1 === i}
+                />
+              ))
+            }
+          </ScrollableList>
        </div>
      </PanelLayout>
    )
--- a/app/javascript/gabsocial/components/panel/list_details_panel.js
+++ b/app/javascript/gabsocial/components/panel/list_details_panel.js
@@ -1,57 +1,48 @@
-import { defineMessages, injectIntl } from 'react-intl'
-import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions'
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import PanelLayout from './panel_layout'
-import Avatar from '../avatar'
 import Divider from '../divider'
 import Icon from '../icon'
-import Heading from '../heading'
+import RelativeTimestamp from '../relative_timestamp'
 import Text from '../text'

 const messages = defineMessages({
-  dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
-  memberCount: { id: 'lists.panel_members', defaultMessage: 'Members: {count}' },
-  createdAt: { id: 'lists.panel_created', defaultMessage: 'Created: {date}' },
  title: { id: 'lists_information', defaultMessage: 'List Information' },
  edit: { id: 'edit', defaultMessage: 'Edit' },
 })

-const mapStateToProps = (state) => ({
-  // accountIds: state.getIn(['listEditor', 'accounts', 'items']),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-
-})
-
 export default
-@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
 class ListDetailsPanel extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
+    onEdit: PropTypes.func.isRequired,
+    list: ImmutablePropTypes.map,
  }

-  handleShowAllLists() {
-
+  handleOnEdit = () => {
+    this.props.onEdit()
  }

  render() {
-    const { intl } = this.props
+    const { intl, list } = this.props
+
+    const title = !!list ? list.get('title') : ''
+    const createdAt = !!list ? list.get('created_at') : ''

    return (
      <PanelLayout
        title={intl.formatMessage(messages.title)}
        headerButtonTitle={intl.formatMessage(messages.edit)}
-        headerButtonAction={this.handleShowAllLists}
+        headerButtonAction={this.handleOnEdit}
      >
        <div className={_s.default}>

-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter,].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
            <Text weight='medium'>
-              Some List Title
+              {title}
            </Text>
          </div>

@@ -65,42 +56,13 @@ class ListDetailsPanel extends ImmutablePureComponent {
              className={_s.ml5}
            >
              {
-                intl.formatMessage(messages.createdAt, {
-                  date: '12-25-2019'
-                })
+                <FormattedMessage id='lists.panel_created' defaultMessage='Created: {date}' values={{
+                  date: <RelativeTimestamp timestamp={createdAt} />,
+                }} />
              }
            </Text>
          </div>

-          <Divider isSmall />
-
-          <div className={[_s.default].join(' ')}>
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Icon id='group' size='12px' className={_s.fillColorSecondary} />
-              <Text
-                size='small'
-                color='secondary'
-                className={_s.ml5}
-              >
-                {
-                  intl.formatMessage(messages.memberCount, {
-                    count: 10
-                  })
-                }
-              </Text>
-            </div>
-            <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.pt10].join(' ')}>
-
-              {
-                [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => (
-                  <div className={[_s.default, _s.mr5].join(' ')}>
-                    <Avatar size={26} />
-                  </div>
-                ))
-              }
-            </div>
-          </div>
-
        </div>
      </PanelLayout>
    )
--- a/app/javascript/gabsocial/components/panel/lists_panel.js
+++ b/app/javascript/gabsocial/components/panel/lists_panel.js
@@ -32,8 +32,28 @@ class ListsPanel extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
  }

-  componentWillMount() {
-    this.props.onFetchLists()
+  state = {
+    fetched: false,
+  }
+
+  updateOnProps = [
+    'lists',
+  ]
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
+      return {
+        fetched: true,
+      }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (!prevState.fetched && this.state.fetched) {
+      this.props.onFetchLists()
+    }
  }

  render() {
--- a/app/javascript/gabsocial/components/panel/media_gallery_panel.js
+++ b/app/javascript/gabsocial/components/panel/media_gallery_panel.js
@@ -66,11 +66,12 @@ class MediaGalleryPanel extends ImmutablePureComponent {
      >
        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
          {
-            attachments.slice(0, 16).map((attachment) => (
+            attachments.slice(0, 16).map((attachment, i) => (
              <MediaItem
-                small
+                isSmall
                key={attachment.get('id')}
                attachment={attachment}
+                account={account}
              />
            ))
          }
--- a/app/javascript/gabsocial/components/panel/notification_filter_panel.js
+++ b/app/javascript/gabsocial/components/panel/notification_filter_panel.js
@@ -9,7 +9,7 @@ import SettingSwitch from '../setting_switch'
 const messages = defineMessages({
  title: { id: 'notification_filters', defaultMessage: 'Notification Filters' },
  onlyVerified: { id: 'notification_only_verified', defaultMessage: 'Only Verified Users' },
-  onlyFollowing: { id: 'notification_only_following', defaultMessage: 'Only People I Follow' },
+  // onlyFollowing: { id: 'notification_only_following', defaultMessage: 'Only People I Follow' },
 })

 const mapStateToProps = (state) => ({
@@ -55,13 +55,14 @@ class NotificationFilterPanel extends ImmutablePureComponent {
          label={intl.formatMessage(messages.onlyVerified)}
        />

-        <SettingSwitch
+        { /* : todo :
+          <SettingSwitch
          prefix='notification'
          settings={settings}
          settingPath={'onlyFollowing'}
          onChange={onChange}
          label={intl.formatMessage(messages.onlyFollowing)}
-        />
+        /> */ }
      </PanelLayout>
    )
  }
--- a/app/javascript/gabsocial/components/panel/trends_panel.js
+++ b/app/javascript/gabsocial/components/panel/trends_panel.js
@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import { fetchGabTrends } from '../../actions/gab_trends'
 import PanelLayout from './panel_layout'
 import ColumnIndicator from '../column_indicator'
+import ScrollableList from '../scrollable_list'
 import TrendingItem from '../trends_item'

 const messages = defineMessages({
@@ -29,7 +30,7 @@ class TrendsPanel extends ImmutablePureComponent {
    onFetchGabTrends: PropTypes.func.isRequired,
  }

-  componentWillMount() {
+  componentDidMount() {
    this.props.onFetchGabTrends()
  }

@@ -47,19 +48,26 @@ class TrendsPanel extends ImmutablePureComponent {
            <ColumnIndicator type='loading' />
          }
          {
-            gabtrends && gabtrends.slice(0, 8).map((trend, i) => (
-              <TrendingItem
-                key={`gab-trend-${i}`}
-                index={i + 1}
-                isLast={i === 7}
-                url={trend.get('url')}
-                title={trend.get('title')}
-                description={trend.get('description')}
-                imageUrl={trend.get('image')}
-                publishDate={trend.get('date_published')}
-                author={trend.getIn(['author', 'name'], '')}
-              />
-            ))
+            !gabtrends.isEmpty() && 
+            <ScrollableList
+              scrollKey='trending-items'
+            >
+              {
+                gabtrends.slice(0, 8).map((trend, i) => (
+                  <TrendingItem
+                    key={`gab-trend-${i}`}
+                    index={i + 1}
+                    isLast={i === 7}
+                    url={trend.get('url')}
+                    title={trend.get('title')}
+                    description={trend.get('description')}
+                    imageUrl={trend.get('image')}
+                    publishDate={trend.get('date_published')}
+                    author={trend.getIn(['author', 'name'], '')}
+                  />
+                ))
+              }
+            </ScrollableList>
          }
        </div>
      </PanelLayout>
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
@@ -36,19 +36,34 @@ class WhoToFollowPanel extends ImmutablePureComponent {
    'suggestions',
  ]

-  componentDidMount () {
-    this.props.fetchSuggestions()
+  state = {
+    fetched: false,
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
+      return {
+        fetched: true
+      }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (!prevState.fetched && this.state.fetched) {
+      this.props.fetchSuggestions()
+    }
  }

  render() {
    const { intl, suggestions, dismissSuggestion } = this.props

-    if (suggestions.isEmpty()) {
-      return null
-    }
+    if (suggestions.isEmpty()) return null

    return (
      <PanelLayout
+        noPadding
        title={intl.formatMessage(messages.title)}
        footerButtonTitle={intl.formatMessage(messages.show_more)}
        footerButtonTo='/explore'
@@ -57,6 +72,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
          {
            suggestions.map(accountId => (
              <Account
+                compact
                showDismiss
                key={accountId}
                id={accountId}