diff --git a/app/javascript/flavours/glitch/actions/search.js b/app/javascript/flavours/glitch/actions/search.js index 33cf376a26..e25d8534a0 100644 --- a/app/javascript/flavours/glitch/actions/search.js +++ b/app/javascript/flavours/glitch/actions/search.js @@ -37,17 +37,17 @@ export function submitSearch(type) { const signedIn = !!getState().getIn(['meta', 'me']); if (value.length === 0) { - dispatch(fetchSearchSuccess({ accounts: [], statuses: [], hashtags: [] }, '')); + dispatch(fetchSearchSuccess({ accounts: [], statuses: [], hashtags: [] }, '', type)); return; } - dispatch(fetchSearchRequest()); + dispatch(fetchSearchRequest(type)); api(getState).get('/api/v2/search', { params: { q: value, resolve: signedIn, - limit: 10, + limit: 11, type, }, }).then(response => { @@ -59,7 +59,7 @@ export function submitSearch(type) { dispatch(importFetchedStatuses(response.data.statuses)); } - dispatch(fetchSearchSuccess(response.data, value)); + dispatch(fetchSearchSuccess(response.data, value, type)); dispatch(fetchRelationships(response.data.accounts.map(item => item.id))); }).catch(error => { dispatch(fetchSearchFail(error)); @@ -67,16 +67,18 @@ export function submitSearch(type) { }; } -export function fetchSearchRequest() { +export function fetchSearchRequest(searchType) { return { type: SEARCH_FETCH_REQUEST, + searchType, }; } -export function fetchSearchSuccess(results, searchTerm) { +export function fetchSearchSuccess(results, searchTerm, searchType) { return { type: SEARCH_FETCH_SUCCESS, results, + searchType, searchTerm, }; } @@ -90,15 +92,16 @@ export function fetchSearchFail(error) { export const expandSearch = type => (dispatch, getState) => { const value = getState().getIn(['search', 'value']); - const offset = getState().getIn(['search', 'results', type]).size; + const offset = getState().getIn(['search', 'results', type]).size - 1; - dispatch(expandSearchRequest()); + dispatch(expandSearchRequest(type)); api(getState).get('/api/v2/search', { params: { q: value, type, offset, + limit: 11, }, }).then(({ data }) => { if (data.accounts) { @@ -116,8 +119,9 @@ export const expandSearch = type => (dispatch, getState) => { }); }; -export const expandSearchRequest = () => ({ +export const expandSearchRequest = (searchType) => ({ type: SEARCH_EXPAND_REQUEST, + searchType, }); export const expandSearchSuccess = (results, searchTerm, searchType) => ({ diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx index 606dfd6fdb..a9687ffef5 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -10,36 +10,26 @@ import { Icon } from 'flavours/glitch/components/icon'; import { LoadMore } from 'flavours/glitch/components/load_more'; import AccountContainer from 'flavours/glitch/containers/account_container'; import StatusContainer from 'flavours/glitch/containers/status_container'; -import { searchEnabled } from 'flavours/glitch/initial_state'; +import { SearchSection } from 'flavours/glitch/features/explore/components/search_section'; -const messages = defineMessages({ - dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' }, -}); +const INITIAL_PAGE_LIMIT = 10; + +const withoutLastResult = list => { + if (list.size > INITIAL_PAGE_LIMIT && list.size % INITIAL_PAGE_LIMIT === 1) { + return list.skipLast(1); + } else { + return list; + } +}; class SearchResults extends ImmutablePureComponent { static propTypes = { results: ImmutablePropTypes.map.isRequired, - suggestions: ImmutablePropTypes.list.isRequired, - fetchSuggestions: PropTypes.func.isRequired, expandSearch: PropTypes.func.isRequired, - dismissSuggestion: PropTypes.func.isRequired, searchTerm: PropTypes.string, - intl: PropTypes.object.isRequired, }; - componentDidMount () { - if (this.props.searchTerm === '') { - this.props.fetchSuggestions(); - } - } - - componentDidUpdate () { - if (this.props.searchTerm === '') { - this.props.fetchSuggestions(); - } - } - handleLoadMoreAccounts = () => this.props.expandSearch('accounts'); handleLoadMoreStatuses = () => this.props.expandSearch('statuses'); @@ -47,98 +37,51 @@ class SearchResults extends ImmutablePureComponent { handleLoadMoreHashtags = () => this.props.expandSearch('hashtags'); render () { - const { intl, results, suggestions, dismissSuggestion, searchTerm } = this.props; + const { results } = this.props; let accounts, statuses, hashtags; - let count = 0; - - if (searchTerm === '' && !suggestions.isEmpty()) { - return ( -
-
-
- - -
- - {suggestions && suggestions.map(suggestion => ( - - ))} -
-
- ); - } else if(results.get('statuses') && results.get('statuses').size === 0 && !searchEnabled && !(searchTerm.startsWith('@') || searchTerm.startsWith('#') || searchTerm.includes(' '))) { - statuses = ( -
-
- -
- -
-
- ); - } if (results.get('accounts') && results.get('accounts').size > 0) { - count += results.get('accounts').size; accounts = ( -
-
- - {results.get('accounts').map(accountId => )} - - {results.get('accounts').size >= 5 && } -
- ); - } - - if (results.get('statuses') && results.get('statuses').size > 0) { - count += results.get('statuses').size; - statuses = ( -
-
- - {results.get('statuses').map(statusId => )} - - {results.get('statuses').size >= 5 && } -
+ }> + {withoutLastResult(results.get('accounts')).map(accountId => )} + {(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && } + ); } if (results.get('hashtags') && results.get('hashtags').size > 0) { - count += results.get('hashtags').size; hashtags = ( -
-
- - {results.get('hashtags').map(hashtag => )} - - {results.get('hashtags').size >= 5 && } -
+ }> + {withoutLastResult(results.get('hashtags')).map(hashtag => )} + {(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && } + + ); + } + + if (results.get('statuses') && results.get('statuses').size > 0) { + statuses = ( + }> + {withoutLastResult(results.get('statuses')).map(statusId => )} + {(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && } + ); } - // The result. return (
- +
{accounts} - {statuses} {hashtags} + {statuses}
); } } -export default injectIntl(SearchResults); +export default SearchResults; diff --git a/app/javascript/flavours/glitch/features/explore/components/search_section.jsx b/app/javascript/flavours/glitch/features/explore/components/search_section.jsx new file mode 100644 index 0000000000..c84e3f7cef --- /dev/null +++ b/app/javascript/flavours/glitch/features/explore/components/search_section.jsx @@ -0,0 +1,20 @@ +import PropTypes from 'prop-types'; + +import { FormattedMessage } from 'react-intl'; + +export const SearchSection = ({ title, onClickMore, children }) => ( +
+
+

{title}

+ {onClickMore && } +
+ + {children} +
+); + +SearchSection.propTypes = { + title: PropTypes.node.isRequired, + onClickMore: PropTypes.func, + children: PropTypes.children, +}; \ No newline at end of file diff --git a/app/javascript/flavours/glitch/features/explore/results.jsx b/app/javascript/flavours/glitch/features/explore/results.jsx index 699105e0d6..e91d0f1e4d 100644 --- a/app/javascript/flavours/glitch/features/explore/results.jsx +++ b/app/javascript/flavours/glitch/features/explore/results.jsx @@ -9,14 +9,14 @@ import { List as ImmutableList } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; -import { expandSearch } from 'flavours/glitch/actions/search'; +import { submitSearch, expandSearch } from 'flavours/glitch/actions/search'; import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'; -import { LoadMore } from 'flavours/glitch/components/load_more'; -import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; +import { Icon } from 'flavours/glitch/components/icon'; +import ScrollableList from 'flavours/glitch/components/scrollable_list'; import Account from 'flavours/glitch/containers/account_container'; import Status from 'flavours/glitch/containers/status_container'; - +import { SearchSection } from './components/search_section'; const messages = defineMessages({ title: { id: 'search_results.title', defaultMessage: 'Search for {q}' }, @@ -26,85 +26,175 @@ const mapStateToProps = state => ({ isLoading: state.getIn(['search', 'isLoading']), results: state.getIn(['search', 'results']), q: state.getIn(['search', 'searchTerm']), + submittedType: state.getIn(['search', 'type']), }); -const appendLoadMore = (id, list, onLoadMore) => { - if (list.size >= 5) { - return list.push(); +const INITIAL_PAGE_LIMIT = 10; +const INITIAL_DISPLAY = 4; + +const hidePeek = list => { + if (list.size > INITIAL_PAGE_LIMIT && list.size % INITIAL_PAGE_LIMIT === 1) { + return list.skipLast(1); } else { return list; } }; -const renderAccounts = (results, onLoadMore) => appendLoadMore('accounts', results.get('accounts', ImmutableList()).map(item => ( - -)), onLoadMore); +const renderAccounts = accounts => hidePeek(accounts).map(id => ( + +)); -const renderHashtags = (results, onLoadMore) => appendLoadMore('hashtags', results.get('hashtags', ImmutableList()).map(item => ( - -)), onLoadMore); +const renderHashtags = hashtags => hidePeek(hashtags).map(hashtag => ( + +)); -const renderStatuses = (results, onLoadMore) => appendLoadMore('statuses', results.get('statuses', ImmutableList()).map(item => ( - -)), onLoadMore); +const renderStatuses = statuses => hidePeek(statuses).map(id => ( + +)); class Results extends PureComponent { static propTypes = { - results: ImmutablePropTypes.map, + results: ImmutablePropTypes.contains({ + accounts: ImmutablePropTypes.orderedSet, + statuses: ImmutablePropTypes.orderedSet, + hashtags: ImmutablePropTypes.orderedSet, + }), isLoading: PropTypes.bool, multiColumn: PropTypes.bool, dispatch: PropTypes.func.isRequired, q: PropTypes.string, intl: PropTypes.object, + submittedType: PropTypes.oneOf(['accounts', 'statuses', 'hashtags']), }; state = { - type: 'all', + type: this.props.submittedType || 'all', }; - handleSelectAll = () => this.setState({ type: 'all' }); - handleSelectAccounts = () => this.setState({ type: 'accounts' }); - handleSelectHashtags = () => this.setState({ type: 'hashtags' }); - handleSelectStatuses = () => this.setState({ type: 'statuses' }); - handleLoadMoreAccounts = () => this.loadMore('accounts'); - handleLoadMoreStatuses = () => this.loadMore('statuses'); - handleLoadMoreHashtags = () => this.loadMore('hashtags'); + static getDerivedStateFromProps(props, state) { + if (props.submittedType !== state.type) { + return { + type: props.submittedType || 'all', + }; + } - loadMore (type) { + return null; + }; + + handleSelectAll = () => { + const { submittedType, dispatch } = this.props; + + // If we originally searched for a specific type, we need to resubmit + // the query to get all types of results + if (submittedType) { + dispatch(submitSearch()); + } + + this.setState({ type: 'all' }); + }; + + handleSelectAccounts = () => { + const { submittedType, dispatch } = this.props; + + // If we originally searched for something else (but not everything), + // we need to resubmit the query for this specific type + if (submittedType !== 'accounts') { + dispatch(submitSearch('accounts')); + } + + this.setState({ type: 'accounts' }); + }; + + handleSelectHashtags = () => { + const { submittedType, dispatch } = this.props; + + // If we originally searched for something else (but not everything), + // we need to resubmit the query for this specific type + if (submittedType !== 'hashtags') { + dispatch(submitSearch('hashtags')); + } + + this.setState({ type: 'hashtags' }); + } + + handleSelectStatuses = () => { + const { submittedType, dispatch } = this.props; + + // If we originally searched for something else (but not everything), + // we need to resubmit the query for this specific type + if (submittedType !== 'statuses') { + dispatch(submitSearch('statuses')); + } + + this.setState({ type: 'statuses' }); + } + + handleLoadMoreAccounts = () => this._loadMore('accounts'); + handleLoadMoreStatuses = () => this._loadMore('statuses'); + handleLoadMoreHashtags = () => this._loadMore('hashtags'); + + _loadMore (type) { const { dispatch } = this.props; dispatch(expandSearch(type)); } + handleLoadMore = () => { + const { type } = this.state; + + if (type !== 'all') { + this._loadMore(type); + } + }; + render () { const { intl, isLoading, q, results } = this.props; const { type } = this.state; - let filteredResults = ImmutableList(); + // We request 1 more result than we display so we can tell if there'd be a next page + const hasMore = type !== 'all' ? results.get(type, ImmutableList()).size > INITIAL_PAGE_LIMIT && results.get(type).size % INITIAL_PAGE_LIMIT === 1 : false; + + let filteredResults; if (!isLoading) { + const accounts = results.get('accounts', ImmutableList()); + const hashtags = results.get('hashtags', ImmutableList()); + const statuses = results.get('statuses', ImmutableList()); + switch(type) { case 'all': - filteredResults = filteredResults.concat(renderAccounts(results, this.handleLoadMoreAccounts), renderHashtags(results, this.handleLoadMoreHashtags), renderStatuses(results, this.handleLoadMoreStatuses)); + filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? ( + <> + {accounts.size > 0 && ( + } onClickMore={this.handleLoadMoreAccounts}> + {accounts.take(INITIAL_DISPLAY).map(id => )} + + )} + + {hashtags.size > 0 && ( + } onClickMore={this.handleLoadMoreHashtags}> + {hashtags.take(INITIAL_DISPLAY).map(hashtag => )} + + )} + + {statuses.size > 0 && ( + } onClickMore={this.handleLoadMoreStatuses}> + {statuses.take(INITIAL_DISPLAY).map(id => )} + + )} + + ) : []; break; case 'accounts': - filteredResults = filteredResults.concat(renderAccounts(results, this.handleLoadMoreAccounts)); + filteredResults = renderAccounts(accounts); break; case 'hashtags': - filteredResults = filteredResults.concat(renderHashtags(results, this.handleLoadMoreHashtags)); + filteredResults = renderHashtags(hashtags); break; case 'statuses': - filteredResults = filteredResults.concat(renderStatuses(results, this.handleLoadMoreStatuses)); + filteredResults = renderStatuses(statuses); break; } - - if (filteredResults.size === 0) { - filteredResults = ( -
- -
- ); - } } return ( @@ -117,7 +207,16 @@ class Results extends PureComponent {
- {isLoading ? : filteredResults} + } + bindToDocument + > + {filteredResults} +
diff --git a/app/javascript/flavours/glitch/reducers/search.js b/app/javascript/flavours/glitch/reducers/search.js index 611e995e97..787679a611 100644 --- a/app/javascript/flavours/glitch/reducers/search.js +++ b/app/javascript/flavours/glitch/reducers/search.js @@ -1,4 +1,4 @@ -import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable'; +import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable'; import { COMPOSE_MENTION, @@ -12,6 +12,7 @@ import { SEARCH_FETCH_FAIL, SEARCH_FETCH_SUCCESS, SEARCH_SHOW, + SEARCH_EXPAND_REQUEST, SEARCH_EXPAND_SUCCESS, SEARCH_RESULT_CLICK, SEARCH_RESULT_FORGET, @@ -24,6 +25,7 @@ const initialState = ImmutableMap({ results: ImmutableMap(), isLoading: false, searchTerm: '', + type: null, recent: ImmutableOrderedSet(), }); @@ -37,6 +39,8 @@ export default function search(state = initialState, action) { map.set('results', ImmutableMap()); map.set('submitted', false); map.set('hidden', false); + map.set('searchTerm', ''); + map.set('type', null); }); case SEARCH_SHOW: return state.set('hidden', false); @@ -48,23 +52,27 @@ export default function search(state = initialState, action) { return state.withMutations(map => { map.set('isLoading', true); map.set('submitted', true); + map.set('type', action.searchType); }); case SEARCH_FETCH_FAIL: return state.set('isLoading', false); case SEARCH_FETCH_SUCCESS: return state.withMutations(map => { map.set('results', ImmutableMap({ - accounts: ImmutableList(action.results.accounts.map(item => item.id)), - statuses: ImmutableList(action.results.statuses.map(item => item.id)), - hashtags: fromJS(action.results.hashtags), + accounts: ImmutableOrderedSet(action.results.accounts.map(item => item.id)), + statuses: ImmutableOrderedSet(action.results.statuses.map(item => item.id)), + hashtags: ImmutableOrderedSet(fromJS(action.results.hashtags)), })); map.set('searchTerm', action.searchTerm); + map.set('type', action.searchType); map.set('isLoading', false); }); + case SEARCH_EXPAND_REQUEST: + return state.set('type', action.searchType); case SEARCH_EXPAND_SUCCESS: - const results = action.searchType === 'hashtags' ? fromJS(action.results.hashtags) : action.results[action.searchType].map(item => item.id); - return state.updateIn(['results', action.searchType], list => list.concat(results)); + const results = action.searchType === 'hashtags' ? ImmutableOrderedSet(fromJS(action.results.hashtags)) : action.results[action.searchType].map(item => item.id); + return state.updateIn(['results', action.searchType], list => list.union(results)); case SEARCH_RESULT_CLICK: return state.update('recent', set => set.add(fromJS(action.result))); case SEARCH_RESULT_FORGET: diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 7f8f39ee94..f8eaf3313f 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -358,14 +358,14 @@ .notification__filter-bar, .account__section-headline { - background: darken($ui-base-color, 4%); + background: $ui-base-color; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; display: flex; flex-shrink: 0; button { - background: darken($ui-base-color, 4%); + background: transparent; border: 0; margin: 0; } @@ -383,26 +383,18 @@ position: relative; &.active { - color: $secondary-text-color; + color: $primary-text-color; - &::before, - &::after { + &::before { display: block; content: ''; position: absolute; - bottom: 0; - left: 50%; - width: 0; - height: 0; - transform: translateX(-50%); - border-style: solid; - border-width: 0 10px 10px; - border-color: transparent transparent lighten($ui-base-color, 8%); - } - - &::after { bottom: -1px; - border-color: transparent transparent $ui-base-color; + left: 0; + width: 100%; + height: 3px; + border-radius: 4px; + background: $highlight-text-color; } } } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 74166db756..f2fa38fac2 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -132,22 +132,39 @@ } .search-results__section { - margin-bottom: 5px; + border-bottom: 1px solid lighten($ui-base-color, 8%); - h5 { + &:last-child { + border-bottom: 0; + } + + &__header { background: darken($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: default; - display: flex; padding: 15px; font-weight: 500; - font-size: 16px; - color: $dark-text-color; + font-size: 14px; + color: $darker-text-color; + display: flex; + justify-content: space-between; - .fa { - display: inline-block; + h3 .fa { margin-inline-end: 5px; } + + button { + color: $highlight-text-color; + padding: 0; + border: 0; + background: 0; + font: inherit; + + &:hover, + &:active, + &:focus { + text-decoration: underline; + } + } } .account:last-child,