gab-social/app/javascript/gabsocial/pages/search_page.js

99 lines
2.3 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-04-16 07:00:43 +01:00
import { defineMessages, injectIntl } from 'react-intl'
2020-05-07 06:55:24 +01:00
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Responsive from '../features/ui/util/responsive_component'
2020-04-16 07:00:43 +01:00
import PageTitle from '../features/ui/util/page_title'
2020-05-07 06:55:24 +01:00
import Search from '../components/search'
2020-04-29 03:24:35 +01:00
import Layout from '../layouts/layout'
import {
LinkFooter,
TrendsPanel,
SearchFilterPanel,
SignUpPanel,
} from '../features/ui/util/async_components'
2019-07-02 08:10:25 +01:00
class SearchPage extends React.PureComponent {
2020-04-16 07:00:43 +01:00
componentWillMount() {
const { intl } = this.props
2020-03-12 16:09:15 +00:00
this.tabs = [
2020-04-29 03:24:35 +01:00
{
2020-04-30 05:34:50 +01:00
title: intl.formatMessage(messages.top),
2020-04-29 03:24:35 +01:00
to: '/search'
},
{
2020-04-30 05:34:50 +01:00
title: intl.formatMessage(messages.people),
2020-04-29 03:24:35 +01:00
to: '/search/people'
},
{
2020-04-30 05:34:50 +01:00
title: intl.formatMessage(messages.groups),
2020-04-29 03:24:35 +01:00
to: '/search/groups'
},
{
2020-04-30 05:34:50 +01:00
title: intl.formatMessage(messages.hashtags),
2020-04-29 03:24:35 +01:00
to: '/search/hashtags'
},
]
}
2020-04-29 03:24:35 +01:00
render() {
const {
children,
intl,
value,
} = this.props
const title = intl.formatMessage(messages.search)
const qos = !!value ? value : ''
return (
2020-04-29 03:24:35 +01:00
<Layout
2020-05-07 05:03:34 +01:00
noComposeButton
2020-04-29 03:24:35 +01:00
title={title}
2020-03-24 04:39:12 +00:00
showBackBtn
tabs={this.tabs}
page={`search.${qos}`}
layout={[
SignUpPanel,
SearchFilterPanel,
TrendsPanel,
LinkFooter,
]}
2020-03-24 04:39:12 +00:00
>
2020-04-29 03:24:35 +01:00
<PageTitle path={title} />
2020-05-07 06:55:24 +01:00
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.d, _s.px10].join(' ')}>
2020-05-14 07:03:22 +01:00
<Search />
</div>
2020-05-07 06:55:24 +01:00
</Responsive>
2020-02-22 23:26:23 +00:00
{children}
2020-04-29 03:24:35 +01:00
</Layout>
)
}
2020-04-16 07:00:43 +01:00
}
const messages = defineMessages({
search: { id: 'search', defaultMessage: 'Search' },
top: { id: 'top', defaultMessage: 'Top' },
people: { id: 'people', defaultMessage: 'People' },
groups: { id: 'groups', defaultMessage: 'Groups' },
hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' },
})
const mapStateToProps = (state) => ({
value: state.getIn(['search', 'value']),
})
SearchPage.propTypes = {
intl: PropTypes.object.isRequired,
children: PropTypes.node.isRequired,
value: PropTypes.string,
}
export default injectIntl(connect(mapStateToProps)(SearchPage))