Added new SearchLayout, SearchNavigationBarXS

• Added:
- new SearchLayout, SearchNavigationBarXS

app/javascript/gabsocial/pages/search_page.js

@@ -1,104 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { defineMessages, injectIntl } from 'react-intl'
-import { BREAKPOINT_EXTRA_SMALL } from '../constants'
-import Responsive from '../features/ui/util/responsive_component'
-import PageTitle from '../features/ui/util/page_title'
-import Search from '../components/search'
-import Layout from '../layouts/layout'
-import {
-  LinkFooter,
-  TrendsPanel,
-  SearchFilterPanel,
-  SignUpPanel,
-} from '../features/ui/util/async_components'
+import SearchLayout from '../layouts/search_layout'
 
 class SearchPage extends React.PureComponent {
 
-  componentWillMount() {
-    const { intl } = this.props
-
-    this.tabs = [
-      {
-        title: intl.formatMessage(messages.top),
-        to: '/search'
-      },
-      {
-        title: intl.formatMessage(messages.people),
-        to: '/search/people'
-      },
-      {
-        title: intl.formatMessage(messages.groups),
-        to: '/search/groups'
-      },
-      {
-        title: intl.formatMessage(messages.statuses),
-        to: '/search/statuses'
-      },
-      {
-        title: intl.formatMessage(messages.hashtags),
-        to: '/search/hashtags'
-      },
-    ]
-  }
-
   render() {
-    const {
-      children,
-      intl,
-      value,
-    } = this.props
-
-    const title = intl.formatMessage(messages.search)
-    const qos = !!value ? value : ''
+    const { children } = this.props
 
     return (
-      <Layout
-        noComposeButton
-        title={title}
-        showBackBtn
-        tabs={this.tabs}
-        page={`search.${qos}`}
-        layout={[
-          SignUpPanel,
-          SearchFilterPanel,
-          TrendsPanel,
-          LinkFooter,
-        ]}
-      >
-        <PageTitle path={title} />
-
-        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.d, _s.px10].join(' ')}>
-            <Search />
-          </div>
-        </Responsive>
-
+      <SearchLayout>
         {children}
-      </Layout>
+      </SearchLayout>
     )
   }
 
 }
 
-const messages = defineMessages({
-  search: { id: 'search', defaultMessage: 'Search' },
-  top: { id: 'top', defaultMessage: 'Top' },
-  people: { id: 'people', defaultMessage: 'People' },
-  groups: { id: 'groups', defaultMessage: 'Groups' },
-  statuses: { id: 'statuses', defaultMessage: 'Statuses' },
-  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))
+export default SearchLayout