Updated name of TrendsPanel to TrendsBreakingPanel

• Updated:
- name of TrendsPanel to TrendsBreakingPanel
- removed ScrollableList from TrendsPanel

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

@@ -0,0 +1,102 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { injectIntl, defineMessages } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { fetchGabTrends } from '../../actions/news'
+import PanelLayout from './panel_layout'
+import TrendsItem from '../trends_item'
+import TrendsItemPlaceholder from '../placeholder/trends_item_placeholder'
+
+class TrendsBreakingPanel extends ImmutablePureComponent {
+
+  state = {
+    fetched: false,
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.shouldLoad && !prevState.fetched) {
+      return { fetched: true }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.fetched && this.state.fetched && this.props.isLazy) {
+      this.props.dispatch(fetchGabTrends())
+    }
+  }
+
+  componentDidMount() {
+    if (!this.props.isLazy) {
+      this.props.dispatch(fetchGabTrends())
+      this.setState({ fetched: true })
+    }
+  }
+
+  render() {
+    const {
+      intl,
+      isLoading,
+      items,
+      hideReadMore,
+    } = this.props
+    const { fetched } = this.state
+  
+    const count = !!items ? items.count() : 0
+    if (count === 0 && fetched) return null
+
+    return (
+      <PanelLayout
+        noPadding
+        title={intl.formatMessage(messages.title)}
+        headerButtonTitle={!hideReadMore ? intl.formatMessage(messages.readMore) : undefined}
+        headerButtonTo='/news#breaking'
+        footerButtonTitle={!hideReadMore ? intl.formatMessage(messages.readMore) : undefined}
+        footerButtonTo='/news#breaking'
+      >
+        {
+          count > 0 &&
+          items.slice(0, 5).map((trend, i) => (
+            <TrendsItem key={`gab-trend-panel-${i}`} trend={trend} />
+          ))
+        }
+
+        {
+          count === 0 &&
+          <React.Fragment>
+            <TrendsItemPlaceholder />
+            <TrendsItemPlaceholder />
+            <TrendsItemPlaceholder />
+            <TrendsItemPlaceholder />
+            <TrendsItemPlaceholder />
+          </React.Fragment>
+        }
+      </PanelLayout>
+    )
+  }
+}
+
+const messages = defineMessages({
+  title: { id: 'trends.breaking_title', defaultMessage: 'Breaking right now' },
+  readMore: { id: 'status.read_more', defaultMessage: 'Read more' },
+})
+
+const mapStateToProps = (state) => ({
+  isLoading: state.getIn(['news', 'trends_breaking', 'isLoading']),
+  isFetched: state.getIn(['news', 'trends_breaking', 'isFetched']),
+  items: state.getIn(['news', 'trends_breaking', 'items']),
+})
+
+TrendsBreakingPanel.propTypes = {
+  intl: PropTypes.object.isRequired,
+  isLazy: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isFetched: PropTypes.bool,
+  items: ImmutablePropTypes.list.isRequired,
+  hideReadMore: PropTypes.bool,
+}
+
+export default injectIntl(connect(mapStateToProps)(TrendsBreakingPanel))

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

@@ -1,118 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { injectIntl, defineMessages } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import { fetchGabTrends } from '../../actions/gab'
-import PanelLayout from './panel_layout'
-import ScrollableList from '../scrollable_list'
-import TrendsItem from '../trends_item'
-import TrendsItemPlaceholder from '../placeholder/trends_item_placeholder'
-
-class TrendsPanel extends ImmutablePureComponent {
-
-  updateOnProps = [
-    'items',
-    'isLazy',
-    'isLoading',
-    'isError',
-  ]
-
-  state = {
-    fetched: false,
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.shouldLoad && !prevState.fetched) {
-      return { fetched: true }
-    }
-
-    return null
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (!prevState.fetched && this.state.fetched) {
-      this.props.onfetchGabTrends()
-    }
-  }
-
-  componentDidMount() {
-    if (!this.props.isLazy) {
-      this.props.onfetchGabTrends()
-      this.setState({ fetched: true })
-    }
-  }
-
-  render() {
-    const {
-      intl,
-      isError,
-      isLoading,
-      items,
-    } = this.props
-    const { fetched } = this.state
-    
-    const count = !!items ? items.count() : 0
-    if (isError || (count === 0 && fetched)) return null
-
-    return (
-      <PanelLayout
-        noPadding
-        title={intl.formatMessage(messages.title)}
-        headerButtonTitle={intl.formatMessage(messages.readMore)}
-        headerButtonTo='/news'
-        footerButtonTitle={intl.formatMessage(messages.readMore)}
-        footerButtonTo='/news'
-      >
-        <ScrollableList
-          showLoading={isLoading}
-          placeholderComponent={TrendsItemPlaceholder}
-          placeholderCount={8}
-          scrollKey='trending-items'
-        >
-          {
-            items.slice(0, 8).map((trend, i) => (
-              <TrendsItem
-                key={`gab-trend-${i}`}
-                index={i + 1}
-                isLast={i === 7}
-                title={trend.get('title')}
-                description={trend.get('description')}
-                url={trend.get('url')}
-                author={trend.getIn(['author', 'name'], '')}
-                date={trend.get('date_published')}
-              />
-            ))
-          }
-        </ScrollableList>
-      </PanelLayout>
-    )
-  }
-}
-
-const messages = defineMessages({
-  title: { id: 'trends.title', defaultMessage: 'Trending right now' },
-  readMore: { id: 'status.read_more', defaultMessage: 'Read more' },
-})
-
-const mapStateToProps = (state) => ({
-  isError: state.getIn(['gab', 'feed', 'isError']),
-  isLoading: state.getIn(['gab', 'feed', 'isLoading']),
-  items: state.getIn(['gab', 'feed', 'items']),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  onfetchGabTrends: () => dispatch(fetchGabTrends('feed')),
-})
-
-TrendsPanel.propTypes = {
-  intl: PropTypes.object.isRequired,
-  isError: PropTypes.bool,
-  isLazy: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  items: ImmutablePropTypes.list.isRequired,
-  onfetchGabTrends: PropTypes.func.isRequired,
-}
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TrendsPanel))

app/javascript/gabsocial/layouts/explore_layout.js

@@ -15,7 +15,7 @@ import {
   GroupsPanel,
   SignUpLogInPanel,
   UserSuggestionsPanel,
-  TrendsPanel,
+  TrendsBreakingPanel,
 } from '../features/ui/util/async_components'
 
 class ExploreLayout extends ImmutablePureComponent {
@@ -69,7 +69,7 @@ class ExploreLayout extends ImmutablePureComponent {
     if (!!me) {
       layout.push(<WrappedBundle component={UserSuggestionsPanel} componentParams={{ suggestionType: 'verified' }} />)
     }
-    layout.push(<WrappedBundle component={TrendsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />)
+    layout.push(<WrappedBundle component={TrendsBreakingPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />)
 
     return (
       <Layout

app/javascript/gabsocial/layouts/search_layout.js

@@ -19,7 +19,7 @@ import Search from '../components/search'
 import Pills from '../components/pills'
 import {
   LinkFooter,
-  TrendsPanel,
+  TrendsBreakingPanel,
   SearchFilterPanel,
   SignUpPanel,
   ExploreTimeline,
@@ -179,7 +179,7 @@ class SearchLayout extends React.PureComponent {
             layout={[
               SignUpPanel,
               SearchFilterPanel,
-              TrendsPanel,
+              TrendsBreakingPanel,
               LinkFooter,
             ]}
           >

app/javascript/gabsocial/pages/basic_page.js

@@ -4,7 +4,7 @@ import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
 import {
   LinkFooter,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -24,7 +24,7 @@ class BasicPage extends React.PureComponent {
         title={title}
         page={page}
         layout={[
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/community_page.js

@@ -10,7 +10,7 @@ import {
   LinkFooter,
   GroupsPanel,
   ProgressPanel,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -37,7 +37,7 @@ class CommunityPage extends React.PureComponent {
         ]}
         layout={[
           ProgressPanel,
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           GroupsPanel,
           LinkFooter,

app/javascript/gabsocial/pages/hashtag_page.js

@@ -10,7 +10,7 @@ import { MODAL_HASHTAG_TIMELINE_SETTINGS } from '../constants'
 import {
   LinkFooter,
   ProgressPanel,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -49,7 +49,7 @@ class HashtagPage extends React.PureComponent {
         ]}
         layout={[
           ProgressPanel,
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/link_page.js

@@ -4,7 +4,7 @@ import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
 import {
   LinkFooter,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -24,7 +24,7 @@ class LinkPage extends React.PureComponent {
         title={title}
         page={page}
         layout={[
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/list_page.js

@@ -14,7 +14,7 @@ import WrappedBundle from '../features/ui/util/wrapped_bundle'
 import {
   ListDetailsPanel,
   LinkFooter,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -53,7 +53,7 @@ class ListPage extends ImmutablePureComponent {
         ]}
         layout={[
           <WrappedBundle component={ListDetailsPanel} componentParams={{ list: list, onEdit: this.handleOnOpenListEditModal }} />,
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/lists_page.js

@@ -8,7 +8,7 @@ import DefaultLayout from '../layouts/default_layout'
 import { MODAL_LIST_CREATE } from '../constants'
 import {
   LinkFooter,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -35,7 +35,7 @@ class ListsPage extends React.PureComponent {
           },
         ]}
         layout={[
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/notifications_page.js

@@ -10,7 +10,7 @@ import DefaultLayout from '../layouts/default_layout'
 import {
   LinkFooter,
   NotificationFilterPanel,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -56,7 +56,7 @@ class NotificationsPage extends React.PureComponent {
         page='notifications'
         layout={[
           NotificationFilterPanel,
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/shortcuts_page.js

@@ -8,7 +8,7 @@ import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
 import {
   LinkFooter,
-  TrendsPanel,
+  TrendsBreakingPanel,
   UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
@@ -35,7 +35,7 @@ class ShortcutsPage extends React.PureComponent {
           },
         ]}
         layout={[
-          TrendsPanel,
+          TrendsBreakingPanel,
           UserSuggestionsPanel,
           LinkFooter,
         ]}