Updated Explore, Group, Groups Pages

• Updated:
- Explore, Group, Groups Pages

app/javascript/gabsocial/pages/explore_page.js

@@ -1,10 +1,5 @@
 import PageTitle from '../features/ui/util/page_title'
-import DefaultLayout from '../layouts/default_layout'
-import ProgressPanel from '../components/panel/progress_panel'
-import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel'
-import ShopPanel from '../components/panel/shop_panel'
-import SignupPanel from '../components/panel/sign_up_panel'
-import LinkFooter from '../components/link_footer'
+import ExploreLayout from '../layouts/explore_layout'
 
 export default class ExplorePage extends PureComponent {
 
@@ -17,22 +12,13 @@ export default class ExplorePage extends PureComponent {
     const { children, title } = this.props
 
     return (
-      <DefaultLayout
+      <ExploreLayout
         page='explore'
         title={title}
-        noComposeButton
-        showBackBtn
-        layout={[
-          <SignupPanel key='explore-page-signup-panel' />,
-          <ProgressPanel key='explore-page-progress-panel' />,
-          <VerifiedAccountsPanel key='explore-page-verified-panel' />,
-          <ShopPanel key='explore-page-shop-panel' />,
-          <LinkFooter key='explore-page-link-footer' />,
-        ]}
       >
         <PageTitle path={title} />
         {children}
-      </DefaultLayout>
+      </ExploreLayout>
     )
   }
 

app/javascript/gabsocial/pages/group_page.js

@@ -7,6 +7,7 @@ import PageTitle from '../features/ui/util/page_title'
 import GroupLayout from '../layouts/group_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
+import GroupSortBlock from '../components/group_sort_block'
 
 const messages = defineMessages({
 	group: { id: 'group', defaultMessage: 'Group' },
@@ -20,7 +21,7 @@ const mapStateToProps = (state, { params: { id } }) => ({
 const mapDispatchToProps = (dispatch) => ({
 	onFetchGroup(groupId) {
 		dispatch(fetchGroup(groupId))
-	}
+	},
 })
 
 export default
@@ -34,10 +35,13 @@ class GroupPage extends ImmutablePureComponent {
 		children: PropTypes.node.isRequired,
 		relationships: ImmutablePropTypes.map,
 		onFetchGroup: PropTypes.func.isRequired,
+		sortByValue: PropTypes.string.isRequired,
+		sortByTopValue: PropTypes.string.isRequired,
 	}
 	
 	componentDidMount() {
 		this.props.onFetchGroup(this.props.params.id)
+		// this.props.onFetchGroup(this.props.params.slug)
 	}
 
 	render() {
@@ -46,6 +50,7 @@ class GroupPage extends ImmutablePureComponent {
 			children,
 			group,
 			relationships,
+			isTimeline,
 		} = this.props
 
 		const groupTitle = !!group ? group.get('title') : ''
@@ -54,21 +59,26 @@ class GroupPage extends ImmutablePureComponent {
 		return (
 			<GroupLayout
 				showBackBtn
-				title={groupTitle}
+				title={'Group'}
 				group={group}
 				groupId={groupId}
 				relationships={relationships}
+				isTimeline={isTimeline}
 			>
 				<PageTitle path={[groupTitle, intl.formatMessage(messages.group)]} />
 
 				{
-					!!relationships && relationships.get('member') &&
+					!!relationships && isTimeline && relationships.get('member') &&
 					<Fragment>
 						<TimelineComposeBlock size={46} groupId={groupId} autoFocus />
 						<Divider />
 					</Fragment>
 				}
 
+				{
+					isTimeline && <GroupSortBlock />
+				}
+
 				{children}
 			</GroupLayout>
 		)

app/javascript/gabsocial/pages/groups_page.js

@@ -1,20 +1,15 @@
 import { me } from '../initial_state'
 import { defineMessages, injectIntl } from 'react-intl'
-import { openModal } from '../actions/modal'
-import {
-  MODAL_GROUP_CREATE,
-  MODAL_PRO_UPGRADE,
-} from '../constants'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import GroupsPanel from '../components/panel/groups_panel'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import DefaultLayout from '../layouts/default_layout'
 
 const messages = defineMessages({
   groups: { id: 'groups', defaultMessage: 'Groups' },
-  featured: { id: 'featured', defaultMessage: 'Featured' },
-  new: { id: 'new', defaultMessage: 'Just Added' },
+  new: { id: 'new', defaultMessage: 'Recently Added Groups' },
+  featured: { id: 'featured', defaultMessage: 'Featured Groups' },
+  myGroupsTimeline: { id: 'my_groups_timeline', defaultMessage: 'Timeline' },
   myGroups: { id: 'my_groups', defaultMessage: 'My Groups' },
   admin: { id: 'admin', defaultMessage: 'Admin' },
 })
@@ -23,30 +18,15 @@ const mapStateToProps = (state) => ({
   isPro: state.getIn(['accounts', me, 'is_pro']),
 })
 
-const mapDispatchToProps = (dispatch) => ({
-  onOpenGroupCreateModal(isPro) {
-    if (!isPro) {
-      dispatch(openModal(MODAL_PRO_UPGRADE))
-    } else {
-      dispatch(openModal(MODAL_GROUP_CREATE))
-    }
-  },
-})
-
 export default
 @injectIntl
-@connect(mapStateToProps, mapDispatchToProps)
+@connect(mapStateToProps)
 class GroupsPage extends PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
     children: PropTypes.node.isRequired,
     isPro: PropTypes.bool,
-    onOpenGroupCreateModal: PropTypes.func.isRequired,
-  }
-
-  handleOnOpenGroupCreateModal = () => {
-    this.props.onOpenGroupCreateModal(this.props.isPro)
   }
 
   render() {
@@ -54,28 +34,32 @@ class GroupsPage extends PureComponent {
       intl,
       children,
       isPro,
-      onOpenGroupCreateModal,
     } = this.props
 
-    const actions = [
+    const actions = isPro ? [
       {
         icon: 'add',
-        onClick: this.handleOnOpenGroupCreateModal,
+        to: '/groups/create',
       },
-    ]
+    ] : []
+
     const tabs = !!me ? [
       {
-        title: intl.formatMessage(messages.featured),
+        title: intl.formatMessage(messages.myGroupsTimeline),
         to: '/groups',
       },
-      {
-        title: intl.formatMessage(messages.new),
-        to: '/groups/new',
-      },
       {
         title: intl.formatMessage(messages.myGroups),
         to: '/groups/browse/member',
       },
+      {
+        title: intl.formatMessage(messages.featured),
+        to: '/groups/browse/featured',
+      },
+      {
+        title: intl.formatMessage(messages.new),
+        to: '/groups/browse/new',
+      },
     ] : []
 
     if (isPro) {
@@ -94,8 +78,7 @@ class GroupsPage extends PureComponent {
         tabs={tabs}
         page='groups'
         layout={[
-          <WhoToFollowPanel key='groups-page-wtf-panel' />,
-          <GroupsPanel slim key='groups-page-groups-panel' />,
+          <GroupsPanel key='groups-page-groups-panel' groupType='member' />,
           <LinkFooter key='groups-page-link-footer' />,
         ]}
       >