From 52512ec110a92691c4193aa0cdad6fbcb7ec2b64 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 1 Nov 2021 20:37:39 -0500 Subject: [PATCH] Trends: fix Hashtag component and TrendsPanel, display trends in Search --- app/soapbox/components/hashtag.js | 52 ++++++++++++------- .../compose/components/search_results.js | 11 ++-- .../containers/search_results_container.js | 1 + .../features/ui/components/trends_panel.js | 7 +-- app/soapbox/pages/default_page.js | 2 +- app/soapbox/pages/home_page.js | 2 +- app/soapbox/pages/status_page.js | 2 +- 7 files changed, 48 insertions(+), 29 deletions(-) diff --git a/app/soapbox/components/hashtag.js b/app/soapbox/components/hashtag.js index 2872a236a..a54daf656 100644 --- a/app/soapbox/components/hashtag.js +++ b/app/soapbox/components/hashtag.js @@ -1,30 +1,44 @@ import React from 'react'; -// import { Sparklines, SparklinesCurve } from 'react-sparklines'; +import { Sparklines, SparklinesCurve } from 'react-sparklines'; import { FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Permalink from './permalink'; import { shortNumberFormat } from '../utils/numbers'; -const Hashtag = ({ hashtag }) => ( -
-
- - #{hashtag.get('name')} - +const Hashtag = ({ hashtag }) => { + const count = Number(hashtag.getIn(['history', 0, 'accounts'])); - {hashtag.get('history') &&
- {shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))} }} /> -
} + return ( +
+
+ + #{hashtag.get('name')} + + + {hashtag.get('history') && ( +
+ {shortNumberFormat(count)}, + }} + /> +
+ )} +
+ + {hashtag.get('history') && ( +
+ day.get('uses')).toArray()}> + + +
+ )}
- - {/* Pleroma doesn't support tag history yet */} - {/* hashtag.get('history') &&
- day.get('uses')).toArray()}> - - -
*/} -
-); + ); +}; Hashtag.propTypes = { hashtag: ImmutablePropTypes.map.isRequired, diff --git a/app/soapbox/features/compose/components/search_results.js b/app/soapbox/features/compose/components/search_results.js index 58198eac4..b219ed944 100644 --- a/app/soapbox/features/compose/components/search_results.js +++ b/app/soapbox/features/compose/components/search_results.js @@ -23,6 +23,7 @@ export default class SearchResults extends ImmutablePureComponent { selectFilter: PropTypes.func.isRequired, features: PropTypes.object.isRequired, suggestions: ImmutablePropTypes.list, + trends: ImmutablePropTypes.list, }; handleLoadMore = () => this.props.expandSearch(this.props.selectedFilter); @@ -30,7 +31,7 @@ export default class SearchResults extends ImmutablePureComponent { handleSelectFilter = newActiveFilter => this.props.selectFilter(newActiveFilter); render() { - const { value, results, submitted, selectedFilter, suggestions } = this.props; + const { value, results, submitted, selectedFilter, suggestions, trends } = this.props; let searchResults; let hasMore = false; @@ -79,14 +80,16 @@ export default class SearchResults extends ImmutablePureComponent { } } - if (selectedFilter === 'hashtags' && results.get('hashtags')) { + if (selectedFilter === 'hashtags') { hasMore = results.get('hashtagsHasMore'); loaded = results.get('hashtagsLoaded'); placeholderComponent = PlaceholderHashtag; - if (results.get('hashtags').size > 0) { + if (results.get('hashtags') && results.get('hashtags').size > 0) { searchResults = results.get('hashtags').map(hashtag => ); - } else { + } else if (!submitted && suggestions && !suggestions.isEmpty()) { + searchResults = trends.map(hashtag => ); + } else if (loaded) { noResultsMessage = (
{ value: state.getIn(['search', 'submittedValue']), results: state.getIn(['search', 'results']), suggestions: state.getIn(['suggestions', 'items']), + trends: state.getIn(['trends', 'items']), submitted: state.getIn(['search', 'submitted']), selectedFilter: state.getIn(['search', 'filter']), features: getFeatures(instance), diff --git a/app/soapbox/features/ui/components/trends_panel.js b/app/soapbox/features/ui/components/trends_panel.js index 56e5f9255..9a45977cb 100644 --- a/app/soapbox/features/ui/components/trends_panel.js +++ b/app/soapbox/features/ui/components/trends_panel.js @@ -11,9 +11,10 @@ import Hashtag from '../../../components/hashtag'; class TrendsPanel extends ImmutablePureComponent { static propTypes = { + intl: PropTypes.object.isRequired, trends: ImmutablePropTypes.list.isRequired, fetchTrends: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, + limit: PropTypes.number, }; componentDidMount() { @@ -22,8 +23,8 @@ class TrendsPanel extends ImmutablePureComponent { render() { const trends = this.props.trends.sort((a, b) => { - const num_a = parseInt(a.getIn(['history', 0, 'accounts'])); - const num_b = parseInt(b.getIn(['history', 0, 'accounts'])); + const num_a = Number(a.getIn(['history', 0, 'accounts'])); + const num_b = Number(b.getIn(['history', 0, 'accounts'])); return num_b - num_a; }).slice(0, this.props.limit); diff --git a/app/soapbox/pages/default_page.js b/app/soapbox/pages/default_page.js index 9e5c7a2ab..5d7a26e76 100644 --- a/app/soapbox/pages/default_page.js +++ b/app/soapbox/pages/default_page.js @@ -64,7 +64,7 @@ class DefaultPage extends ImmutablePureComponent { )} {showTrendsPanel && ( - {Component => } + {Component => } )} {showWhoToFollowPanel && ( diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js index 882e98939..62db48263 100644 --- a/app/soapbox/pages/home_page.js +++ b/app/soapbox/pages/home_page.js @@ -98,7 +98,7 @@ class HomePage extends ImmutablePureComponent { )} {showTrendsPanel && ( - {Component => } + {Component => } )} {showWhoToFollowPanel && ( diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js index db70dcee6..fa28193ca 100644 --- a/app/soapbox/pages/status_page.js +++ b/app/soapbox/pages/status_page.js @@ -65,7 +65,7 @@ class StatusPage extends ImmutablePureComponent { )} {showTrendsPanel && ( - {Component => } + {Component => } )} {showWhoToFollowPanel && (