Merge branch 'search-tabs' into 'develop'
Tabbed, paginated search results See merge request soapbox-pub/soapbox-fe!652
This commit is contained in:
commit
e7813e178a
10 changed files with 193 additions and 46 deletions
|
@ -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']);
|
||||||
|
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,
|
type: SEARCH_SHOW,
|
||||||
};
|
});
|
||||||
};
|
|
||||||
|
|
|
@ -1,25 +1,36 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import { FormattedMessage, injectIntl } from 'react-intl';
|
|
||||||
import AccountContainer from '../../../containers/account_container';
|
import AccountContainer from '../../../containers/account_container';
|
||||||
import StatusContainer from '../../../containers/status_container';
|
import StatusContainer from '../../../containers/status_container';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import Hashtag from '../../../components/hashtag';
|
import Hashtag from '../../../components/hashtag';
|
||||||
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 class SearchResults extends ImmutablePureComponent {
|
||||||
class SearchResults extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
results: ImmutablePropTypes.map.isRequired,
|
results: ImmutablePropTypes.map.isRequired,
|
||||||
submitted: PropTypes.bool,
|
submitted: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
expandSearch: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
selectedFilter: 'accounts',
|
||||||
|
};
|
||||||
|
|
||||||
|
handleLoadMore = () => this.props.expandSearch(this.state.selectedFilter);
|
||||||
|
|
||||||
|
handleSelectFilter = 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,53 +40,47 @@ 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) {
|
if (selectedFilter === 'accounts' && results.get('accounts') && results.get('accounts').size > 0) {
|
||||||
count += results.get('accounts').size;
|
hasMore = results.get('accountsHasMore');
|
||||||
accounts = (
|
|
||||||
<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;
|
hasMore = results.get('statusesHasMore');
|
||||||
statuses = (
|
|
||||||
<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;
|
hasMore = results.get('hashtagsHasMore');
|
||||||
hashtags = (
|
|
||||||
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='search-results'>
|
<>
|
||||||
<div className='search-results__header'>
|
<FilterBar selectedFilter={submitted ? selectedFilter : null} selectFilter={this.handleSelectFilter} />
|
||||||
<Icon id='search' fixedWidth />
|
|
||||||
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{accounts}
|
{searchResults}
|
||||||
{statuses}
|
|
||||||
{hashtags}
|
{hasMore && <LoadMore visible onClick={this.handleLoadMore} />}
|
||||||
</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 => {
|
||||||
|
return {
|
||||||
results: state.getIn(['search', 'results']),
|
results: state.getIn(['search', 'results']),
|
||||||
suggestions: state.getIn(['suggestions', 'items']),
|
suggestions: state.getIn(['suggestions', 'items']),
|
||||||
submitted: state.getIn(['search', 'submitted']),
|
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'))),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
53
app/soapbox/features/search/components/filter_bar.js
Normal file
53
app/soapbox/features/search/components/filter_bar.js
Normal file
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,11 +1,19 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ColumnHeader from 'soapbox/components/column_header';
|
||||||
import SearchContainer from 'soapbox/features/compose/containers/search_container';
|
import SearchContainer from 'soapbox/features/compose/containers/search_container';
|
||||||
import SearchResultsContainer from 'soapbox/features/compose/containers/search_results_container';
|
import SearchResultsContainer from 'soapbox/features/compose/containers/search_results_container';
|
||||||
|
|
||||||
const Search = () => (
|
const messages = defineMessages({
|
||||||
|
heading: { id: 'column.search', defaultMessage: 'Search' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const Search = ({ intl }) => (
|
||||||
<div className='column search-page'>
|
<div className='column search-page'>
|
||||||
<SearchContainer />
|
<SearchContainer />
|
||||||
|
|
||||||
|
<ColumnHeader icon='search' title={intl.formatMessage(messages.heading)} />
|
||||||
<div className='drawer__pager'>
|
<div className='drawer__pager'>
|
||||||
<div className='drawer__inner darker'>
|
<div className='drawer__inner darker'>
|
||||||
<SearchResultsContainer />
|
<SearchResultsContainer />
|
||||||
|
@ -14,4 +22,8 @@ const Search = () => (
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Search;
|
Search.propTypes = {
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default injectIntl(Search);
|
||||||
|
|
|
@ -636,6 +636,7 @@
|
||||||
"search_results.statuses": "Wpisy",
|
"search_results.statuses": "Wpisy",
|
||||||
"search_results.top": "Góra",
|
"search_results.top": "Góra",
|
||||||
"search_results.total": "{count, number} {count, plural, one {wynik} few {wyniki} many {wyników} more {wyników}}",
|
"search_results.total": "{count, number} {count, plural, one {wynik} few {wyniki} many {wyników} more {wyników}}",
|
||||||
|
"search_results.total.has_more": "{count, number} Ponad {count, plural, one {wynik} few {wyniki} many {wyników} more {wyników}}",
|
||||||
"security.codes.fail": "Nie udało się uzyskać zapasowych kodów",
|
"security.codes.fail": "Nie udało się uzyskać zapasowych kodów",
|
||||||
"security.confirm.fail": "Nieprawidłowy kod lub hasło. Spróbuj ponownie.",
|
"security.confirm.fail": "Nieprawidłowy kod lub hasło. Spróbuj ponownie.",
|
||||||
"security.delete_account.fail": "Nie udało się usunąć konta.",
|
"security.delete_account.fail": "Nie udało się usunąć konta.",
|
||||||
|
|
|
@ -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 >= 20,
|
||||||
|
statusesHasMore: action.results.statuses.length >= 20,
|
||||||
|
hashtagsHasMore: action.results.hashtags.length >= 20,
|
||||||
})).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 >= 20);
|
||||||
|
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)
|
||||||
|
|
|
@ -1,9 +1,19 @@
|
||||||
|
.search-page {
|
||||||
|
min-height: 97px;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
|
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
|
||||||
.search-page .search {
|
.search-page .search {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px + (285px * 1) + (10px * 1) - 1px) {
|
||||||
|
.search-page .column-header__wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -68,8 +78,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 +94,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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -160,3 +168,7 @@
|
||||||
.search-popout {
|
.search-popout {
|
||||||
@include search-popout;
|
@include search-popout;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search__filter-bar:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue