94 lines
3.7 KiB
JavaScript
94 lines
3.7 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
|
|
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
|
|
import SearchIcon from '@/material-icons/400-24px/search.svg?react';
|
|
import TagIcon from '@/material-icons/400-24px/tag.svg?react';
|
|
import { Icon } from 'flavours/glitch/components/icon';
|
|
import { LoadMore } from 'flavours/glitch/components/load_more';
|
|
import { SearchSection } from 'flavours/glitch/features/explore/components/search_section';
|
|
|
|
|
|
import { ImmutableHashtag as Hashtag } from '../../../components/hashtag';
|
|
import AccountContainer from '../../../containers/account_container';
|
|
import StatusContainer from '../../../containers/status_container';
|
|
|
|
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,
|
|
expandSearch: PropTypes.func.isRequired,
|
|
searchTerm: PropTypes.string,
|
|
};
|
|
|
|
handleLoadMoreAccounts = () => this.props.expandSearch('accounts');
|
|
|
|
handleLoadMoreStatuses = () => this.props.expandSearch('statuses');
|
|
|
|
handleLoadMoreHashtags = () => this.props.expandSearch('hashtags');
|
|
|
|
render () {
|
|
const { results } = this.props;
|
|
|
|
let accounts, statuses, hashtags;
|
|
|
|
if (results.get('accounts') && results.get('accounts').size > 0) {
|
|
accounts = (
|
|
<SearchSection title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
|
|
{withoutLastResult(results.get('accounts')).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
|
|
{(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
|
|
</SearchSection>
|
|
);
|
|
}
|
|
|
|
if (results.get('hashtags') && results.get('hashtags').size > 0) {
|
|
hashtags = (
|
|
<SearchSection title={<><Icon id='hashtag' icon={TagIcon} /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
|
|
{withoutLastResult(results.get('hashtags')).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
|
|
{(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
|
|
</SearchSection>
|
|
);
|
|
}
|
|
|
|
if (results.get('statuses') && results.get('statuses').size > 0) {
|
|
statuses = (
|
|
<SearchSection title={<><Icon id='quote-right' icon={FindInPageIcon} /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
|
|
{withoutLastResult(results.get('statuses')).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
|
|
{(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
|
|
</SearchSection>
|
|
);
|
|
}
|
|
|
|
|
|
return (
|
|
<div className='drawer--results'>
|
|
<header className='search-results__header'>
|
|
<Icon id='search' icon={SearchIcon} />
|
|
<FormattedMessage id='explore.search_results' defaultMessage='Search results' />
|
|
</header>
|
|
|
|
{accounts}
|
|
{hashtags}
|
|
{statuses}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
export default SearchResults;
|