Updated Explore feature

• Updated:
- Explore feature

app/javascript/gabsocial/features/explore.js

@@ -1,230 +1,99 @@
+import { defineMessages, injectIntl } from 'react-intl'
 import { withRouter } from 'react-router-dom'
-import isObject from 'lodash.isobject'
-import queryString from 'query-string'
-import { fetchGabTrends } from '../actions/gab_trends'
-import { BREAKPOINT_EXTRA_SMALL } from '../constants'
-import Block from '../components/block'
-import Button from '../components/button'
-import ColumnIndicator from '../components/column_indicator'
-import Heading from '../components/heading'
-import Icon from '../components/icon'
-import Pills from '../components/pills'
-import Responsive from './ui/util/responsive_component';
-import TabBar from '../components/tab_bar'
-import Text from '../components/text'
-import TrendsItem from '../components/trends_item'
+import throttle from 'lodash.throttle'
+import {
+  expandHomeTimeline,
+  forceDequeueTimeline,
+} from '../actions/timelines'
+import StatusList from '../components/status_list'
 
-// const messages = defineMessages({
-//   title: { id: 'trends.title', defaultMessage: 'Trending right now' },
-// })
+const messages = defineMessages({
+  title: { id: 'column.home', defaultMessage: 'Home' },
+  empty: { id: 'empty_timeline.home', defaultMessage: 'Your home timeline is empty. Start following other users to receive their content here.' },
+})
 
 const mapStateToProps = (state) => ({
-  isError: state.getIn(['gab_trends', 'partner', 'isError']),
-  isLoading: state.getIn(['gab_trends', 'partner', 'isLoading']),
-  items: state.getIn(['gab_trends', 'partner', 'items']),
+  isPartial: state.getIn(['timelines', 'home', 'isPartial']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  onfetchGabTrends: () => dispatch(fetchGabTrends('partner')),
+  onExpandHomeTimeline(options) {
+    if (!options) dispatch(forceDequeueTimeline('home'))
+    dispatch(expandHomeTimeline(options))
+  },
 })
 
 export default
+@injectIntl
 @withRouter
 @connect(mapStateToProps, mapDispatchToProps)
 class Explore extends PureComponent {
 
-  static contextTypes = {
-    router: PropTypes.object.isRequired,
-  }
-
   static propTypes = {
     intl: PropTypes.object.isRequired,
-    isError: PropTypes.bool,
-    isLoading: PropTypes.bool,
-    items: PropTypes.object,
-    onfetchGabTrends: PropTypes.func.isRequired,
+    isPartial: PropTypes.bool,
+    onExpandHomeTimeline: PropTypes.func.isRequired,
   }
 
-  state = {
-    activeDomain: null,
+  componentDidMount () {
+    this._checkIfReloadNeeded(false, this.props.isPartial)
   }
 
-  updateOnProps = [
-    'items',
-    'isLoading',
-    'isError',
-  ]
-
-  componentDidUpdate(prevProps) {
-    if (this.props.location !== prevProps.location) {
-      this.setActiveDomain(this.props.location)
+  componentDidUpdate (prevProps) {
+    this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial)
+    
+    //Check if clicked on "home" button, if so, reload
+    if (prevProps.location.key !== this.props.location.key &&
+        prevProps.location.pathname === '/home' &&
+        this.props.location.pathname === '/home') {
+      this.handleReload()
     }
   }
 
-  componentDidMount() {
-    this.props.onfetchGabTrends()
-    this.setActiveDomain(this.props.location)
+  componentWillUnmount () {
+    this._stopPolling()
   }
 
-  setActiveDomain(location) {
-    const { search } = location
-    const qp = queryString.parse(search)
-    const domain = qp.domain ? `${qp.domain}`.toLowerCase() : undefined
+  handleLoadMore = (maxId) => {
+    this.props.onExpandHomeTimeline({ maxId })
+  }
 
-    if (!!domain) {
-      this.setState({ activeDomain: domain })
-    } else {
-      this.setState({ activeDomain: null })
+  handleReload = throttle(() => {
+    this.props.onExpandHomeTimeline()
+  }, 5000)
+
+  _checkIfReloadNeeded (wasPartial, isPartial) {
+    const { onExpandHomeTimeline } = this.props
+
+    if (!wasPartial && isPartial) {
+      this.polling = setInterval(() => {
+        onExpandHomeTimeline()
+      }, 3000)
+    } else if (wasPartial && !isPartial) {
+      this._stopPolling()
+    }
+  }
+
+  _stopPolling () {
+    if (this.polling) {
+      clearInterval(this.polling)
+      this.polling = null
     }
   }
 
   render () {
-    const {
-      intl,
-      isError,
-      isLoading,
-      items,
-    } = this.props
-    const { activeDomain } = this.state
+    const { intl } = this.props
 
-    if (isError || !isObject(items)) {
-      return <div>error</div>
-    }
-
-    let domainExists = !activeDomain
-    let headline, headlineLink
-    let todaysTopTitle
-    let leadHeadlines = []
-    let todaysTop = []
-    let domainTabs = []
-    try {
-      headline = items.headline.title
-      headlineLink = items.headline.href
-      leadHeadlines = items.leadHeadlines
-
-      if (activeDomain) {
-        const domainBlock = items.trackedDomains.find((d) => `${d.domain}`.toLowerCase() === activeDomain)
-        if (domainBlock) domainExists = true
-        
-        todaysTop = domainBlock.topUrls
-        todaysTopTitle = domainBlock.title
-      } else {
-        todaysTop = items.trending.topUrls
-        todaysTopTitle = "Today's Top"
-      }
-
-      const domains = items.trackedDomains
-      domainTabs = domains.map((block) => ({
-        title: block.title,
-        to: `/explore?domain=${block.domain}`,
-        onClick: () => {},
-        active: activeDomain === `${block.domain}`.toLowerCase(),
-      }))
-      domainTabs = [
-        {
-          title: "Today's Top",
-          to: `/explore`,
-          onClick: () => {},
-          active: !activeDomain,
-        },
-        ...domainTabs,
-      ]
-    } catch (error) {
-      return (
-        <div className={[_s.default, _s.width100PC].join(' ')}>
-          <Block>
-            <ColumnIndicator type='loading' />
-          </Block>
-        </div>
-      )
-    }
-
-    if (!domainExists) {
-      return <div>error</div>
-    }
+    const emptyMessage = intl.formatMessage(messages.empty)
 
     return (
-      <div className={[_s.default, _s.width100PC].join(' ')}>
-        <Block>
-          <div className={[_s.default, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-              <TabBar tabs={domainTabs} />
-            </Responsive>
-            <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-              <div className={[_s.default, _s.width100PC, _s.pt10, _s.pb5].join(' ')}>
-                <Pills pills={domainTabs} />
-              </div>
-            </Responsive>
-          </div>
-
-          <div className={[_s.default, _s.px15].join(' ')}>
-            {
-              !activeDomain &&
-              <div className={[_s.default, _s.py15, _s.mt15, _s.mb15].join(' ')}>
-                <Heading size='h1'>
-                  <a href={`https://trends.gab.com/trend?url=${headlineLink}`} className={[_s.noUnderline, _s.colorPrimary].join(' ')}>
-                    {headline}
-                  </a>
-                </Heading>
-              </div>
-            }
-            
-            {
-              !activeDomain && leadHeadlines.length > 0 &&
-                <div className={[_s.default, _s.mb15].join(' ')}>
-                  <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.justifyContentCenter].join(' ')}>
-                    <Heading size='h2'>
-                      <Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
-                      Headlines
-                    </Heading>
-                  </div>
-                  {
-                    leadHeadlines.map((lead) => (
-                      <Button
-                        isText
-                        backgroundColor='none'
-                        color='primary'
-                        className={[_s.default, _s.py7].join(' ')}
-                        href={`https://trends.gab.com/trend?url=${lead.href}`}
-                      >
-                        <Text>
-                          {lead.title}
-                        </Text>
-                      </Button>
-                    ))
-                  }
-                </div>
-            }
-
-            <div>
-              <div className={[_s.default, _s.px15, _s.mt15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.justifyContentCenter].join(' ')}>
-                <Heading size='h2'>
-                  <Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
-                  {todaysTopTitle}
-                </Heading>
-              </div>
-              <div className={[_s.default, _s.py10].join(' ')}>
-                {
-                  todaysTop.map((block, i) => (
-                    <TrendsItem
-                      key={`explore-trending-item-${i}`}
-                      index={i + 1}
-                      title={block.pagePreview.title}
-                      author={block.domain.domain}
-                      description={block.pagePreview.description}
-                      url={`https://trends.gab.com/trend?url=${block.pagePreview.url}`}
-                      date={block.created}
-                      isLast={todaysTop.length - 1 === i}
-                    />
-                  ))
-                }
-              </div>
-            </div>
-
-          </div>
-        </Block>
-      </div>
+      <StatusList
+        scrollKey='home_timeline'
+        onLoadMore={this.handleLoadMore}
+        timelineId='home'
+        emptyMessage={emptyMessage}
+      />
     )
   }
 
-}
+}