Updated TrendsItem component code structure

• Updated:
- TrendsItem component code structure

app/javascript/gabsocial/components/trends_item.js

@@ -1,92 +1,42 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import { urlRegex } from '../features/ui/util/url_regex'
-import {
+import { DEFAULT_REL } from '../constants'
-  CX,
-  DEFAULT_REL,
-} from '../constants'
 import Button from './button'
 import DotTextSeperator from './dot_text_seperator'
 import RelativeTimestamp from './relative_timestamp'
 import Text from './text'
 
-class TrendingItem extends React.PureComponent {
+class TrendsItem extends ImmutablePureComponent {
-
-  state = {
-    hovering: false,
-  }
-
-  handleOnMouseEnter = () => {
-    this.setState({ hovering: true })
-  }
-
-  handleOnMouseLeave = () => {
-    this.setState({ hovering: false })
-  }
 
   render() {
-    const {
+    const { trend } = this.props
-      index,
+
-      isLast,
+    if (!trend) return null
-      isHidden,
+
-      title,
+    const title = trend.get('title')
-      description,
+    const url = trend.get('trends_url')
-      author,
-      url,
-      date,
-    } = this.props
-    const { hovering } = this.state
 
     if (!title || !url) return null
-
+    
-    const correctedTitle = `${title}`.trim()
+    let correctedDescription = trend.get('description')
-    let correctedDescription = description || ''
-      
-    const correctedAuthor = `${author}`.replace('www.', '')
     correctedDescription = correctedDescription.length >= 120 ? `${correctedDescription.substring(0, 120).trim()}...` : correctedDescription
     const descriptionHasLink = correctedDescription.match(urlRegex)
 
-    if (isHidden) {
-      return (
-        <React.Fragment>
-          {correctedTitle}
-          {!descriptionHasLink && correctedDescription}
-          {correctedAuthor}
-        </React.Fragment>
-      )
-    }
-
-    const containerClasses = CX({
-      d: 1,
-      noUnderline: 1,
-      px15: 1,
-      pt10: 1,
-      pb5: 1,
-      borderColorSecondary: !isLast,
-      borderBottom1PX: !isLast,
-      backgroundColorSubtle_onHover: 1,
-    })
-
-    const subtitleClasses = CX({
-      ml5: 1,
-      underline: hovering,
-    })
-
     return (
       <Button
         noClasses
         href={url}
         target='_blank'
         rel={DEFAULT_REL}
-        className={containerClasses}
+        className={[_s.d, _s.noUnderline, _s.px15, _s.pt10, _s.pb5, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}
-        onMouseEnter={() => this.handleOnMouseEnter()}
-        onMouseLeave={() => this.handleOnMouseLeave()}
       >
-      
         <div className={[_s.d, _s.flexNormal, _s.pb5].join(' ')}>
           <div className={_s.d}>
             <Text size='medium' color='primary' weight='bold'>
-              {correctedTitle}
+              {title}
             </Text>
           </div>
 
@@ -98,25 +48,20 @@ class TrendingItem extends React.PureComponent {
               </Text>
             </div>
           }
-          
+
           <div className={[_s.d, _s.flexRow].join(' ')}>
             <Text color='secondary' size='small'>
-              {index}
+              {trend.get('feed_base_url')}
             </Text>
             <DotTextSeperator />
             <Text color='secondary' size='small' className={_s.ml5}>
-              {correctedAuthor}
+              trends.gab.com
             </Text>
             <DotTextSeperator />
-            <Text color='secondary' size='small' className={subtitleClasses}>
+            <Text color='secondary' size='small' className={_s.ml5}>
-              <RelativeTimestamp timestamp={date} />
+              <RelativeTimestamp timestamp={trend.get('publish_date')} />
             </Text>
-            {
-              hovering &&
-              <Text color='secondary' size='small' className={_s.ml10}>→</Text>
-            }
           </div>
-
         </div>
       </Button>
     )
@@ -124,23 +69,8 @@ class TrendingItem extends React.PureComponent {
 
 }
 
-TrendingItem.propTypes = {
+TrendsItem.propTypes = {
-  index: PropTypes.number,
+  trend: ImmutablePropTypes.map,
-  isLast: PropTypes.bool,
-  isHidden: PropTypes.bool,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  author: PropTypes.string,
-  url: PropTypes.string,
-  date: PropTypes.string,
 }
 
-TrendingItem.defaultProps = {
+export default TrendsItem
-  title: '',
-  description: '',
-  author: '',
-  url: '',
-  date: '',
-}
-
-export default TrendingItem