Added functionality to pages, layout for use with sidebar promotions

• Added:
- functionality to pages, layout for use with sidebar promotions

• Updated:
- pages, layouts to use StatusPromotionPanel

app/javascript/gabsocial/features/ui/ui.js

@@ -170,7 +170,7 @@ class SwitchingArea extends PureComponent {
 
         <WrappedRoute path='/explore' publicRoute page={ExplorePage} component={Explore} content={children} componentParams={{ title: 'Explore' }} />
 
-        <WrappedRoute path='/compose' exact page={BasicPage} component={Compose} content={children} componentParams={{ title: 'Compose' }} />
+        <WrappedRoute path='/compose' exact page={BasicPage} component={Compose} content={children} componentParams={{ title: 'Compose', page: 'compose' }} />
 
         <WrappedRoute path='/timeline/all' exact page={CommunityPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Community Feed' }} />
         <WrappedRoute path='/timeline/pro' exact page={ProPage} component={ProTimeline} content={children} componentParams={{ title: 'Pro Feed' }} />
@@ -180,10 +180,10 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
         <WrappedRoute path='/groups/browse/admin' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'admin' }} />
 
-        <WrappedRoute path='/groups/create' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Create Group' }} />
+        <WrappedRoute path='/groups/create' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Create Group', page: 'create-group' }} />
         { /* <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} /> 
         <WrappedRoute path='/groups/:id/removed-accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />  */}
-        <WrappedRoute path='/groups/:id/edit' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Edit Group' }} />
+        <WrappedRoute path='/groups/:id/edit' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Edit Group', page: 'edit-group' }} />
         <WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
 
         <WrappedRoute path='/tags/:id' publicRoute page={HashtagPage} component={HashtagTimeline} content={children} componentParams={{ title: 'Hashtag' }} />
@@ -191,8 +191,8 @@ class SwitchingArea extends PureComponent {
         { /* <WrappedRoute path='/shortcuts' publicRoute page={ShortcutsPage} component={Shortcuts} content={children} /> */ }
 
         <WrappedRoute path='/lists' exact page={ListsPage} component={ListsDirectory} content={children} />
-        <WrappedRoute path='/lists/create' exact page={ModalPage} component={ListCreate} content={children} componentParams={{ title: 'Create List' }} />
+        <WrappedRoute path='/lists/create' exact page={ModalPage} component={ListCreate} content={children} componentParams={{ title: 'Create List', page: 'create-list' }} />
-        <WrappedRoute path='/lists/:id/edit' exact page={ModalPage} component={ListEdit} content={children} componentParams={{ title: 'Edit List' }} />
+        <WrappedRoute path='/lists/:id/edit' exact page={ModalPage} component={ListEdit} content={children} componentParams={{ title: 'Edit List', page: 'edit-list' }} />
         <WrappedRoute path='/lists/:id' page={ListPage} component={ListTimeline} content={children} />
 
         <WrappedRoute path='/notifications' exact page={NotificationsPage} component={Notifications} content={children} />
@@ -229,7 +229,7 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/:username/likes' page={ProfilePage} component={LikedStatuses} content={children} />
 
         <Redirect from='/@:username/posts/:statusId' to='/:username/posts/:statusId' exact />
-        <WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={StatusFeature} content={children} componentParams={{ title: 'Status' }} />
+        <WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={StatusFeature} content={children} componentParams={{ title: 'Status', page: 'status' }} />
 
         { /*
         <Redirect from='/@:username/posts/:statusId/reposts' to='/:username/posts/:statusId/reposts' />

app/javascript/gabsocial/layouts/default_layout.js

@@ -6,9 +6,10 @@ export default class DefaultLayout extends PureComponent {
     actions: PropTypes.array,
     children: PropTypes.node.isRequired,
     layout: PropTypes.object,
-    showBackBtn: PropTypes.bool,
     noComposeButton: PropTypes.bool,
     noRightSidebar: PropTypes.bool,
+    page: PropTypes.string,
+    showBackBtn: PropTypes.bool,
     tabs: PropTypes.array,
     title: PropTypes.string.isRequired,
   }
@@ -18,22 +19,24 @@ export default class DefaultLayout extends PureComponent {
       actions,
       children,
       layout,
+      noComposeButton,
+      noRightSidebar,
+      page,
       showBackBtn,
       tabs,
       title,
-      noComposeButton,
-      noRightSidebar,
     } = this.props
 
     return (
       <Layout
         actions={actions}
         layout={layout}
+        noComposeButton={noComposeButton}
+        noRightSidebar={noRightSidebar}
+        page={page}
         showBackBtn={showBackBtn}
         tabs={tabs}
         title={title}
-        noComposeButton={noComposeButton}
-        noRightSidebar={noRightSidebar}
       >
         {children}
       </Layout>

app/javascript/gabsocial/layouts/group_layout.js

@@ -8,6 +8,7 @@ import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import GroupSidebarPanel from '../components/panel/groups_panel'
 import LinkFooter from '../components/link_footer'
 import GroupHeader from '../components/group_header'
+import SidebarPanelGroup from '../components/sidebar_panel_group'
 import Responsive from '../features/ui/util/responsive_component';
 
 export default class GroupLayout extends ImmutablePureComponent {
@@ -16,6 +17,7 @@ export default class GroupLayout extends ImmutablePureComponent {
     actions: PropTypes.array,
     children: PropTypes.node,
     group: ImmutablePropTypes.map,
+    groupId: PropTypes.string,
     layout: PropTypes.object,
     relationships: ImmutablePropTypes.map,
     showBackBtn: PropTypes.bool,
@@ -27,6 +29,7 @@ export default class GroupLayout extends ImmutablePureComponent {
       actions,
       children,
       group,
+      groupId,
       layout,
       relationships,
       showBackBtn,
@@ -40,6 +43,7 @@ export default class GroupLayout extends ImmutablePureComponent {
         actions={actions}
         showBackBtn={showBackBtn}
         title={title}
+        page='group'
       >
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <div className={[_s.default, _s.width100PC].join(' ')}>
@@ -70,10 +74,15 @@ export default class GroupLayout extends ImmutablePureComponent {
               <div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
                 <Sticky top={73} enabled>
                   <div className={[_s.default, _s.width340PX].join(' ')}>
-                    <GroupInfoPanel group={group} />
+                    <SidebarPanelGroup
-                    <WhoToFollowPanel />
+                      page={`group.${groupId}`}
-                    <GroupSidebarPanel isSlim />
+                      layout={[
-                    <LinkFooter />
+                        <GroupInfoPanel group={group} key='group-page-info-panel' />,
+                        <WhoToFollowPanel key='group-page-wtf-panel' />,
+                        <GroupSidebarPanel isSlim key='group-page-group-panel' />,
+                        <LinkFooter key='group-page-link-footer' />,
+                      ]}
+                    />
                   </div>
                 </Sticky>
               </div>

app/javascript/gabsocial/layouts/layout.js

@@ -6,6 +6,7 @@ import {
 import { me } from '../initial_state'
 import Sidebar from '../components/sidebar'
 import SidebarXS from '../components/sidebar_xs'
+import SidebarPanelGroup from '../components/sidebar_panel_group'
 import NavigationBar from '../components/navigation_bar'
 import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
 import FooterBar from '../components/footer_bar'
@@ -19,10 +20,11 @@ export default class Layout extends PureComponent {
   static propTypes = {
     actions: PropTypes.array,
     children: PropTypes.node,
-    layout: PropTypes.object,
+    layout: PropTypes.array,
     noComposeButton: PropTypes.bool,
     noRightSidebar: PropTypes.bool,
     noSidebar: PropTypes.bool,
+    page: PropTypes.string,
     showBackBtn: PropTypes.bool,
     tabs: PropTypes.array,
     title: PropTypes.string,
@@ -36,6 +38,7 @@ export default class Layout extends PureComponent {
       noComposeButton,
       noRightSidebar,
       noSidebar,
+      page,
       showBackBtn,
       tabs,
       title,
@@ -126,7 +129,7 @@ export default class Layout extends PureComponent {
                     <div className={[_s.default, _s.width340PX, _s.ml15].join(' ')}>
                       <Sticky top={73} enabled>
                         <div className={[_s.default, _s.width340PX].join(' ')}>
-                          {layout}
+                          <SidebarPanelGroup layout={layout} page={page} />
                         </div>
                       </Sticky>
                     </div>

app/javascript/gabsocial/pages/about_page.js

@@ -16,6 +16,7 @@ export default class AboutPage extends PureComponent {
         noComposeButton
         showBackBtn
         title={title}
+        page='about'
       >
         <PageTitle path={title} />
         {children}

app/javascript/gabsocial/pages/basic_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
 import LinkFooter from '../components/link_footer'
@@ -8,25 +7,29 @@ import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 export default class BasicPage extends PureComponent {
 
   static propTypes = {
-    title: PropTypes.string.isRequired,
     children: PropTypes.node.isRequired,
+    page: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
   }
 
   render() {
-    const { children, title } = this.props
+    const {
+      children,
+      page,
+      title,
+    } = this.props
 
     return (
       <DefaultLayout
         noComposeButton
         showBackBtn
         title={title}
-        layout={(
+        page={page}
-          <Fragment>
+        layout={[
-            <TrendsPanel />
+          <TrendsPanel key='basic-page-trends-panel' />,
-            <WhoToFollowPanel />
+          <WhoToFollowPanel key='basic-page-wtf-panel' />,
-            <LinkFooter />
+          <LinkFooter key='basic-page-link-footer' />,
-          </Fragment>
+        ]}
-        )}
       >
         <PageTitle path={title} />
         {children}

app/javascript/gabsocial/pages/community_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
 import PageTitle from '../features/ui/util/page_title'
@@ -38,21 +37,20 @@ class CommunityPage extends PureComponent {
     return (
       <DefaultLayout
         title={title}
+        page='community'
         actions={[
           {
             icon: 'ellipsis',
             onClick: onOpenCommunityPageSettingsModal,
           },
         ]}
-        layout={(
+        layout={[
-          <Fragment>
+          <ProgressPanel key='community-page-progress-panel' />,
-            <ProgressPanel />
+          <TrendsPanel key='community-page-progress-panel' />,
-            <TrendsPanel />
+          <WhoToFollowPanel key='community-page-wtf-panel' />,
-            <WhoToFollowPanel />
+          <GroupSidebarPanel key='community-page-groups-panel' />,
-            <GroupSidebarPanel />
+          <LinkFooter key='community-page-link-footer' />,
-            <LinkFooter />
+        ]}
-          </Fragment>
-        )}
       >
         <PageTitle path={title} />
         {children}

app/javascript/gabsocial/pages/explore_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
 import ProgressPanel from '../components/panel/progress_panel'
@@ -18,17 +17,16 @@ export default class ExplorePage extends PureComponent {
 
     return (
       <DefaultLayout
+        page='explore'
         title={title}
         noComposeButton
         showBackBtn
-        layout={(
+        layout={[
-          <Fragment>
+          <ProgressPanel key='explore-page-progress-panel' />,
-            <ProgressPanel />
+          <VerifiedAccountsPanel key='explore-page-verified-panel' />,
-            <VerifiedAccountsPanel />
+          <ShopPanel key='explore-page-shop-panel' />,
-            <ShopPanel />
+          <LinkFooter key='explore-page-link-footer' />,
-            <LinkFooter />
+        ]}
-          </Fragment>
-        )}
       >
         <PageTitle path={title} />
         {children}

app/javascript/gabsocial/pages/group_page.js

@@ -56,6 +56,7 @@ class GroupPage extends ImmutablePureComponent {
 				showBackBtn
 				title={groupTitle}
 				group={group}
+				groupId={groupId}
 				relationships={relationships}
 			>
 				<PageTitle path={[groupTitle, intl.formatMessage(messages.group)]} />

app/javascript/gabsocial/pages/groups_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import { me } from '../initial_state'
 import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
@@ -93,13 +92,12 @@ class GroupsPage extends PureComponent {
         title={title}
         actions={actions}
         tabs={tabs}
-        layout={(
+        page='groups'
-          <Fragment>
+        layout={[
-            <WhoToFollowPanel />
+          <WhoToFollowPanel key='groups-page-wtf-panel' />,
-            <GroupsPanel slim />
+          <GroupsPanel slim key='groups-page-groups-panel' />,
-            <LinkFooter />
+          <LinkFooter key='groups-page-link-footer' />,
-          </Fragment>
+        ]}
-        )}
       >
         <PageTitle path={title} />
         { children }

app/javascript/gabsocial/pages/hashtag_page.js

@@ -1,6 +1,6 @@
-import { Fragment } from 'react'
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
+import isObject from 'lodash.isobject'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
@@ -30,6 +30,7 @@ class HashtagPage extends PureComponent {
     intl: PropTypes.object.isRequired,
     children: PropTypes.node.isRequired,
     onOpenHashtagPageSettingsModal: PropTypes.func.isRequired,
+    params: PropTypes.object.isRequired,
   }
 
   render() {
@@ -37,25 +38,27 @@ class HashtagPage extends PureComponent {
       intl,
       children,
       onOpenHashtagPageSettingsModal,
+      params,
     } = this.props
 
+    const hashtag = isObject(params) ? params.id : ''
+
     return (
       <DefaultLayout
         title={intl.formatMessage(messages.hashtagTimeline)}
+        page={`hashtag.${hashtag}`}
         actions={[
           {
             icon: 'ellipsis',
             onClick: onOpenHashtagPageSettingsModal,
           },
         ]}
-        layout={(
+        layout={[
-          <Fragment>
+          <ProgressPanel key='hashtag-page-progress-panel' />,
-            <ProgressPanel />
+          <TrendsPanel key='hashtag-page-trends-panel' />,
-            <TrendsPanel />
+          <WhoToFollowPanel key='hashtag-page-wtf-panel' />,
-            <WhoToFollowPanel />
+          <LinkFooter key='hashtag-page-link-footer' />,
-            <LinkFooter />
+        ]}
-          </Fragment>
-        )}
       >
         <PageTitle path={intl.formatMessage(messages.hashtag)} />
         {children}

app/javascript/gabsocial/pages/home_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import throttle from 'lodash.throttle'
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
@@ -91,6 +90,7 @@ class HomePage extends PureComponent {
 
     return (
       <DefaultLayout
+        page='home'
         title={intl.formatMessage(messages.home)}
         actions={[
           {
@@ -98,19 +98,17 @@ class HomePage extends PureComponent {
             onClick: onOpenHomePageSettingsModal,
           },
         ]}
-        layout={(
+        layout={[
-          <Fragment>
+          <UserPanel key='home-page-user-panel' />,
-            <UserPanel />
+          <ProgressPanel key='home-page-progress-panel' />,
-            <ProgressPanel />
+          <ProPanel isPro={isPro} key='home-page-pro-panel' />,
-            <ProPanel isPro={isPro} />
+          <TrendsPanel key='home-page-trends-panel' />,
-            <TrendsPanel />
+          <ShopPanel isLazy shouldLoad={lazyLoaded} key='home-page-shop-panel' />,
-            <ShopPanel isLazy shouldLoad={lazyLoaded} />
+          <ListsPanel isLazy shouldLoad={lazyLoaded} key='home-page-lists-panel' />,
-            <ListsPanel isLazy shouldLoad={lazyLoaded} />
+          <WhoToFollowPanel isLazy shouldLoad={lazyLoaded} key='home-page-wtf-panel' />,
-            <WhoToFollowPanel isLazy shouldLoad={lazyLoaded} />
+          <GroupsPanel isLazy shouldLoad={lazyLoaded} key='home-page-groups-panel' />,
-            <GroupsPanel isLazy shouldLoad={lazyLoaded} />
+          <LinkFooter key='home-page-link-footer' />,
-            <LinkFooter />
+        ]}
-          </Fragment>
-        )}
       >
 
         <PageTitle

app/javascript/gabsocial/pages/list_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
@@ -66,6 +65,7 @@ class ListPage extends ImmutablePureComponent {
       <DefaultLayout
         showBackBtn
         title={intl.formatMessage(messages.list)}
+        page='list'
         actions={[
           {
             icon: 'cog',
@@ -76,14 +76,12 @@ class ListPage extends ImmutablePureComponent {
           //   onClick: onOpenListTimelineSettingsModal,
           // },
         ]}
-        layout={(
+        layout={[
-          <Fragment>
+          <ListDetailsPanel list={list} onEdit={this.handleOnOpenListEditModal} key='list-page-list-panel' />,
-            <ListDetailsPanel list={list} onEdit={this.handleOnOpenListEditModal} />
+          <TrendsPanel key='list-page-trends-panel' />,
-            <TrendsPanel />
+          <WhoToFollowPanel key='list-page-wtf-panel' />,
-            <WhoToFollowPanel />
+          <LinkFooter key='list-page-link-footer' />,
-            <LinkFooter />
+        ]}
-          </Fragment>
-        )}
       >
         <PageTitle path={[title, intl.formatMessage(messages.list)]} />
         { children }

app/javascript/gabsocial/pages/lists_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
@@ -38,19 +37,18 @@ class ListsPage extends PureComponent {
     return (
       <DefaultLayout
         title={intl.formatMessage(messages.lists)}
+        page='lists'
         actions={[
           {
             icon: 'add',
             onClick: onOpenListCreateModal,
           },
         ]}
-        layout={(
+        layout={[
-          <Fragment>
+          <TrendsPanel key='lists-page-trends-panel' />,
-            <TrendsPanel />
+          <WhoToFollowPanel key='lists-page-wtf-panel' />,
-            <WhoToFollowPanel />
+          <LinkFooter key='lists-page-link-footer' />,
-            <LinkFooter />
+        ]}
-          </Fragment>
-        )}
         showBackBtn
       >
         <PageTitle path={intl.formatMessage(messages.lists)} />

app/javascript/gabsocial/pages/modal_page.js

@@ -1,27 +1,31 @@
-import { Fragment } from 'react'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import DefaultLayout from '../layouts/default_layout'
 
 export default class ModalPage extends PureComponent {
+
   static propTypes = {
     title: PropTypes.string,
+    page: PropTypes.string,
     children: PropTypes.node,
   }
 
   render() {
-    const { children, title } = this.props
+    const {
+      children,
+      title,
+      page,
+    } = this.props
 
     return (
       <DefaultLayout
         title={title}
-        layout={(
+        page={page}
-          <Fragment>
+        layout={[
-            <WhoToFollowPanel />
+          <WhoToFollowPanel key='modal-page-wtf-panel' />,
-            <LinkFooter />
+          <LinkFooter key='search-page-link-footer' />,
-          </Fragment>
+        ]}
-        )}
         showBackBtn
       >
         <PageTitle path={title} />
@@ -29,4 +33,5 @@ export default class ModalPage extends PureComponent {
       </DefaultLayout>
     )
   }
+
 }

app/javascript/gabsocial/pages/notifications_page.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+
 import { defineMessages, injectIntl } from 'react-intl'
 import { setFilter } from '../actions/notifications'
 import { me } from '../initial_state'
@@ -86,14 +86,13 @@ class NotificationsPage extends PureComponent {
     return (
       <DefaultLayout
         title={intl.formatMessage(messages.notifications)}
-        layout={(
+        page='notifications'
-          <Fragment>
+        layout={[
-            <NotificationFilterPanel />
+          <NotificationFilterPanel key='notification-page-filter-panel' />,
-            <TrendsPanel />
+          <TrendsPanel key='notification-page-trends-panel' />,
-            <WhoToFollowPanel />
+          <WhoToFollowPanel key='notification-page-wtf-panel' />,
-            <LinkFooter />
+          <LinkFooter key='notification-page-link-footer' />,
-          </Fragment>
+        ]}
-        )}
         tabs={tabs}
       >
         <PageTitle

app/javascript/gabsocial/pages/pro_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
@@ -27,13 +26,12 @@ class ProPage extends PureComponent {
     return (
       <DefaultLayout
         title={title}
-        layout={(
+        page='pro'
-          <Fragment>
+        layout={[
-            <ProgressPanel />
+          <ProgressPanel key='pro-page-progress-panel' />,
-            <VerifiedAccountsPanel />
+          <VerifiedAccountsPanel key='pro-page-verified-panel' />,
-            <LinkFooter />
+          <LinkFooter key='pro-page-link-footer' />,
-          </Fragment>
+        ]}
-        )}
       >
         <PageTitle path={title} />
         {children}

app/javascript/gabsocial/pages/search_page.js

@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Responsive from '../features/ui/util/responsive_component'
@@ -17,17 +16,23 @@ const messages = defineMessages({
   hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' },
 })
 
+const mapStateToProps = (state) => ({
+  value: state.getIn(['search', 'value']),
+})
+
 export default
 @injectIntl
+@connect(mapStateToProps)
 class SearchPage extends PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
     children: PropTypes.node.isRequired,
+    value: PropTypes.string,
   }
 
   render() {
-    const { intl, children } = this.props
+    const { intl, children, value } = this.props
 
     const title = intl.formatMessage(messages.search)
     const tabs = [
@@ -49,19 +54,20 @@ class SearchPage extends PureComponent {
       },
     ]
 
+    const qos = !!value ? value : ''
+
     return (
       <Layout
         noComposeButton
         title={title}
         showBackBtn
         tabs={tabs}
-        layout={(
+        page={`search.${qos}`}
-          <Fragment>
+        layout={[
-            <SearchFilterPanel />
+          <SearchFilterPanel key='search-page-search-panel' />,
-            <TrendsPanel />
+          <TrendsPanel key='search-page-trends-panel' />,
-            <LinkFooter />
+          <LinkFooter key='search-page-link-footer' />,
-          </Fragment>
+        ]}
-        )}
       >
         <PageTitle path={title} />