- #{hashtag.get('name')}
+ #{hashtag.get('name')}
-
{shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))} }} />
+ {shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))} }} />
From 69ea7fcdc6f4c58e6dfbe85d7b3f7a4ca9d7d558 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Tue, 14 Jan 2020 18:14:54 -0500
Subject: [PATCH 8/8] Updated search UI header and results
Added groups with new items for filtering search results
---
.../features/compose/components/search.js | 2 +-
.../compose/components/search_results.js | 46 +++++++++++--------
.../containers/search_results_container.js | 3 +-
.../features/search/components/header.js | 29 +++++-------
app/javascript/gabsocial/features/ui/index.js | 5 +-
5 files changed, 46 insertions(+), 39 deletions(-)
diff --git a/app/javascript/gabsocial/features/compose/components/search.js b/app/javascript/gabsocial/features/compose/components/search.js
index a0c95584..476cf9b3 100644
--- a/app/javascript/gabsocial/features/compose/components/search.js
+++ b/app/javascript/gabsocial/features/compose/components/search.js
@@ -19,7 +19,7 @@ class SearchPopout extends React.PureComponent {
render () {
const { style } = this.props;
- const extraInformation = searchEnabled ?
:
;
+ const extraInformation = searchEnabled ?
:
;
return (
diff --git a/app/javascript/gabsocial/features/compose/components/search_results.js b/app/javascript/gabsocial/features/compose/components/search_results.js
index de876c84..93a63079 100644
--- a/app/javascript/gabsocial/features/compose/components/search_results.js
+++ b/app/javascript/gabsocial/features/compose/components/search_results.js
@@ -9,13 +9,16 @@ import Hashtag from '../../../components/hashtag';
import Icon from 'gabsocial/components/icon';
import WhoToFollowPanel from '../../ui/components/who_to_follow_panel';
// import TrendsPanel from '../../ui/components/trends_panel';
+import GroupListItem from 'gabsocial/components/group_list_item';
-export default @injectIntl
+export default
+@injectIntl
class SearchResults extends ImmutablePureComponent {
static propTypes = {
results: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
+ location: PropTypes.object,
};
state = {
@@ -23,7 +26,7 @@ class SearchResults extends ImmutablePureComponent {
}
render () {
- const { intl, results, dismissSuggestion } = this.props;
+ const { results, location } = this.props;
const { isSmallScreen } = this.state;
if (results.isEmpty() && isSmallScreen) {
@@ -35,38 +38,44 @@ class SearchResults extends ImmutablePureComponent {
);
}
- let accounts, statuses, hashtags;
+ const pathname = location.pathname || '';
+ const showPeople = pathname === '/search/people';
+ const showHashtags = pathname === '/search/hashtags';
+ const showGroups = pathname === '/search/groups';
+ const isTop = !showPeople && !showHashtags && !showGroups;
+
+ let accounts, statuses, hashtags, groups;
let count = 0;
- if (results.get('accounts') && results.get('accounts').size > 0) {
- count += results.get('accounts').size;
+ if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
+ const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
+ count += size;
accounts = (
-
-
- {results.get('accounts').map(accountId =>
)}
+
+ {results.get('accounts').slice(0, size).map(accountId =>
)}
-
-
- {results.get('statuses').map(statusId => )}
+
+ {results.get('groups').slice(0, size).map(group => )}
);
}
- if (results.get('hashtags') && results.get('hashtags').size > 0) {
- count += results.get('hashtags').size;
+ if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
+ const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
+ count += size;
hashtags = (
-
- {results.get('hashtags').map(hashtag => )}
+ {results.get('hashtags').slice(0, size).map(hashtag => )}
);
}
@@ -79,6 +88,7 @@ class SearchResults extends ImmutablePureComponent {
{accounts}
+ {groups}
{statuses}
{hashtags}
diff --git a/app/javascript/gabsocial/features/compose/containers/search_results_container.js b/app/javascript/gabsocial/features/compose/containers/search_results_container.js
index f9637861..cafe5010 100644
--- a/app/javascript/gabsocial/features/compose/containers/search_results_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/search_results_container.js
@@ -1,6 +1,7 @@
import { connect } from 'react-redux';
import SearchResults from '../components/search_results';
import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
+import { withRouter } from 'react-router-dom';
const mapStateToProps = state => ({
results: state.getIn(['search', 'results']),
@@ -12,4 +13,4 @@ const mapDispatchToProps = dispatch => ({
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
});
-export default connect(mapStateToProps, mapDispatchToProps)(SearchResults);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SearchResults));
diff --git a/app/javascript/gabsocial/features/search/components/header.js b/app/javascript/gabsocial/features/search/components/header.js
index 133e298b..837fb5fd 100644
--- a/app/javascript/gabsocial/features/search/components/header.js
+++ b/app/javascript/gabsocial/features/search/components/header.js
@@ -1,8 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
-import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
@@ -11,7 +10,10 @@ const mapStateToProps = state => ({
submitted: state.getIn(['search', 'submitted']),
});
-class Header extends ImmutablePureComponent {
+export default
+@withRouter
+@connect(mapStateToProps)
+class Header extends React.PureComponent {
static propTypes = {
value: PropTypes.string,
@@ -32,10 +34,6 @@ class Header extends ImmutablePureComponent {
render () {
const { submittedValue } = this.state;
- if (!submittedValue) {
- return null;
- }
-
return (
@@ -46,27 +44,22 @@ class Header extends ImmutablePureComponent {
-
+
- {/*
-
-
-
+
-
+
-
+
- */}
+
);
}
-}
-
-export default connect(mapStateToProps)(Header);
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/index.js b/app/javascript/gabsocial/features/ui/index.js
index d65ba40a..2307ba42 100644
--- a/app/javascript/gabsocial/features/ui/index.js
+++ b/app/javascript/gabsocial/features/ui/index.js
@@ -202,7 +202,10 @@ class SwitchingColumnsArea extends React.PureComponent {
-
+
+
+
+