Progress

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

@@ -1,63 +1,68 @@
 import { injectIntl, defineMessages } from 'react-intl'
-// import { fetchTrends } from '../../actions/trends'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import TrendingItem from '../trends_panel_item'
+import { fetchGabTrends } from '../../actions/gab_trends'
 import PanelLayout from './panel_layout'
+import ColumnIndicator from '../column_indicator'
+import TrendingItem from '../trends_item'
 
 const messages = defineMessages({
   title: { id:'trends.title', defaultMessage: 'Trending right now' },
-  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
 })
 
-// const mapStateToProps = state => ({
-//   trends: state.getIn(['trends', 'items']),
-// })
+const mapStateToProps = state => ({
+  gabtrends: state.getIn(['gab_trends', 'items']),
+})
 
-// const mapDispatchToProps = dispatch => {
-//   return {
-//     fetchTrends: () => dispatch(fetchTrends()),
-//   }
-// }
+const mapDispatchToProps = dispatch => {
+  return {
+    onFetchGabTrends: () => dispatch(fetchGabTrends()),
+  }
+}
 
 export default
-// @connect(mapStateToProps, mapDispatchToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class TrendsPanel extends ImmutablePureComponent {
 
   static propTypes = {
-    trends: ImmutablePropTypes.list.isRequired,
-    // fetchTrends: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    gabtrends: ImmutablePropTypes.list.isRequired,
+    onFetchGabTrends: PropTypes.func.isRequired,
   }
 
-  componentDidMount () {
-    // this.props.fetchTrends()
+  componentWillMount () {
+    this.props.onFetchGabTrends()
   }
 
   render() {
-    const { intl, trends } = this.props
-
-    // !!! TESTING !!!
-    // if (trends.isEmpty()) {
-    //   return null
-    // }
+    const { intl, gabtrends } = this.props
 
     return (
       <PanelLayout
         noPadding
         title={intl.formatMessage(messages.title)}
-        footerButtonTitle={intl.formatMessage(messages.show_all)}
-        footerButtonTo='/explore'
       >
         <div className={_s.default}>
-          { /* trends && trends.map(hashtag => (
-            <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />
-          )) */ }
-          <TrendingItem index='1' />
-          <TrendingItem index='2' />
-          <TrendingItem index='3' />
-          <TrendingItem index='4' />
+          {
+            gabtrends.isEmpty() &&
+            <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'], '')}
+              />
+            ))
+          }
         </div>
       </PanelLayout>
     )