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_SUCCESS = 'SEARCH_FETCH_SUCCESS';
|
||||||
export const SEARCH_FETCH_FAIL = 'SEARCH_FETCH_FAIL';
|
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) {
|
export function changeSearch(value) {
|
||||||
return {
|
return {
|
||||||
type: SEARCH_CHANGE,
|
type: SEARCH_CHANGE,
|
||||||
|
@ -76,8 +82,50 @@ export function fetchSearchFail(error) {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export function showSearch() {
|
export const expandSearch = type => (dispatch, getState) => {
|
||||||
return {
|
const value = getState().getIn(['search', 'value']);
|
||||||
type: SEARCH_SHOW,
|
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 Hashtag from '../../../components/hashtag';
|
||||||
import Icon from 'soapbox/components/icon';
|
import Icon from 'soapbox/components/icon';
|
||||||
import LoadingIndicator from 'soapbox/components/loading_indicator';
|
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
|
export default @injectIntl
|
||||||
class SearchResults extends ImmutablePureComponent {
|
class SearchResults extends ImmutablePureComponent {
|
||||||
|
@ -15,11 +18,24 @@ class SearchResults extends ImmutablePureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
results: ImmutablePropTypes.map.isRequired,
|
results: ImmutablePropTypes.map.isRequired,
|
||||||
submitted: PropTypes.bool,
|
submitted: PropTypes.bool,
|
||||||
|
expandSearch: PropTypes.func.isRequired,
|
||||||
intl: PropTypes.object.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() {
|
render() {
|
||||||
const { results, submitted } = this.props;
|
const { results, submitted } = this.props;
|
||||||
|
const { selectedFilter } = this.state;
|
||||||
|
|
||||||
if (submitted && results.isEmpty()) {
|
if (submitted && results.isEmpty()) {
|
||||||
return (
|
return (
|
||||||
|
@ -29,37 +45,38 @@ class SearchResults extends ImmutablePureComponent {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let accounts, statuses, hashtags;
|
let searchResults;
|
||||||
let count = 0;
|
let count = 0;
|
||||||
|
let hasMore = false;
|
||||||
|
|
||||||
if (results.get('accounts') && results.get('accounts').size > 0) {
|
if (selectedFilter === 'accounts' && results.get('accounts') && results.get('accounts').size > 0) {
|
||||||
count += results.get('accounts').size;
|
count = results.get('accounts').size;
|
||||||
accounts = (
|
hasMore = results.get('accountsHasMore');
|
||||||
<div className='search-results__section'>
|
|
||||||
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
|
|
||||||
|
|
||||||
|
searchResults = (
|
||||||
|
<div className={classNames('search-results__section', { 'has-more': hasMore })}>
|
||||||
{results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
|
{results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (results.get('statuses') && results.get('statuses').size > 0) {
|
if (selectedFilter === 'statuses' && results.get('statuses') && results.get('statuses').size > 0) {
|
||||||
count += results.get('statuses').size;
|
count = results.get('statuses').size;
|
||||||
statuses = (
|
hasMore = results.get('statusesHasMore');
|
||||||
<div className='search-results__section'>
|
|
||||||
<h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></h5>
|
|
||||||
|
|
||||||
|
searchResults = (
|
||||||
|
<div className={classNames('search-results__section', { 'has-more': hasMore })}>
|
||||||
{results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
|
{results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (results.get('hashtags') && results.get('hashtags').size > 0) {
|
if (selectedFilter === 'hashtags' && results.get('hashtags') && results.get('hashtags').size > 0) {
|
||||||
count += results.get('hashtags').size;
|
count = results.get('hashtags').size;
|
||||||
hashtags = (
|
hasMore = results.get('hashtagsHasMore');
|
||||||
<div className='search-results__section'>
|
|
||||||
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
|
|
||||||
|
|
||||||
|
searchResults = (
|
||||||
|
<div className={classNames('search-results__section', { 'has-more': hasMore })}>
|
||||||
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
||||||
</div>
|
</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 }} />
|
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{accounts}
|
<FilterBar selectedFilter={selectedFilter} selectFilter={this.handleSelectFilter} />
|
||||||
{statuses}
|
|
||||||
{hashtags}
|
{searchResults}
|
||||||
|
|
||||||
|
{hasMore && <LoadMore visible onClick={this.handleLoadMore} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,19 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import SearchResults from '../components/search_results';
|
import SearchResults from '../components/search_results';
|
||||||
import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
|
import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
|
||||||
|
import { expandSearch } from '../../../actions/search';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => {
|
||||||
results: state.getIn(['search', 'results']),
|
return {
|
||||||
suggestions: state.getIn(['suggestions', 'items']),
|
results: state.getIn(['search', 'results']),
|
||||||
submitted: state.getIn(['search', 'submitted']),
|
suggestions: state.getIn(['suggestions', 'items']),
|
||||||
});
|
submitted: state.getIn(['search', 'submitted']),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const mapDispatchToProps = dispatch => ({
|
||||||
fetchSuggestions: () => dispatch(fetchSuggestions()),
|
fetchSuggestions: () => dispatch(fetchSuggestions()),
|
||||||
|
expandSearch: type => dispatch(expandSearch(type)),
|
||||||
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
|
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_REQUEST,
|
||||||
SEARCH_FETCH_SUCCESS,
|
SEARCH_FETCH_SUCCESS,
|
||||||
SEARCH_SHOW,
|
SEARCH_SHOW,
|
||||||
|
SEARCH_EXPAND_SUCCESS,
|
||||||
} from '../actions/search';
|
} from '../actions/search';
|
||||||
import {
|
import {
|
||||||
COMPOSE_MENTION,
|
COMPOSE_MENTION,
|
||||||
|
@ -49,7 +50,15 @@ export default function search(state = initialState, action) {
|
||||||
accounts: ImmutableList(action.results.accounts.map(item => item.id)),
|
accounts: ImmutableList(action.results.accounts.map(item => item.id)),
|
||||||
statuses: ImmutableList(action.results.statuses.map(item => item.id)),
|
statuses: ImmutableList(action.results.statuses.map(item => item.id)),
|
||||||
hashtags: fromJS(action.results.hashtags),
|
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);
|
})).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:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { SETTING_CHANGE, SETTING_SAVE, FE_NAME } from '../actions/settings';
|
import { SETTING_CHANGE, SETTING_SAVE, FE_NAME } from '../actions/settings';
|
||||||
import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
|
import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
|
||||||
|
import { SEARCH_FILTER_SET } from '../actions/search';
|
||||||
import { EMOJI_USE } from '../actions/emojis';
|
import { EMOJI_USE } from '../actions/emojis';
|
||||||
import { ME_FETCH_SUCCESS } from 'soapbox/actions/me';
|
import { ME_FETCH_SUCCESS } from 'soapbox/actions/me';
|
||||||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||||
|
@ -25,6 +26,7 @@ export default function settings(state = initialState, action) {
|
||||||
case ME_FETCH_SUCCESS:
|
case ME_FETCH_SUCCESS:
|
||||||
return importSettings(state, action.me);
|
return importSettings(state, action.me);
|
||||||
case NOTIFICATIONS_FILTER_SET:
|
case NOTIFICATIONS_FILTER_SET:
|
||||||
|
case SEARCH_FILTER_SET:
|
||||||
case SETTING_CHANGE:
|
case SETTING_CHANGE:
|
||||||
return state
|
return state
|
||||||
.setIn(action.path, action.value)
|
.setIn(action.path, action.value)
|
||||||
|
|
|
@ -68,8 +68,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-results__section {
|
.search-results__section {
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
background: var(--accent-color--faint);
|
background: var(--accent-color--faint);
|
||||||
border-bottom: 1px solid var(--brand-color--faint);
|
border-bottom: 1px solid var(--brand-color--faint);
|
||||||
|
@ -86,8 +84,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.account:last-child,
|
&:not(.has-more) .account:last-child,
|
||||||
& > div:last-child .status {
|
&:not(.has-more) > div:last-child .status {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -608,6 +608,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification__filter-bar,
|
.notification__filter-bar,
|
||||||
|
.search__filter-bar,
|
||||||
.account__section-headline {
|
.account__section-headline {
|
||||||
border-bottom: 1px solid var(--brand-color--faint);
|
border-bottom: 1px solid var(--brand-color--faint);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
Ładowanie…
Reference in New Issue