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

87 lines
2.4 KiB
JavaScript
Raw Normal View History

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-02-22 23:26:23 +00:00
import LinkFooter from '../components/link_footer'
2020-03-02 22:26:25 +00:00
import SearchFilterPanel from '../components/panel/search_filter_panel'
2020-05-09 03:17:19 +01:00
import TrendsPanel from '../components/panel/trends_panel'
import SignupPanel from '../components/panel/sign_up_panel'
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'
2019-07-02 08:10:25 +01:00
2020-04-16 07:00:43 +01:00
const messages = defineMessages({
search: { id: 'search', defaultMessage: 'Search' },
2020-04-30 05:34:50 +01:00
top: { id: 'top', defaultMessage: 'Top' },
people: { id: 'people', defaultMessage: 'People' },
groups: { id: 'groups', defaultMessage: 'Groups' },
hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' },
2020-04-16 07:00:43 +01:00
})
const mapStateToProps = (state) => ({
value: state.getIn(['search', 'value']),
})
2020-04-16 07:00:43 +01:00
export default
@injectIntl
@connect(mapStateToProps)
2020-04-16 07:00:43 +01:00
class SearchPage extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
children: PropTypes.node.isRequired,
value: PropTypes.string,
2020-03-12 16:09:15 +00:00
}
render() {
const { intl, children, value } = this.props
2020-02-22 23:26:23 +00:00
2020-04-29 03:24:35 +01:00
const title = intl.formatMessage(messages.search)
const tabs = [
{
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'
},
]
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
2020-04-29 03:24:35 +01:00
tabs={tabs}
page={`search.${qos}`}
layout={[
<SignupPanel key='search-page-signup-panel' />,
<SearchFilterPanel key='search-page-search-panel' />,
<TrendsPanel key='search-page-trends-panel' />,
<LinkFooter key='search-page-link-footer' />,
]}
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}>
2020-05-14 07:03:22 +01:00
<div className={[_s.default, _s.px10].join(' ')}>
<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
2020-02-22 23:26:23 +00:00
}