Added trending_hashtags to redux to fetch on isXS in SearchLayout

• Added:
- trending_hashtags to redux to fetch on isXS in SearchLayout

• Removed:
- trending_hashtags from initial state

app/javascript/gabsocial/actions/trending_hashtags.js

@@ -0,0 +1,38 @@
+import api from '../api'
+import { me } from '../initial_state'
+
+export const TRENDING_HASHTAGS_FETCH_REQUEST = 'TRENDING_HASHTAGS_FETCH_REQUEST'
+export const TRENDING_HASHTAGS_FETCH_SUCCESS = 'TRENDING_HASHTAGS_FETCH_SUCCESS'
+export const TRENDING_HASHTAGS_FETCH_FAIL = 'TRENDING_HASHTAGS_FETCH_FAIL'
+
+/**
+ * Fetch trending hashtags
+ */
+export const fetchTrendingHashtags = () => (dispatch, getState) => {
+  if (!me) return
+
+  const isFetched = getState().getIn(['trending_hashtags', 'fetched'], false)
+  if (isFetched) return
+
+  dispatch(fetchTrendingHashtagsRequest())
+
+  api(getState).get('/api/v1/trending_hashtags').then((response) => {
+    dispatch(fetchTrendingHashtagsSuccess(response.data.trending_hashtags))        
+  }).catch((error) => {
+    dispatch(fetchTrendingHashtagsFail(error))
+  })
+}
+
+const fetchTrendingHashtagsRequest = () => ({
+  type: TRENDING_HASHTAGS_FETCH_REQUEST,
+})
+
+const fetchTrendingHashtagsSuccess = (hashtags) => ({
+  type: TRENDING_HASHTAGS_FETCH_SUCCESS,
+  hashtags,
+})
+
+const fetchTrendingHashtagsFail = (error, listType) => ({
+  type: TRENDING_HASHTAGS_FETCH_FAIL,
+  error,
+})

app/javascript/gabsocial/initial_state.js

@@ -19,7 +19,6 @@ export const version = getMeta('version');
 export const isStaff = getMeta('is_staff');
 export const unreadCount = getMeta('unread_count');
 export const lastReadNotificationId = getMeta('last_read_notification_id');
-export const trendingHashtags = getMeta('trending_hashtags');
 export const isFirstSession = getMeta('is_first_session');
 export const emailConfirmed = getMeta('email_confirmed');
 export const meEmail = getMeta('email');

app/javascript/gabsocial/layouts/search_layout.js

@@ -2,11 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
-import { me, trendingHashtags } from '../initial_state'
+import { me } from '../initial_state'
 import {
   BREAKPOINT_EXTRA_SMALL,
   CX,
 } from '../constants'
+import { fetchTrendingHashtags } from '../actions/trending_hashtags'
 import Layout from '../layouts/layout'
 import PageTitle from '../features/ui/util/page_title'
 import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
@@ -32,31 +33,19 @@ class SearchLayout extends React.PureComponent {
   state = {
     isSearchFocused: false,
     currentExploreTabIndex: 0,
-  }
-
-  componentWillMount() {
-    const { intl } = this.props
-
-    this.exploreTabs = [
+    setTrendingHashtags: false,
+    exploreTabs: [
       {
         title: 'Explore',
         onClick: () => this.setState({ currentExploreTabIndex: 0 }),
         component: ExploreTimeline,
       }
     ]
-
-    if (Array.isArray(trendingHashtags)) {
-      trendingHashtags.forEach((tag, i) => {
-        let j = i + 1
-        this.exploreTabs.push({
-          title: `#${tag}`,
-          onClick: () => this.setState({ currentExploreTabIndex: j }),
-          component: HashtagTimeline,
-          componentParams: { params: { id: `${tag}`.toLowerCase() } },
-        })
-      })
   }
 
+  componentWillMount() {
+    const { intl } = this.props
+
     this.searchTabs = [
       {
         title: intl.formatMessage(messages.top),
@@ -82,6 +71,48 @@ class SearchLayout extends React.PureComponent {
     ]
   }
 
+  componentDidMount() {
+    this._shouldSetTrendingHashtags()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.trendingHashtags !== this.props.trendingHashtags) {
+      this._shouldSetTrendingHashtags()
+    }
+  }
+
+  _shouldSetTrendingHashtags = () => {
+    const {
+      isXS,
+      trendingHashtags,
+      trendingHashtagsFetched,
+    } = this.props
+    const { exploreTabs, setTrendingHashtags } = this.state
+
+    if (!isXS || setTrendingHashtags) return false
+    
+    if (!trendingHashtagsFetched) {
+      this.props.onFetchTrendingHashtags()
+      return
+    }
+
+    if (Array.isArray(trendingHashtags) && trendingHashtagsFetched) {
+      trendingHashtags.forEach((tag, i) => {
+        let j = i + 1
+        exploreTabs.push({
+          title: `#${tag}`,
+          onClick: () => this.setState({ currentExploreTabIndex: j }),
+          component: HashtagTimeline,
+          componentParams: { params: { id: `${tag}`.toLowerCase() } },
+        })
+      })
+      this.setState({
+        exploreTabs,
+        setTrendingHashtags: true,
+      })  
+    }
+  }
+
   handleOnToggleSearchExplore = (isSearchFocused) => {
     this.setState({ isSearchFocused })
   }
@@ -93,15 +124,15 @@ class SearchLayout extends React.PureComponent {
       value,
     } = this.props
     const {
+      exploreTabs,
       isSearchFocused,
       currentExploreTabIndex,
      } = this.state
 
-
-    const activeExploreTab = this.exploreTabs[currentExploreTabIndex];
+    const activeExploreTab = exploreTabs[currentExploreTabIndex];
     const activeTabComponent = activeExploreTab.component
     const activeTabComponentParams = activeExploreTab.componentParams || {}
-    const activeExploreTabs = this.exploreTabs.map((tab, i) => {
+    const activeExploreTabs = exploreTabs.map((tab, i) => {
       return {
         ...tab,
         active: i === currentExploreTabIndex,
@@ -184,11 +215,6 @@ class SearchLayout extends React.PureComponent {
 
 }
 
-SearchLayout.propTypes = {
-  intl: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  value: PropTypes.string,
-}
 
 const messages = defineMessages({
   search: { id: 'search', defaultMessage: 'Search' },
@@ -202,6 +228,24 @@ const messages = defineMessages({
 
 const mapStateToProps = (state) => ({
   value: state.getIn(['search', 'value']),
+  trendingHashtags: state.getIn(['trending_hashtags', 'items']),
+  trendingHashtagsFetched: state.getIn(['trending_hashtags', 'fetched'], false),
+  isXS: state.getIn(['settings', 'window_dimensions', 'width']) <= BREAKPOINT_EXTRA_SMALL,
 })
 
-export default injectIntl(connect(mapStateToProps)(SearchLayout))
+const mapDispatchToProps = (dispatch) => ({
+  onFetchTrendingHashtags() {
+    dispatch(fetchTrendingHashtags())
+  },
+})
+
+
+SearchLayout.propTypes = {
+  intl: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  value: PropTypes.string,
+  trendingHashtags: PropTypes.array,
+  isXS: PropTypes.bool.isRequired,
+}
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SearchLayout))

app/javascript/gabsocial/reducers/index.js

@@ -52,6 +52,7 @@ import suggestions from './suggestions'
 import timelines from './timelines'
 import timeline_injections from './timeline_injections'
 import toasts from './toasts'
+import trending_hashtags from './trending_hashtags'
 import user from './user'
 import user_lists from './user_lists'
 
@@ -109,6 +110,7 @@ const reducers = {
   timelines,
   timeline_injections,
   toasts,
+  trending_hashtags,
   user,
   user_lists,
 }

app/javascript/gabsocial/reducers/trending_hashtags.js

@@ -0,0 +1,22 @@
+import { Map as ImmutableMap } from 'immutable'
+import {
+  TRENDING_HASHTAGS_FETCH_REQUEST,
+  TRENDING_HASHTAGS_FETCH_SUCCESS,
+  TRENDING_HASHTAGS_FETCH_FAIL,
+} from '../actions/trending_hashtags'
+
+const initialState = ImmutableMap({
+  fetched: false,
+  items: []
+})
+
+export default function trending_hashtags(state = initialState, action) {
+  switch (action.type) {
+  case TRENDING_HASHTAGS_FETCH_FAIL:
+    return state.set('fetched', true).set('items', [])
+  case TRENDING_HASHTAGS_FETCH_SUCCESS:
+    return state.set('fetched', true).set('items', action.hashtags)
+  default:
+    return state
+  }
+}