Progress

app/javascript/gabsocial/pages/group_page.js

@@ -1,7 +1,9 @@
 import { Fragment } from 'react'
+import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { fetchGroup } from '../actions/groups'
+import PageTitle from '../features/ui/util/page_title'
 import GroupInfoPanel from '../components/panel/group_info_panel'
 import GroupLayout from '../layouts/group_layout'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
@@ -10,35 +12,43 @@ import LinkFooter from '../components/link_footer'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
 
+const messages = defineMessages({
+	group: { id: 'group', defaultMessage: 'Group' },
+})
+
 const mapStateToProps = (state, { params: { id } }) => ({
 	group: state.getIn(['groups', id]),
 	relationships: state.getIn(['group_relationships', id]),
 })
 
+const mapDispatchToProps = () => ({
+	fetchGroup,
+})
+
 export default
-@connect(mapStateToProps)
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
 class GroupPage extends ImmutablePureComponent {
 
 	static propTypes = {
+		intl: PropTypes.object.isRequired,
 		group: ImmutablePropTypes.map,
+		chilren: PropTypes.node.isRequired,
 		relationships: ImmutablePropTypes.map,
-		dispatch: PropTypes.func.isRequired,
-	}
-
-	componentDidMount() {
-		const { group } = this.props
-		const groupTitle = !group ? '...' : group.get('title')
-    document.title = `Group / ${groupTitle} - Gab`
+		fetchGroup: PropTypes.func.isRequired,
 	}
 	
-	componentWillMount() {
-		const { params: { id }, dispatch } = this.props
-
-		dispatch(fetchGroup(id))
+	componentDidMount() {
+		this.props.fetchGroup(this.props.params.id)
 	}
 
 	render() {
-		const { children, group, relationships } = this.props
+		const {
+			intl,
+			children,
+			group,
+			relationships,
+		} = this.props
 
 		// <div className="column-header__wrapper">
 		// 	<h1 className="column-header">
@@ -65,8 +75,11 @@ class GroupPage extends ImmutablePureComponent {
 		// 	</div>}
 		// </div>
 
+		const groupTitle = !!group ? group.get('title') : ''
+
 		return (
 			<GroupLayout
+				showBackBtn
 				group={group}
 				relationships={relationships}
 				actions={[
@@ -83,8 +96,9 @@ class GroupPage extends ImmutablePureComponent {
 						<LinkFooter />
 					</Fragment>
 				)}
-				showBackBtn
 			>
+				<PageTitle path={[groupTitle, intl.formatMessage(messages.group)]} />
+
 				{
 					!!relationships && relationships.get('member') &&
 					<Fragment>
@@ -92,6 +106,7 @@ class GroupPage extends ImmutablePureComponent {
 						<Divider />
 					</Fragment>
 				}
+
 				{children}
 			</GroupLayout>
 		)