gab-social/app/javascript/gabsocial/features/search.js

230 lines
7.8 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-04-29 03:24:35 +01:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { withRouter } from 'react-router-dom'
2020-05-09 03:17:19 +01:00
import { me } from '../initial_state'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
2020-04-29 03:24:35 +01:00
import GroupListItem from '../components/group_list_item'
import Text from '../components/text'
import Account from '../components/account'
2020-04-29 23:32:49 +01:00
import PanelLayout from '../components/panel/panel_layout'
import ColumnIndicator from '../components/column_indicator'
import StatusContainer from '../containers/status_container'
import Block from '../components/block'
import PreviewCardItem from '../components/preview_card_item'
2020-04-29 03:24:35 +01:00
class Search extends ImmutablePureComponent {
state = {
isSmallScreen: (window.innerWidth <= 895),
}
2020-04-29 23:32:49 +01:00
render() {
const {
isError,
isLoading,
location,
results,
submitted,
} = this.props
2020-04-29 03:24:35 +01:00
const { isSmallScreen } = this.state
if (isLoading) {
return <ColumnIndicator type='loading' />
}
if (isError) {
return (
<ResponsiveClassesComponent classNamesXS={[_s.px10, _s.pt15].join(' ')}>
<Block>
<ColumnIndicator type='error' message='Error fetching search results.' />
</Block>
</ResponsiveClassesComponent>
)
}
if ((results.isEmpty() && isSmallScreen) || (!submitted && results.isEmpty())) {
return (
<ResponsiveClassesComponent classNamesXS={[_s.px10, _s.pt15].join(' ')}>
<Block>
<div className={[_s.d, _s.py15, _s.px15].join(' ')}>
<Text>Type in the box above and submit to perform a search.</Text>
</div>
</Block>
</ResponsiveClassesComponent>
)
2020-04-29 03:24:35 +01:00
}
2020-04-29 03:24:35 +01:00
const pathname = location.pathname || ''
const showPeople = pathname === '/search/people'
const showGroups = pathname === '/search/groups'
const showStatuses = pathname === '/search/statuses'
const showLinks = pathname === '/search/links'
2020-11-15 18:48:32 +00:00
const isTop = !showPeople && !showGroups && !showStatuses && !showLinks
2020-05-02 07:25:55 +01:00
const theLimit = 4
2020-04-29 03:24:35 +01:00
2020-11-15 18:48:32 +00:00
let accounts, statuses, groups, links
2020-04-29 03:24:35 +01:00
if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
2020-04-29 23:32:49 +01:00
const size = isTop ? Math.min(results.get('accounts').size, theLimit) : results.get('accounts').size;
const isMax = size === results.get('accounts').size
2020-04-29 03:24:35 +01:00
accounts = (
2020-04-29 23:32:49 +01:00
<PanelLayout
title='People'
headerButtonTo={isMax ? undefined : '/search/people'}
headerButtonTitle={isMax ? undefined : 'See more'}
footerButtonTo={isMax ? undefined : '/search/people'}
footerButtonTitle={isMax ? undefined : 'See more'}
noPadding
>
<div className={[_s.d, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
2020-04-29 23:32:49 +01:00
<Text color='tertiary' size='small'>
Showing {size} of {results.get('accounts').size} results
</Text>
</div>
2020-04-29 23:32:49 +01:00
{
results.get('accounts').slice(0, size).map(accountId => (
<Account
compact
withBio
key={accountId}
id={accountId}
/>
))
}
</PanelLayout>
2020-04-29 03:24:35 +01:00
)
}
if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
2020-04-29 23:32:49 +01:00
const size = isTop ? Math.min(results.get('groups').size, theLimit) : results.get('groups').size;
const isMax = size === results.get('groups').size
2020-04-29 03:24:35 +01:00
groups = (
2020-04-29 23:32:49 +01:00
<PanelLayout
title='Groups'
headerButtonTo={isMax ? undefined : '/search/groups'}
headerButtonTitle={isMax ? undefined : 'See more'}
footerButtonTo={isMax ? undefined : '/search/groups'}
footerButtonTitle={isMax ? undefined : 'See more'}
noPadding
>
<div className={[_s.d, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
2020-04-29 23:32:49 +01:00
<Text color='tertiary' size='small'>
Showing {size} of {results.get('groups').size} results
</Text>
</div>
<div className={_s.d}>
2020-05-04 19:44:37 +01:00
{
results.get('groups').slice(0, size).map((group, i) => (
2020-05-04 19:44:37 +01:00
<GroupListItem
key={`search-${group.get('name')}`}
id={group.get('id')}
isLast={size - 1 === i}
2020-05-04 19:44:37 +01:00
/>
))
}
</div>
2020-04-29 23:32:49 +01:00
</PanelLayout>
)
2020-04-29 03:24:35 +01:00
}
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 = (
<PanelLayout
title='Statuses'
headerButtonTo={isMax ? undefined : '/search/statuses'}
headerButtonTitle={isMax ? undefined : 'See more'}
footerButtonTo={isMax ? undefined : '/search/statuses'}
footerButtonTitle={isMax ? undefined : 'See more'}
noPadding
>
<div className={[_s.d, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Text color='tertiary' size='small'>
Showing {size} of {results.get('statuses').size} results
</Text>
</div>
{
results.get('statuses').slice(0, size).map((statusId) => (
<StatusContainer
key={`status-${statusId}`}
id={statusId}
contextType='search'
commentsLimited
/>
))
}
</PanelLayout>
)
}
if (results.get('links') && results.get('links').size > 0 && me && (isTop || showLinks)) {
const size = isTop ? Math.min(results.get('links').size, theLimit) : results.get('links').size;
const isMax = size === results.get('links').size
links = (
<PanelLayout
title='Links'
headerButtonTo={isMax ? undefined : '/search/links'}
headerButtonTitle={isMax ? undefined : 'See more'}
footerButtonTo={isMax ? undefined : '/search/links'}
footerButtonTitle={isMax ? undefined : 'See more'}
noPadding
>
<div className={[_s.d, _s.pb10, _s.px15, _s.mb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Text color='tertiary' size='small'>
Showing {size} of {results.get('links').size} results
</Text>
</div>
<div className={[_s.d, _s.w100PC, _s.px10].join(' ')}>
{
results.get('links').slice(0, size).map((linkId) => <PreviewCardItem id={linkId} />)
}
</div>
</PanelLayout>
)
}
2020-11-15 18:48:32 +00:00
if (!accounts && !statuses && !groups && !links) {
return (
<ResponsiveClassesComponent classNamesXS={[_s.px10, _s.pt15].join(' ')}>
<Block>
<ColumnIndicator type='missing' message='No search results.' />
</Block>
</ResponsiveClassesComponent>
)
}
2020-04-29 03:24:35 +01:00
return (
<div>
{accounts}
{groups}
{statuses}
{links}
</div>
)
}
}
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))