2022-02-25 01:34:33 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2023-05-23 18:15:17 +03:00
|
|
|
import { PureComponent } from 'react';
|
|
|
|
|
2022-09-29 05:39:33 +03:00
|
|
|
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
|
2023-05-23 18:15:17 +03:00
|
|
|
|
|
|
|
import { Helmet } from 'react-helmet';
|
|
|
|
|
|
|
|
import { List as ImmutableList } from 'immutable';
|
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
2022-02-25 01:34:33 +02:00
|
|
|
import { connect } from 'react-redux';
|
2023-05-23 18:15:17 +03:00
|
|
|
|
2023-10-24 20:45:08 +03:00
|
|
|
import { ReactComponent as FindInPageIcon } from '@material-symbols/svg-600/outlined/find_in_page.svg';
|
|
|
|
import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
|
|
|
|
import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
|
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
import { submitSearch, expandSearch } from 'mastodon/actions/search';
|
2022-02-25 01:34:33 +02:00
|
|
|
import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
|
2023-09-06 00:54:24 +03:00
|
|
|
import { Icon } from 'mastodon/components/icon';
|
|
|
|
import ScrollableList from 'mastodon/components/scrollable_list';
|
2023-05-23 18:15:17 +03:00
|
|
|
import Account from 'mastodon/containers/account_container';
|
|
|
|
import Status from 'mastodon/containers/status_container';
|
2022-09-29 05:39:33 +03:00
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
import { SearchSection } from './components/search_section';
|
|
|
|
|
2022-09-29 05:39:33 +03:00
|
|
|
const messages = defineMessages({
|
|
|
|
title: { id: 'search_results.title', defaultMessage: 'Search for {q}' },
|
|
|
|
});
|
2022-02-25 01:34:33 +02:00
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
|
isLoading: state.getIn(['search', 'isLoading']),
|
|
|
|
results: state.getIn(['search', 'results']),
|
2022-09-29 05:39:33 +03:00
|
|
|
q: state.getIn(['search', 'searchTerm']),
|
2023-09-06 00:54:24 +03:00
|
|
|
submittedType: state.getIn(['search', 'type']),
|
2022-02-25 01:34:33 +02:00
|
|
|
});
|
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
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);
|
2022-02-25 01:34:33 +02:00
|
|
|
} else {
|
|
|
|
return list;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
const renderAccounts = accounts => hidePeek(accounts).map(id => (
|
|
|
|
<Account key={id} id={id} />
|
|
|
|
));
|
2022-02-25 01:34:33 +02:00
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
const renderHashtags = hashtags => hidePeek(hashtags).map(hashtag => (
|
|
|
|
<Hashtag key={hashtag.get('name')} hashtag={hashtag} />
|
|
|
|
));
|
2022-02-25 01:34:33 +02:00
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
const renderStatuses = statuses => hidePeek(statuses).map(id => (
|
|
|
|
<Status key={id} id={id} />
|
|
|
|
));
|
2022-02-25 01:34:33 +02:00
|
|
|
|
2023-05-23 11:52:27 +03:00
|
|
|
class Results extends PureComponent {
|
2022-02-25 01:34:33 +02:00
|
|
|
|
|
|
|
static propTypes = {
|
2023-09-06 00:54:24 +03:00
|
|
|
results: ImmutablePropTypes.contains({
|
|
|
|
accounts: ImmutablePropTypes.orderedSet,
|
|
|
|
statuses: ImmutablePropTypes.orderedSet,
|
|
|
|
hashtags: ImmutablePropTypes.orderedSet,
|
|
|
|
}),
|
2022-02-25 01:34:33 +02:00
|
|
|
isLoading: PropTypes.bool,
|
|
|
|
multiColumn: PropTypes.bool,
|
|
|
|
dispatch: PropTypes.func.isRequired,
|
2022-09-29 05:39:33 +03:00
|
|
|
q: PropTypes.string,
|
|
|
|
intl: PropTypes.object,
|
2023-09-06 00:54:24 +03:00
|
|
|
submittedType: PropTypes.oneOf(['accounts', 'statuses', 'hashtags']),
|
2022-02-25 01:34:33 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
state = {
|
2023-09-06 00:54:24 +03:00
|
|
|
type: this.props.submittedType || 'all',
|
|
|
|
};
|
|
|
|
|
|
|
|
static getDerivedStateFromProps(props, state) {
|
|
|
|
if (props.submittedType !== state.type) {
|
|
|
|
return {
|
|
|
|
type: props.submittedType || 'all',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
2023-10-09 14:38:29 +03:00
|
|
|
}
|
2023-09-06 00:54:24 +03:00
|
|
|
|
|
|
|
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' });
|
2022-02-25 01:34:33 +02:00
|
|
|
};
|
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
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'));
|
|
|
|
}
|
2022-02-25 01:34:33 +02:00
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
this.setState({ type: 'hashtags' });
|
2023-10-09 14:38:29 +03:00
|
|
|
};
|
2023-09-06 00:54:24 +03:00
|
|
|
|
|
|
|
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' });
|
2023-10-09 14:38:29 +03:00
|
|
|
};
|
2023-09-06 00:54:24 +03:00
|
|
|
|
|
|
|
handleLoadMoreAccounts = () => this._loadMore('accounts');
|
|
|
|
handleLoadMoreStatuses = () => this._loadMore('statuses');
|
|
|
|
handleLoadMoreHashtags = () => this._loadMore('hashtags');
|
|
|
|
|
|
|
|
_loadMore (type) {
|
2022-02-25 01:34:33 +02:00
|
|
|
const { dispatch } = this.props;
|
|
|
|
dispatch(expandSearch(type));
|
|
|
|
}
|
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
handleLoadMore = () => {
|
|
|
|
const { type } = this.state;
|
|
|
|
|
|
|
|
if (type !== 'all') {
|
|
|
|
this._loadMore(type);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-02-25 01:34:33 +02:00
|
|
|
render () {
|
2022-09-29 05:39:33 +03:00
|
|
|
const { intl, isLoading, q, results } = this.props;
|
2022-02-25 01:34:33 +02:00
|
|
|
const { type } = this.state;
|
|
|
|
|
2023-09-06 00:54:24 +03:00
|
|
|
// 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;
|
2022-02-25 01:34:33 +02:00
|
|
|
|
2023-09-21 14:51:21 +03:00
|
|
|
const accounts = results.get('accounts', ImmutableList());
|
|
|
|
const hashtags = results.get('hashtags', ImmutableList());
|
|
|
|
const statuses = results.get('statuses', ImmutableList());
|
|
|
|
|
|
|
|
switch(type) {
|
|
|
|
case 'all':
|
|
|
|
filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? (
|
|
|
|
<>
|
|
|
|
{accounts.size > 0 && (
|
2023-10-24 20:45:08 +03:00
|
|
|
<SearchSection key='accounts' title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
|
2023-09-21 14:51:21 +03:00
|
|
|
{accounts.take(INITIAL_DISPLAY).map(id => <Account key={id} id={id} />)}
|
|
|
|
</SearchSection>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{hashtags.size > 0 && (
|
2023-10-24 20:45:08 +03:00
|
|
|
<SearchSection key='hashtags' title={<><Icon id='hashtag' icon={TagIcon} /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
|
2023-09-21 14:51:21 +03:00
|
|
|
{hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
|
|
|
</SearchSection>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{statuses.size > 0 && (
|
2023-10-24 20:45:08 +03:00
|
|
|
<SearchSection key='statuses' title={<><Icon id='quote-right' icon={FindInPageIcon} /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
|
2023-09-21 14:51:21 +03:00
|
|
|
{statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
|
|
|
|
</SearchSection>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
) : [];
|
|
|
|
break;
|
|
|
|
case 'accounts':
|
|
|
|
filteredResults = renderAccounts(accounts);
|
|
|
|
break;
|
|
|
|
case 'hashtags':
|
|
|
|
filteredResults = renderHashtags(hashtags);
|
|
|
|
break;
|
|
|
|
case 'statuses':
|
|
|
|
filteredResults = renderStatuses(statuses);
|
|
|
|
break;
|
2022-02-25 01:34:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2023-05-23 12:47:36 +03:00
|
|
|
<>
|
2022-02-25 01:34:33 +02:00
|
|
|
<div className='account__section-headline'>
|
2023-08-23 16:43:41 +03:00
|
|
|
<button onClick={this.handleSelectAll} className={type === 'all' ? 'active' : undefined}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
|
|
|
|
<button onClick={this.handleSelectAccounts} className={type === 'accounts' ? 'active' : undefined}><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></button>
|
|
|
|
<button onClick={this.handleSelectHashtags} className={type === 'hashtags' ? 'active' : undefined}><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></button>
|
|
|
|
<button onClick={this.handleSelectStatuses} className={type === 'statuses' ? 'active' : undefined}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
|
2022-02-25 01:34:33 +02:00
|
|
|
</div>
|
|
|
|
|
2023-10-03 14:12:39 +03:00
|
|
|
<div className='explore__search-results' data-nosnippet>
|
2023-09-06 00:54:24 +03:00
|
|
|
<ScrollableList
|
|
|
|
scrollKey='search-results'
|
|
|
|
isLoading={isLoading}
|
|
|
|
onLoadMore={this.handleLoadMore}
|
|
|
|
hasMore={hasMore}
|
|
|
|
emptyMessage={<FormattedMessage id='search_results.nothing_found' defaultMessage='Could not find anything for these search terms' />}
|
|
|
|
bindToDocument
|
|
|
|
>
|
|
|
|
{filteredResults}
|
|
|
|
</ScrollableList>
|
2022-02-25 01:34:33 +02:00
|
|
|
</div>
|
2022-09-29 05:39:33 +03:00
|
|
|
|
|
|
|
<Helmet>
|
2022-10-09 04:55:09 +03:00
|
|
|
<title>{intl.formatMessage(messages.title, { q })}</title>
|
2022-09-29 05:39:33 +03:00
|
|
|
</Helmet>
|
2023-05-23 12:47:36 +03:00
|
|
|
</>
|
2022-02-25 01:34:33 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
2023-03-24 04:17:53 +02:00
|
|
|
|
|
|
|
export default connect(mapStateToProps)(injectIntl(Results));
|