sforkowany z mirror/soapbox
Tabbed, paginated search results
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>groups
rodzic
38ad49c1e6
commit
d0f3fe6771
|
@ -10,6 +10,12 @@ export const SEARCH_FETCH_REQUEST = 'SEARCH_FETCH_REQUEST';
|
|||
export const SEARCH_FETCH_SUCCESS = 'SEARCH_FETCH_SUCCESS';
|
||||
export const SEARCH_FETCH_FAIL = 'SEARCH_FETCH_FAIL';
|
||||
|
||||
export const SEARCH_EXPAND_REQUEST = 'SEARCH_EXPAND_REQUEST';
|
||||
export const SEARCH_EXPAND_SUCCESS = 'SEARCH_EXPAND_SUCCESS';
|
||||
export const SEARCH_EXPAND_FAIL = 'SEARCH_EXPAND_FAIL';
|
||||
|
||||
export const SEARCH_FILTER_SET = 'SEARCH_FILTER_SET';
|
||||
|
||||
export function changeSearch(value) {
|
||||
return {
|
||||
type: SEARCH_CHANGE,
|
||||
|
@ -76,8 +82,50 @@ export function fetchSearchFail(error) {
|
|||
};
|
||||
};
|
||||
|
||||
export function showSearch() {
|
||||
return {
|
||||
type: SEARCH_SHOW,
|
||||
};
|
||||
export const expandSearch = type => (dispatch, getState) => {
|
||||
const value = getState().getIn(['search', 'value']);
|
||||
const offset = getState().getIn(['search', 'results', type]).size;
|
||||
|
||||
dispatch(expandSearchRequest());
|
||||
|
||||
api(getState).get('/api/v2/search', {
|
||||
params: {
|
||||
q: value,
|
||||
type,
|
||||
offset,
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
if (data.accounts) {
|
||||
dispatch(importFetchedAccounts(data.accounts));
|
||||
}
|
||||
|
||||
if (data.statuses) {
|
||||
dispatch(importFetchedStatuses(data.statuses));
|
||||
}
|
||||
|
||||
dispatch(expandSearchSuccess(data, value, type));
|
||||
dispatch(fetchRelationships(data.accounts.map(item => item.id)));
|
||||
}).catch(error => {
|
||||
dispatch(expandSearchFail(error));
|
||||
});
|
||||
};
|
||||
|
||||
export const expandSearchRequest = () => ({
|
||||
type: SEARCH_EXPAND_REQUEST,
|
||||
});
|
||||
|
||||
export const expandSearchSuccess = (results, searchTerm, searchType) => ({
|
||||
type: SEARCH_EXPAND_SUCCESS,
|
||||
results,
|
||||
searchTerm,
|
||||
searchType,
|
||||
});
|
||||
|
||||
export const expandSearchFail = error => ({
|
||||
type: SEARCH_EXPAND_FAIL,
|
||||
error,
|
||||
});
|
||||
|
||||
export const showSearch = () => ({
|
||||
type: SEARCH_SHOW,
|
||||
});
|
||||
|
|
|
@ -8,6 +8,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
|||
import Hashtag from '../../../components/hashtag';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import LoadingIndicator from 'soapbox/components/loading_indicator';
|
||||
import FilterBar from '../../search/components/filter_bar';
|
||||
import LoadMore from '../../../components/load_more';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default @injectIntl
|
||||
class SearchResults extends ImmutablePureComponent {
|
||||
|
@ -15,11 +18,24 @@ class SearchResults extends ImmutablePureComponent {
|
|||
static propTypes = {
|
||||
results: ImmutablePropTypes.map.isRequired,
|
||||
submitted: PropTypes.bool,
|
||||
expandSearch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
selectedFilter: 'accounts',
|
||||
};
|
||||
|
||||
handleLoadMore = () => this.props.expandSearch(this.state.selectedFilter);
|
||||
|
||||
handleSelectFilter = newActiveFilter => {
|
||||
console.log(newActiveFilter);
|
||||
this.setState({ selectedFilter: newActiveFilter });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { results, submitted } = this.props;
|
||||
const { selectedFilter } = this.state;
|
||||
|
||||
if (submitted && results.isEmpty()) {
|
||||
return (
|
||||
|
@ -29,37 +45,38 @@ class SearchResults extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
let accounts, statuses, hashtags;
|
||||
let searchResults;
|
||||
let count = 0;
|
||||
let hasMore = false;
|
||||
|
||||
if (results.get('accounts') && results.get('accounts').size > 0) {
|
||||
count += results.get('accounts').size;
|
||||
accounts = (
|
||||
<div className='search-results__section'>
|
||||
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
|
||||
if (selectedFilter === 'accounts' && results.get('accounts') && results.get('accounts').size > 0) {
|
||||
count = results.get('accounts').size;
|
||||
hasMore = results.get('accountsHasMore');
|
||||
|
||||
searchResults = (
|
||||
<div className={classNames('search-results__section', { 'has-more': hasMore })}>
|
||||
{results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (results.get('statuses') && results.get('statuses').size > 0) {
|
||||
count += results.get('statuses').size;
|
||||
statuses = (
|
||||
<div className='search-results__section'>
|
||||
<h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></h5>
|
||||
if (selectedFilter === 'statuses' && results.get('statuses') && results.get('statuses').size > 0) {
|
||||
count = results.get('statuses').size;
|
||||
hasMore = results.get('statusesHasMore');
|
||||
|
||||
searchResults = (
|
||||
<div className={classNames('search-results__section', { 'has-more': hasMore })}>
|
||||
{results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (results.get('hashtags') && results.get('hashtags').size > 0) {
|
||||
count += results.get('hashtags').size;
|
||||
hashtags = (
|
||||
<div className='search-results__section'>
|
||||
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
|
||||
if (selectedFilter === 'hashtags' && results.get('hashtags') && results.get('hashtags').size > 0) {
|
||||
count = results.get('hashtags').size;
|
||||
hasMore = results.get('hashtagsHasMore');
|
||||
|
||||
searchResults = (
|
||||
<div className={classNames('search-results__section', { 'has-more': hasMore })}>
|
||||
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
||||
</div>
|
||||
);
|
||||
|
@ -72,9 +89,11 @@ class SearchResults extends ImmutablePureComponent {
|
|||
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
|
||||
</div>
|
||||
|
||||
{accounts}
|
||||
{statuses}
|
||||
{hashtags}
|
||||
<FilterBar selectedFilter={selectedFilter} selectFilter={this.handleSelectFilter} />
|
||||
|
||||
{searchResults}
|
||||
|
||||
{hasMore && <LoadMore visible onClick={this.handleLoadMore} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,15 +1,19 @@
|
|||
import { connect } from 'react-redux';
|
||||
import SearchResults from '../components/search_results';
|
||||
import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
|
||||
import { expandSearch } from '../../../actions/search';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
results: state.getIn(['search', 'results']),
|
||||
suggestions: state.getIn(['suggestions', 'items']),
|
||||
submitted: state.getIn(['search', 'submitted']),
|
||||
});
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
results: state.getIn(['search', 'results']),
|
||||
suggestions: state.getIn(['suggestions', 'items']),
|
||||
submitted: state.getIn(['search', 'submitted']),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
fetchSuggestions: () => dispatch(fetchSuggestions()),
|
||||
expandSearch: type => dispatch(expandSearch(type)),
|
||||
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
|
||||
});
|
||||
|
||||
|
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
|
||||
export default @injectIntl
|
||||
class FilterBar extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
selectFilter: PropTypes.func.isRequired,
|
||||
selectedFilter: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
onClick(searchType) {
|
||||
return () => this.props.selectFilter(searchType);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { selectedFilter } = this.props;
|
||||
|
||||
return (
|
||||
<div className='search__filter-bar'>
|
||||
<button
|
||||
className={selectedFilter === 'accounts' ? 'active' : ''}
|
||||
onClick={this.onClick('accounts')}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='search_results.accounts'
|
||||
defaultMessage='People'
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === 'statuses' ? 'active' : ''}
|
||||
onClick={this.onClick('statuses')}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='search_results.statuses'
|
||||
defaultMessage='Posts'
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === 'hashtags' ? 'active' : ''}
|
||||
onClick={this.onClick('hashtags')}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='search_results.hashtags'
|
||||
defaultMessage='Hashtags'
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -4,6 +4,7 @@ import {
|
|||
SEARCH_FETCH_REQUEST,
|
||||
SEARCH_FETCH_SUCCESS,
|
||||
SEARCH_SHOW,
|
||||
SEARCH_EXPAND_SUCCESS,
|
||||
} from '../actions/search';
|
||||
import {
|
||||
COMPOSE_MENTION,
|
||||
|
@ -49,7 +50,15 @@ export default function search(state = initialState, action) {
|
|||
accounts: ImmutableList(action.results.accounts.map(item => item.id)),
|
||||
statuses: ImmutableList(action.results.statuses.map(item => item.id)),
|
||||
hashtags: fromJS(action.results.hashtags),
|
||||
accountsHasMore: action.results.accounts.length > 0,
|
||||
statusesHasMore: action.results.statuses.length > 0,
|
||||
hashtagsHasMore: action.results.hashtags.length > 0,
|
||||
})).set('submitted', true);
|
||||
case SEARCH_EXPAND_SUCCESS:
|
||||
return state.withMutations((state) => {
|
||||
state.setIn(['results', `${action.searchType}HasMore`], action.results[action.searchType].length > 0);
|
||||
state.updateIn(['results', action.searchType], list => list.concat(action.results[action.searchType].map(item => item.id)));
|
||||
});
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { SETTING_CHANGE, SETTING_SAVE, FE_NAME } from '../actions/settings';
|
||||
import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
|
||||
import { SEARCH_FILTER_SET } from '../actions/search';
|
||||
import { EMOJI_USE } from '../actions/emojis';
|
||||
import { ME_FETCH_SUCCESS } from 'soapbox/actions/me';
|
||||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
|
@ -25,6 +26,7 @@ export default function settings(state = initialState, action) {
|
|||
case ME_FETCH_SUCCESS:
|
||||
return importSettings(state, action.me);
|
||||
case NOTIFICATIONS_FILTER_SET:
|
||||
case SEARCH_FILTER_SET:
|
||||
case SETTING_CHANGE:
|
||||
return state
|
||||
.setIn(action.path, action.value)
|
||||
|
|
|
@ -68,8 +68,6 @@
|
|||
}
|
||||
|
||||
.search-results__section {
|
||||
margin-bottom: 5px;
|
||||
|
||||
h5 {
|
||||
background: var(--accent-color--faint);
|
||||
border-bottom: 1px solid var(--brand-color--faint);
|
||||
|
@ -86,8 +84,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.account:last-child,
|
||||
& > div:last-child .status {
|
||||
&:not(.has-more) .account:last-child,
|
||||
&:not(.has-more) > div:last-child .status {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -608,6 +608,7 @@
|
|||
}
|
||||
|
||||
.notification__filter-bar,
|
||||
.search__filter-bar,
|
||||
.account__section-headline {
|
||||
border-bottom: 1px solid var(--brand-color--faint);
|
||||
cursor: default;
|
||||
|
|
Ładowanie…
Reference in New Issue