Added Explore page with Gab Trends partner data

• Added:
- Explore page with Gab Trends partner data

app/javascript/gabsocial/components/footer_bar.js

@@ -51,9 +51,10 @@ class FooterBar extends PureComponent {
         active: currentPathname === '/groups',
       },
       {
-        href: 'https://trends.gab.com',
+        to: '/explore',
         icon: 'trends',
         title: 'Trends',
+        active: currentPathname === '/explore',
       },
     ]
 

app/javascript/gabsocial/components/navigation_bar.js

@@ -107,7 +107,8 @@ class NavigationBar extends ImmutablePureComponent {
                 <div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}>
 
                   <NavigationBarButton title='Home' icon='home' to='/home' />
-                  
+                  <NavigationBarButton title='Explore' icon='explore' to='/explore' />
+
                   <NavigationBarButtonDivider />
 
                   <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />

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

@@ -68,7 +68,11 @@ class TrendsPanel extends ImmutablePureComponent {
                 key={`gab-trend-${i}`}
                 index={i + 1}
                 isLast={i === 7}
-                trend={trend}
+                title={trend.get('title')}
+                description={trend.get('description')}
+                url={trend.get('url')}
+                author={trend.getIn(['author', 'name'], '')}
+                date={trend.get('date_published')}
               />
             ))
           }

app/javascript/gabsocial/components/pill_item.js

@@ -23,7 +23,7 @@ class PillItem extends PureComponent {
     // If user navigates to different page, ensure tab bar item
     // with this.props.to that is on location is set to active.
     if (this.props.location !== prevProps.location) {
-      const isCurrent = this.props.to === this.props.location.pathname
+      const isCurrent = this.props.to === this.props.location.pathname && !this.props.location.search
 
       if (this.state.isCurrent !== isCurrent) {
         this.setState({ isCurrent })
@@ -43,7 +43,7 @@ class PillItem extends PureComponent {
 
     // Combine state, props, location to make absolutely
     // sure of active status.
-    const active = isActive || to === location.pathname || isCurrent
+    const active = isActive || (to === location.pathname && !location.search) || isCurrent
 
     const containerClasses = CX({
       default: 1,

app/javascript/gabsocial/components/sidebar.js

@@ -139,6 +139,11 @@ class Sidebar extends ImmutablePureComponent {
         icon: 'list',
         to: '/lists',
       },
+      {
+        title: 'Explore',
+        icon: 'explore',
+        to: '/explore',
+      },
       {
         title: 'More',
         icon: 'more',

app/javascript/gabsocial/components/tab_bar.js

@@ -18,7 +18,7 @@ export default class TabBar extends PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.height53PX, _s.px5, _s.flexRow].join(' ')}
+        classNames={[_s.default, _s.height53PX, _s.px5, _s.flexRow, _s.overflowXScroll, _s.noScrollbar].join(' ')}
         classNamesXS={[_s.default, _s.height40PX, _s.px5, _s.flexRow].join(' ')}
       >
         {

app/javascript/gabsocial/components/tab_bar_item.js

@@ -31,7 +31,7 @@ class TabBarItem extends PureComponent {
     // If user navigates to different page, ensure tab bar item
     // with this.props.to that is on location is set to active.
     if (this.props.location !== prevProps.location) {
-      const isCurrent = this.props.to === this.props.location.pathname
+      const isCurrent = this.props.to === this.props.location.pathname && !this.props.location.search
 
       if (this.state.isCurrent !== isCurrent) {
         this.setState({ isCurrent })
@@ -52,7 +52,7 @@ class TabBarItem extends PureComponent {
 
     // Combine state, props, location to make absolutely
     // sure of active status.
-    const active = isActive || to === location.pathname || isCurrent
+    const active = isActive || (to === location.pathname && !location.search) || isCurrent
 
     const containerClasses = CX({
       default: 1,

app/javascript/gabsocial/components/trends_item.js

@@ -1,6 +1,4 @@
 import { Fragment } from 'react'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import ImmutablePropTypes from 'react-immutable-proptypes'
 import { urlRegex } from '../features/ui/util/url_regex'
 import {
   CX,
@@ -8,23 +6,28 @@ import {
 } from '../constants'
 import Button from './button'
 import DotTextSeperator from './dot_text_seperator'
-import Image from './image'
 import RelativeTimestamp from './relative_timestamp'
 import Text from './text'
 
-export default class TrendingItem extends ImmutablePureComponent {
+export default class TrendingItem extends PureComponent {
 
   static propTypes = {
     index: PropTypes.number,
-    trend: ImmutablePropTypes.map.isRequired,
     isLast: PropTypes.bool,
     isHidden: PropTypes.bool,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    author: PropTypes.string,
+    url: PropTypes.string,
+    date: PropTypes.string,
   }
 
   static defaultProps = {
     title: '',
     description: '',
     author: '',
+    url: '',
+    date: '',
   }
 
   state = {
@@ -42,25 +45,29 @@ export default class TrendingItem extends ImmutablePureComponent {
   render() {
     const {
       index,
-      trend,
       isLast,
       isHidden,
+      title,
+      description,
+      author,
+      url,
+      date,
     } = this.props
     const { hovering } = this.state
 
-    if (!trend) return null
+    if (!title || !url) return null
 
-    const title = `${trend.get('title')}`.trim()
-    const description = trend.get('description') || ''
+    const correctedTitle = `${title}`.trim()
+    let correctedDescription = description || ''
       
-    const correctedAuthor = trend.getIn(['author', 'name'], '').replace('www.', '')
-    const correctedDescription = description.length >= 120 ? `${description.substring(0, 120).trim()}...` : description
+    const correctedAuthor = `${author}`.replace('www.', '')
+    correctedDescription = correctedDescription.length >= 120 ? `${correctedDescription.substring(0, 120).trim()}...` : correctedDescription
     const descriptionHasLink = correctedDescription.match(urlRegex)
 
     if (isHidden) {
       return (
         <Fragment>
-          {title}
+          {correctedTitle}
           {!descriptionHasLink && correctedDescription}
           {correctedAuthor}
         </Fragment>
@@ -86,30 +93,18 @@ export default class TrendingItem extends ImmutablePureComponent {
     return (
       <Button
         noClasses
-        href={trend.get('url')}
+        href={url}
         target='_blank'
         rel={DEFAULT_REL}
         className={containerClasses}
         onMouseEnter={() => this.handleOnMouseEnter()}
         onMouseLeave={() => this.handleOnMouseLeave()}
       >
-        {
-          /*
-          <Image
-            nullable
-            width='116px'
-            height='78px'
-            alt={title}
-            src={trend.get('image')}
-            className={[_s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}
-          />
-          */
-        }
-
+      
         <div className={[_s.default, _s.flexNormal, _s.pb5].join(' ')}>
           <div className={_s.default}>
             <Text size='medium' color='primary' weight='bold'>
-              {title}
+              {correctedTitle}
             </Text>
           </div>
 
@@ -132,7 +127,7 @@ export default class TrendingItem extends ImmutablePureComponent {
             </Text>
             <DotTextSeperator />
             <Text color='secondary' size='small' className={subtitleClasses}>
-              <RelativeTimestamp timestamp={trend.get('date_published')} />
+              <RelativeTimestamp timestamp={date} />
             </Text>
             {
               hovering &&