Progress

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

@@ -0,0 +1,77 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl } from 'react-intl'
+import { createSelector } from 'reselect'
+import { fetchLists } from '../../actions/lists'
+import PanelLayout from './panel_layout'
+import List from '../list'
+
+const getOrderedLists = createSelector([state => state.get('lists')], lists => {
+  if (!lists) return lists
+
+  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')))
+})
+
+const messages = defineMessages({
+  title: { id: 'lists.subheading', defaultMessage: 'Your Lists' },
+  show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
+  all: { id: 'groups.sidebar-panel.all', defaultMessage: 'All' },
+})
+
+const mapStateToProps = (state) => ({
+  lists: getOrderedLists(state),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onFetchLists() {
+    return dispatch(fetchLists())
+  },
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListsPanel extends ImmutablePureComponent {
+  static propTypes = {
+    onFetchLists: PropTypes.func.isRequired,
+    lists: ImmutablePropTypes.list,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentWillMount() {
+    this.props.onFetchLists()
+  }
+
+  render() {
+    const { intl, lists } = this.props
+    const count = lists.count()
+
+    if (count === 0) return null
+
+    const maxCount = 6
+
+    const listItems = lists.slice(0, maxCount).map(list => ({
+      to: `/lists/${list.get('id')}`,
+      title: list.get('title'),
+    }))
+
+    return (
+      <PanelLayout
+        title={intl.formatMessage(messages.title)}
+        headerButtonTitle={intl.formatMessage(messages.all)}
+        headerButtonTo='/lists'
+        footerButtonTitle={count > maxCount ? intl.formatMessage(messages.show_all) : undefined}
+        footerButtonTo={count > maxCount ? '/lists' : undefined}
+        noPadding
+      >
+        <div className={_s.default}>
+          <List
+            unrounded
+            scrollKey='lists_sidebar_panel'
+            items={listItems}
+          />
+        </div>
+      </PanelLayout>
+    )
+  }
+}

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>
     )