Progress

app/javascript/gabsocial/pages/basic_page.js

@@ -1,4 +1,5 @@
 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 TrendsPanel from '../components/panel/trends_panel'
@@ -6,8 +7,8 @@ import DefaultLayout from '../layouts/default_layout'
 
 export default class BasicPage extends PureComponent {
   static propTypes = {
-    title: PropTypes.string,
-    children: PropTypes.node,
+    title: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
   }
 
   render() {
@@ -15,6 +16,7 @@ export default class BasicPage extends PureComponent {
 
     return (
       <DefaultLayout
+        showBackBtn
         title={title}
         layout={(
           <Fragment>
@@ -23,8 +25,8 @@ export default class BasicPage extends PureComponent {
             <LinkFooter />
           </Fragment>
         )}
-        showBackBtn
       >
+        <PageTitle path={title} />
         {children}
       </DefaultLayout>
     )

app/javascript/gabsocial/pages/community_page.js

@@ -1,5 +1,7 @@
 import { Fragment } from 'react'
+import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
+import PageTitle from '../features/ui/util/page_title'
 import GroupSidebarPanel from '../components/panel/groups_panel'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
@@ -10,6 +12,10 @@ import DefaultLayout from '../layouts/default_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
 
+const messages = defineMessages({
+  community: { 'id': 'column.community', 'defaultMessage': 'Community timeline' },
+})
+
 const mapDispatchToProps = (dispatch) => ({
   onOpenCommunityPageSettingsModal() {
     dispatch(openModal('COMMUNITY_TIMELINE_SETTINGS'))
@@ -17,23 +23,24 @@ const mapDispatchToProps = (dispatch) => ({
 })
 
 export default
+@injectIntl
 @connect(null, mapDispatchToProps)
 class CommunityPage extends PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired,
     onOpenCommunityPageSettingsModal: PropTypes.func.isRequired,
   }
 
-  componentDidMount() {
-    document.title = '(1) Community - Gab'
-  }
-
   render() {
-    const { children, onOpenCommunityPageSettingsModal } = this.props
+    const { intl, children, onOpenCommunityPageSettingsModal } = this.props
+
+    const title = intl.formatMessage(messages.community)
 
     return (
       <DefaultLayout
-        title='Community Timeline'
+        title={title}
         actions={[
           {
             icon: 'ellipsis',
@@ -51,6 +58,7 @@ class CommunityPage extends PureComponent {
           </Fragment>
         )}
       >
+        <PageTitle path={title} />
         <TimelineComposeBlock autoFocus={false} />
         <Divider />
         {children}

app/javascript/gabsocial/pages/error_page.js

@@ -3,6 +3,8 @@ export default class ErrorPage extends PureComponent {
 	render() {
 		const { children } = this.props;
 
+		// : todo :
+
 		return (
 			<div>
 				{children}

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>
 		)

app/javascript/gabsocial/pages/groups_page.js

@@ -1,53 +1,63 @@
 import { Fragment } from 'react'
 import { me } from '../initial_state'
+import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
+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 mapStateToProps = (state) => {
-  const account = state.getIn(['accounts', me])
+const messages = defineMessages({
+  groups: { id: 'groups', defaultMessage: 'Groups' },
+  featured: { id: 'featured', defaultMessage: 'Featured' },
+  new: { id: 'new', defaultMessage: 'New' },
+  myGroups: { id: 'my_groups', defaultMessage: 'My Groups' },
+  admin: { id: 'admin', defaultMessage: 'Admin' },
+})
 
-  return {
-    isPro: account.get('is_pro'),
-  }
-}
+const mapStateToProps = (state) => ({
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+})
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   onOpenGroupCreateModal() {
     dispatch(openModal('GROUP_CREATE'))
   },
 })
 
 export default
+@injectIntl
 @connect(mapStateToProps, mapDispatchToProps)
 class GroupsPage extends PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired,
     isPro: PropTypes.bool,
     onOpenGroupCreateModal: PropTypes.func.isRequired,
   }
 
-  componentDidMount() {
-    document.title = 'Groups - Gab'
-  }
-
   render() {
-    const { children, isPro, onOpenGroupCreateModal } = this.props
+    const {
+      intl,
+      children,
+      isPro,
+      onOpenGroupCreateModal,
+    } = this.props
 
     const actions = []
     const tabs = [
       {
-        title: 'Featured',
+        title: intl.formatMessage(messages.groups),
         to: '/groups',
       },
       {
-        title: 'New',
+        title: intl.formatMessage(messages.new),
         to: '/groups/new',
       },
       {
-        title: 'My Groups',
+        title: intl.formatMessage(messages.myGroups),
         to: '/groups/browse/member',
       },
     ]
@@ -59,14 +69,17 @@ class GroupsPage extends PureComponent {
       })
 
       tabs.push({
-        title: 'Admin',
+        title: intl.formatMessage(messages.admin),
         to: '/groups/browse/admin',
       })
     }
 
+    const title = intl.formatMessage(messages.groups)
+
     return (
       <DefaultLayout
-        title='Groups'
+        showBackBtn
+        title={title}
         actions={actions}
         layout={(
           <Fragment>
@@ -76,8 +89,8 @@ class GroupsPage extends PureComponent {
           </Fragment>
         )}
         tabs={tabs}
-        showBackBtn
       >
+        <PageTitle path={title} />
         { children }
       </DefaultLayout>
     )

app/javascript/gabsocial/pages/hashtag_page.js

@@ -1,15 +1,18 @@
 import { Fragment } from 'react'
 import { openModal } from '../actions/modal'
-import GroupSidebarPanel from '../components/panel/groups_panel'
+import { defineMessages, injectIntl } from 'react-intl'
+import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import ProgressPanel from '../components/panel/progress_panel'
-import UserPanel from '../components/panel/user_panel'
 import TrendsPanel from '../components/panel/trends_panel'
 import HashtagsPanel from '../components/panel/hashtags_panel'
 import DefaultLayout from '../layouts/default_layout'
-import TimelineComposeBlock from '../components/timeline_compose_block'
-import Divider from '../components/divider'
+
+const messages = defineMessages({
+  hashtag: { id: 'hashtag', defaultMessage: 'Hashtag' },
+  hashtagTimeline: { id: 'hashtag_timeline', defaultMessage: 'Hashtag timeline' },
+})
 
 const mapDispatchToProps = (dispatch) => ({
   onOpenHashtagPageSettingsModal(hashtag) {
@@ -20,23 +23,26 @@ const mapDispatchToProps = (dispatch) => ({
 })
 
 export default
+@injectIntl
 @connect(null, mapDispatchToProps)
 class HashtagPage extends PureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired,
     onOpenHashtagPageSettingsModal: PropTypes.func.isRequired,
   }
 
-  componentDidMount() {
-    document.title = '(1) Tag - Gab'
-  }
-
   render() {
-    const { children, onOpenHashtagPageSettingsModal } = this.props
+    const {
+      intl,
+      children,
+      onOpenHashtagPageSettingsModal,
+    } = this.props
 
     return (
       <DefaultLayout
-        title='Hashtag'
+        title={intl.formatMessage(messages.hashtagTimeline)}
         actions={[
           {
             icon: 'ellipsis',
@@ -49,11 +55,11 @@ class HashtagPage extends PureComponent {
             <TrendsPanel />
             <HashtagsPanel />
             <WhoToFollowPanel />
-            <GroupSidebarPanel />
             <LinkFooter />
           </Fragment>
         )}
       >
+        <PageTitle path={intl.formatMessage(messages.hashtag)} />
         {children}
       </DefaultLayout>
     )

app/javascript/gabsocial/pages/home_page.js

@@ -1,5 +1,6 @@
 import { Fragment } from 'react'
 import { openModal } from '../actions/modal'
+import PageTitle from '../features/ui/util/page_title'
 import GroupsPanel from '../components/panel/groups_panel'
 import ListsPanel from '../components/panel/lists_panel'
 import LinkFooter from '../components/link_footer'

app/javascript/gabsocial/pages/list_page.js

@@ -2,6 +2,7 @@ import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { openModal } from '../actions/modal'
+import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import DefaultLayout from '../layouts/default_layout'
 import ListDetailsPanel from '../components/panel/list_details_panel'

app/javascript/gabsocial/pages/lists_page.js

@@ -1,11 +1,12 @@
 import { Fragment } from 'react'
-import { openModal } from '../actions/modal';
+import { openModal } from '../actions/modal'
+import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   onOpenListCreateModal() {
     dispatch(openModal('LIST_CREATE'))
   },

app/javascript/gabsocial/pages/modal_page.js

@@ -1,4 +1,5 @@
 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 TrendsPanel from '../components/panel/trends_panel'

app/javascript/gabsocial/pages/notifications_page.js

@@ -1,6 +1,7 @@
 import { Fragment } from 'react'
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl'
 import { setFilter } from '../actions/notifications'
+import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import NotificationFilterPanel from '../components/panel/notification_filter_panel'
@@ -8,28 +9,29 @@ import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
 
 const messages = defineMessages({
+  notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
-  favorites: { id: 'notifications.filter.favorites', defaultMessage: 'Favorites' },
-  boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Reposts' },
-  polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
+  likes: { id: 'likes', defaultMessage: 'Likes' },
+  reposts: { id: 'reposts', defaultMessage: 'Reposts' },
+  polls: { id: 'polls', defaultMessage: 'Poll' },
   follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
-  filterAll: { id: 'notifications.filter.all', defaultMessage: 'All' },
-  filterMentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
-});
+  all: { id: 'notifications.filter.all', defaultMessage: 'All' },
+})
 
-const makeMapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   selectedFilter: state.getIn(['notifications', 'filter', 'active']),
-});
+  notificationCount: state.getIn(['notifications', 'unread']),
+})
 
 const mapDispatchToProps = (dispatch) => ({
-  selectFilter(value) {
+  setFilter(value) {
     dispatch(setFilter('active', value))
   },
-});
+})
 
 export default
 @injectIntl
-@connect(makeMapStateToProps, mapDispatchToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 class NotificationsPage extends PureComponent {
 
   static contextTypes = {
@@ -37,60 +39,60 @@ class NotificationsPage extends PureComponent {
   }
 
   static propTypes = {
-    selectFilter: PropTypes.func.isRequired,
+    setFilter: PropTypes.func.isRequired,
     selectedFilter: PropTypes.string.isRequired,
     intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    document.title = 'Notifications - Gab'
+    notificationCount: PropTypes.number.isRequired,
   }
 
   // : todo : on pop change filter active type
 
   onClick(notificationType) {
-    this.props.selectFilter(notificationType)
+    this.props.setFilter('active', notificationType)
     
     if (notificationType === 'all') {
       this.context.router.history.push('/notifications')
     } else {
-      this.context.router.history.push(`/notifications?only=${notificationType}`)
+      this.context.router.history.push(`/notifications?view=${notificationType}`)
     }
   }
 
   render() {
-    const { children, selectedFilter } = this.props
-
-    console.log("selectedFilter:", selectedFilter)
+    const {
+      intl,
+      children,
+      selectedFilter,
+      notificationCount
+    } = this.props
 
     const tabs = [
       {
-        title: 'All',
+        title: intl.formatMessage(messages.all),
         onClick: () => this.onClick('all'),
         active: selectedFilter === 'all',
       },
       {
-        title: 'Mentions',
+        title: intl.formatMessage(messages.mentions),
         onClick: () => this.onClick('mention'),
         active: selectedFilter === 'mention',
       },
       {
-        title: 'Likes',
+        title: intl.formatMessage(messages.likes),
         onClick: () => this.onClick('favourite'),
         active: selectedFilter === 'favourite',
       },
       {
-        title: 'Reposts',
+        title: intl.formatMessage(messages.reposts),
         onClick: () => this.onClick('reblog'),
         active: selectedFilter === 'reblog',
       },
       {
-        title: 'Polls',
+        title: intl.formatMessage(messages.polls),
         onClick: () => this.onClick('poll'),
         active: selectedFilter === 'poll',
       },
       {
-        title: 'Follows',
+        title: intl.formatMessage(messages.follows),
         onClick: () => this.onClick('follow'),
         active: selectedFilter === 'follow',
       },
@@ -98,7 +100,7 @@ class NotificationsPage extends PureComponent {
 
     return (
       <DefaultLayout
-        title='Notifications'
+        title={intl.formatMessage(messages.notifications)}
         layout={(
           <Fragment>
             <NotificationFilterPanel />
@@ -109,6 +111,10 @@ class NotificationsPage extends PureComponent {
         )}
         tabs={tabs}
       >
+        <PageTitle
+          badge={notificationCount}
+          path={intl.formatMessage(messages.notifications)}
+        />
         {children}
       </DefaultLayout>
     )

app/javascript/gabsocial/pages/profile_page.js

@@ -4,6 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { fetchAccountByUsername } from '../actions/accounts'
 import { makeGetAccount } from '../selectors'
 import { me } from '../initial_state'
+import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import ProfileStatsPanel from '../components/panel/profile_stats_panel'
 import ProfileInfoPanel from '../components/panel/profile_info_panel'
@@ -30,30 +31,26 @@ const mapStateToProps = (state, { params: { username } }) => {
   }
 }
 
+const mapDispatchToProps = (dispatch) => ({
+  onFetchAccountByUsername(username) {
+    dispatch(fetchAccountByUsername(username))
+  },
+})
+
 export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 class ProfilePage extends ImmutablePureComponent {
 
   static propTypes = {
     children: PropTypes.node,
     params: PropTypes.object.isRequired,
     account: ImmutablePropTypes.map,
-    dispatch: PropTypes.func.isRequired,
+    onFetchAccountByUsername: PropTypes.func.isRequired,
     unavailable: PropTypes.bool.isRequired,
   }
 
   componentDidMount() {
-    const { account, params: { username } } = this.props
-    if (!!account) {
-      document.title = `${account.get('display_name')} (@${username}) - Gab`
-    } else {
-      document.title = `@${username} - Gab`
-    }
-  }
-
-  componentWillMount() {
-    const { dispatch, params: { username } } = this.props
-    dispatch(fetchAccountByUsername(username))
+    this.props.onFetchAccountByUsername(this.props.params.username)
   }
 
   render() {
@@ -61,8 +58,13 @@ class ProfilePage extends ImmutablePureComponent {
       account,
       children,
       unavailable,
+      params: { username },
     } = this.props
 
+    console.log("acount:", account)
+
+    const title = !!account ? account.get('display_name') : username
+
     return (
       <ProfileLayout
         account={account}
@@ -75,6 +77,7 @@ class ProfilePage extends ImmutablePureComponent {
           </Fragment>
         )}
       >
+        <PageTitle path={title} />
         {
           !account && <ColumnIndicator type='loading' />
         }