123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- import PropTypes from 'prop-types';
- import { PureComponent } from 'react';
- import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
- import { Helmet } from 'react-helmet';
- import { NavLink, Switch, Route } from 'react-router-dom';
- import { connect } from 'react-redux';
- import SearchIcon from '@/material-icons/400-24px/search.svg?react';
- import TagIcon from '@/material-icons/400-24px/tag.svg?react';
- import Column from 'mastodon/components/column';
- import ColumnHeader from 'mastodon/components/column_header';
- import Search from 'mastodon/features/compose/containers/search_container';
- import { trendsEnabled } from 'mastodon/initial_state';
- import Links from './links';
- import SearchResults from './results';
- import Statuses from './statuses';
- import Suggestions from './suggestions';
- import Tags from './tags';
- const messages = defineMessages({
- title: { id: 'explore.title', defaultMessage: 'Explore' },
- searchResults: { id: 'explore.search_results', defaultMessage: 'Search results' },
- });
- const mapStateToProps = state => ({
- layout: state.getIn(['meta', 'layout']),
- isSearching: state.getIn(['search', 'submitted']) || !trendsEnabled,
- });
- class Explore extends PureComponent {
- static contextTypes = {
- identity: PropTypes.object,
- };
- static propTypes = {
- intl: PropTypes.object.isRequired,
- multiColumn: PropTypes.bool,
- isSearching: PropTypes.bool,
- };
- handleHeaderClick = () => {
- this.column.scrollTop();
- };
- setRef = c => {
- this.column = c;
- };
- render() {
- const { intl, multiColumn, isSearching } = this.props;
- const { signedIn } = this.context.identity;
- return (
- <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
- <ColumnHeader
- icon={isSearching ? 'search' : 'hashtag'}
- iconComponent={isSearching ? SearchIcon : TagIcon}
- title={intl.formatMessage(isSearching ? messages.searchResults : messages.title)}
- onClick={this.handleHeaderClick}
- multiColumn={multiColumn}
- />
- <div className='explore__search-header'>
- <Search />
- </div>
- {isSearching ? (
- <SearchResults />
- ) : (
- <>
- <div className='account__section-headline'>
- <NavLink exact to='/explore'>
- <FormattedMessage tagName='div' id='explore.trending_statuses' defaultMessage='Posts' />
- </NavLink>
- <NavLink exact to='/explore/tags'>
- <FormattedMessage tagName='div' id='explore.trending_tags' defaultMessage='Hashtags' />
- </NavLink>
- {signedIn && (
- <NavLink exact to='/explore/suggestions'>
- <FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' />
- </NavLink>
- )}
- <NavLink exact to='/explore/links'>
- <FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' />
- </NavLink>
- </div>
- <Switch>
- <Route path='/explore/tags' component={Tags} />
- <Route path='/explore/links' component={Links} />
- <Route path='/explore/suggestions' component={Suggestions} />
- <Route exact path={['/explore', '/explore/posts', '/search']}>
- <Statuses multiColumn={multiColumn} />
- </Route>
- </Switch>
- <Helmet>
- <title>{intl.formatMessage(messages.title)}</title>
- <meta name='robots' content={isSearching ? 'noindex' : 'all'} />
- </Helmet>
- </>
- )}
- </Column>
- );
- }
- }
- export default connect(mapStateToProps)(injectIntl(Explore));
|