import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { withRouter } from 'react-router-dom' import { me } from '../initial_state' import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component' import HashtagItem from '../components/hashtag_item' import GroupListItem from '../components/group_list_item' import Text from '../components/text' import Account from '../components/account' import PanelLayout from '../components/panel/panel_layout' import ColumnIndicator from '../components/column_indicator' import StatusContainer from '../containers/status_container' import Block from '../components/block' class Search extends ImmutablePureComponent { state = { isSmallScreen: (window.innerWidth <= 895), } render() { const { isError, isLoading, location, results, submitted, } = this.props const { isSmallScreen } = this.state if (isLoading) { return } if (isError) { return ( ) } if ((results.isEmpty() && isSmallScreen) || (!submitted && results.isEmpty())) { return (
Type in the box above and submit to perform a search.
) } const pathname = location.pathname || '' const showPeople = pathname === '/search/people' const showHashtags = pathname === '/search/hashtags' const showGroups = pathname === '/search/groups' const showStatuses = pathname === '/search/statuses' const isTop = !showPeople && !showHashtags && !showGroups && !showStatuses const theLimit = 4 let accounts, statuses, hashtags, groups // : todo : statuses if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) { const size = isTop ? Math.min(results.get('accounts').size, theLimit) : results.get('accounts').size; const isMax = size === results.get('accounts').size accounts = (
Showing {size} of {results.get('accounts').size} results
{ results.get('accounts').slice(0, size).map(accountId => ( )) }
) } if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) { const size = isTop ? Math.min(results.get('groups').size, theLimit) : results.get('groups').size; const isMax = size === results.get('groups').size groups = (
Showing {size} of {results.get('groups').size} results
{ results.get('groups').slice(0, size).map((group, i) => ( )) }
) } if (results.get('statuses') && results.get('statuses').size > 0 && me && (isTop || showStatuses)) { const size = isTop ? Math.min(results.get('statuses').size, theLimit) : results.get('statuses').size; const isMax = size === results.get('statuses').size statuses = (
Showing {size} of {results.get('statuses').size} results
{ results.get('statuses').slice(0, size).map((statusId) => ( )) }
) } if (results.get('hashtags') && results.get('hashtags').size > 0 && me && (isTop || showHashtags)) { const size = isTop ? Math.min(results.get('hashtags').size, theLimit) : results.get('hashtags').size; const isMax = size === results.get('hashtags').size hashtags = (
Showing {size} of {results.get('hashtags').size} results
{results.get('hashtags').slice(0, size).map(hashtag => )}
) } if (!accounts && !statuses && !hashtags && !groups) { return ( ) } return (
{accounts} {groups} {statuses} {hashtags}
) } } const mapStateToProps = (state) => ({ isError: state.getIn(['search', 'isError']), isLoading: state.getIn(['search', 'isLoading']), results: state.getIn(['search', 'results']), submitted: state.getIn(['search', 'submitted']), }) Search.propTypes = { isError: PropTypes.bool.isRequired, isLoading: PropTypes.bool.isRequired, location: PropTypes.object, results: ImmutablePropTypes.map.isRequired, submitted: PropTypes.bool.isRequired, } export default withRouter(connect(mapStateToProps)(Search))