From 2f68a90effcfbd653296f59482238ee7ec37f9b4 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Wed, 18 Oct 2017 15:23:46 +0200
Subject: [PATCH 1/3] adds page titles [fixes SCI-1703]

---
 .../src/scenes/SettingsPage/index.jsx         |   5 +-
 .../SettingsPage/scenes/preferences/index.jsx |  83 +++++----
 .../SettingsPage/scenes/profile/index.jsx     |  22 ++-
 .../scenes/SettingsPage/scenes/team/index.jsx | 163 +++++++++---------
 .../SettingsPage/scenes/teams/index.jsx       |  26 +--
 .../SettingsPage/scenes/teams/new/index.jsx   |  83 ++++-----
 package.json                                  |   1 +
 yarn.lock                                     |  24 ++-
 8 files changed, 222 insertions(+), 185 deletions(-)

diff --git a/app/javascript/src/scenes/SettingsPage/index.jsx b/app/javascript/src/scenes/SettingsPage/index.jsx
index fb0c4f5d4..6ccfd3d26 100644
--- a/app/javascript/src/scenes/SettingsPage/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/index.jsx
@@ -3,6 +3,7 @@ import { Route, Switch, Redirect } from "react-router-dom";
 import { LinkContainer } from "react-router-bootstrap";
 import { Nav, NavItem } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
+import DocumentTitle from "react-document-title";
 
 import {
   ROOT_PATH,
@@ -39,7 +40,7 @@ export default class SettingsPage extends Component {
 
   render() {
     return (
-      <div>
+      <DocumentTitle title="SciNote">
         <div className="container">
           <Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}>
             <LinkContainer
@@ -85,7 +86,7 @@ export default class SettingsPage extends Component {
             <Route component={NotFound} />
           </Switch>
         </div>
-      </div>
+      </DocumentTitle>
     );
   }
 }
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
index 6681fe915..88fd5bd91 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { FormattedMessage } from "react-intl";
+import DocumentTitle from "react-document-title";
 
 import { getUserPreferencesInfo } from "../../../../services/api/users_api";
 import SettingsAccountWrapper from "../../components/SettingsAccountWrapper";
@@ -45,48 +46,46 @@ class SettingsPreferences extends Component {
 
   render() {
     return (
-      <SettingsAccountWrapper>
-        <div className="col-xs-12 col-sm-9">
-          <InputTimezone
-            value={this.state.timeZone}
-            loadPreferences={this.getPreferencesInfo}
-          />
-          <h3>
-            <FormattedMessage id="settings_page.notifications" />
-          </h3>
-          <NotificationsGroup
-            type={ASSIGNMENT_NOTIFICATION}
-            title="settings_page.assignement"
-            subtitle="settings_page.assignement_msg"
-            iconClasses="fa fa-newspaper-o"
-            inAppNotification={this.state.assignments_notification}
-            emailNotification={
-              this.state.assignments_email_notification
-            }
-            iconBackground={MAIN_COLOR_BLUE}
-            reloadInfo={this.getPreferencesInfo}
-          />
-          <NotificationsGroup
-            type={RECENT_NOTIFICATION}
-            title="settings_page.recent_changes"
-            subtitle="settings_page.recent_changes_msg"
-            inAppNotification={this.state.recent_notification}
-            emailNotification={this.state.recent_email_notification}
-            reloadInfo={this.getPreferencesInfo}
-          />
-          <NotificationsGroup
-            type={SYSTEM_NOTIFICATION}
-            title="settings_page.system_message"
-            subtitle="settings_page.system_message_msg"
-            emailNotification={
-              this.state.system_message_email_notification
-            }
-            iconClasses="glyphicon glyphicon-tower"
-            iconBackground={ICON_GREEN_COLOR}
-            reloadInfo={this.getPreferencesInfo}
-          />
-        </div>
-      </SettingsAccountWrapper>
+      <DocumentTitle title="SciNote | Preferences">
+        <SettingsAccountWrapper>
+          <div className="col-xs-12 col-sm-9">
+            <InputTimezone
+              value={this.state.timeZone}
+              loadPreferences={this.getPreferencesInfo}
+            />
+            <h3>
+              <FormattedMessage id="settings_page.notifications" />
+            </h3>
+            <NotificationsGroup
+              type={ASSIGNMENT_NOTIFICATION}
+              title="settings_page.assignement"
+              subtitle="settings_page.assignement_msg"
+              iconClasses="fa fa-newspaper-o"
+              inAppNotification={this.state.assignments_notification}
+              emailNotification={this.state.assignments_email_notification}
+              iconBackground={MAIN_COLOR_BLUE}
+              reloadInfo={this.getPreferencesInfo}
+            />
+            <NotificationsGroup
+              type={RECENT_NOTIFICATION}
+              title="settings_page.recent_changes"
+              subtitle="settings_page.recent_changes_msg"
+              inAppNotification={this.state.recent_notification}
+              emailNotification={this.state.recent_email_notification}
+              reloadInfo={this.getPreferencesInfo}
+            />
+            <NotificationsGroup
+              type={SYSTEM_NOTIFICATION}
+              title="settings_page.system_message"
+              subtitle="settings_page.system_message_msg"
+              emailNotification={this.state.system_message_email_notification}
+              iconClasses="glyphicon glyphicon-tower"
+              iconBackground={ICON_GREEN_COLOR}
+              reloadInfo={this.getPreferencesInfo}
+            />
+          </div>
+        </SettingsAccountWrapper>
+      </DocumentTitle>
     );
   }
 }
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
index 3044bb49c..6dfa3c919 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
@@ -1,16 +1,20 @@
 import React from "react";
+import DocumentTitle from "react-document-title";
 import SettingsAccountWrapper from "../../components/SettingsAccountWrapper";
 import MyProfile from "./components/MyProfile";
 import MyStatistics from "./components/MyStatistics";
 
-const SettingsProfile = () =>
-  <SettingsAccountWrapper>
-    <div className="col-xs-12 col-sm-4">
-      <MyProfile />
-    </div>
-    <div className="col-xs-12 col-sm-5">
-      <MyStatistics />
-    </div>
-  </SettingsAccountWrapper>;
+const SettingsProfile = () => (
+  <DocumentTitle title="SciNote | Profile">
+    <SettingsAccountWrapper>
+      <div className="col-xs-12 col-sm-4">
+        <MyProfile />
+      </div>
+      <div className="col-xs-12 col-sm-5">
+        <MyStatistics />
+      </div>
+    </SettingsAccountWrapper>
+  </DocumentTitle>
+);
 
 export default SettingsProfile;
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx
index ce42e5bb4..b53a4bfa8 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import ReactRouterPropTypes from "react-router-prop-types";
 import styled from "styled-components";
+import DocumentTitle from "react-document-title";
 import { Breadcrumb, Row, Col, Glyphicon, Well } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
 import { FormattedHTMLMessage, FormattedMessage } from "react-intl";
@@ -21,7 +22,7 @@ export type TeamMemeber = {
   team_user_id: number,
   teamName: string,
   team_id: number
-}
+};
 
 const Wrapper = styled.div`
   background: white;
@@ -153,86 +154,88 @@ class SettingsTeam extends Component {
 
   render() {
     return (
-      <Wrapper>
-        <Breadcrumb>
-          <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
-            <Breadcrumb.Item>
-              <FormattedMessage id="settings_page.all_teams" />
+      <DocumentTitle title={`SciNote | Team | ${this.state.team.name}`}>
+        <Wrapper>
+          <Breadcrumb>
+            <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
+              <Breadcrumb.Item>
+                <FormattedMessage id="settings_page.all_teams" />
+              </Breadcrumb.Item>
+            </LinkContainer>
+            <Breadcrumb.Item active={true}>
+              {this.state.team.name}
             </Breadcrumb.Item>
-          </LinkContainer>
-          <Breadcrumb.Item active={true}>
-            {this.state.team.name}
-          </Breadcrumb.Item>
-        </Breadcrumb>
-        <TabTitle>
-          <StyledH3 onClick={this.showNameModal}>
-            {this.state.team.name}
-          </StyledH3>
-        </TabTitle>
-        <Row>
-          <Col xs={6} sm={3}>
-            <BadgeWrapper>
-              <Glyphicon glyph="calendar" />
-            </BadgeWrapper>
-            <StyledWell>
-              <FormattedHTMLMessage
-                id="settings_page.single_team.created_on"
-                values={{
-                  created_at: moment(this.state.team.created_at).format(
-                    "DD.MM.YYYY"
-                  )
-                }}
-              />
-            </StyledWell>
-          </Col>
-          <Col xs={10} sm={5}>
-            <BadgeWrapper>
-              <Glyphicon glyph="user" />
-            </BadgeWrapper>
-            <StyledWell>
-              <FormattedHTMLMessage
-                id="settings_page.single_team.created_by"
-                values={{ created_by: this.state.team.created_by }}
-              />
-            </StyledWell>
-          </Col>
-          <Col xs={8} sm={4}>
-            <BadgeWrapper>
-              <Glyphicon glyph="hdd" />
-            </BadgeWrapper>
-            <StyledWell>
-              <FormattedHTMLMessage
-                id="settings_page.single_team.space_usage"
-                values={{
-                  space_usage: formatBytes(this.state.team.space_taken)
-                }}
-              />
-            </StyledWell>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12} onClick={this.showDescriptionModal}>
-            <BadgeWrapper>
-              <Glyphicon glyph="info-sign" />
-            </BadgeWrapper>
-            <StyledDescriptionWell>
-              <span>{this.renderDescription()}</span>
-            </StyledDescriptionWell>
-          </Col>
-        </Row>
-        <TeamsMembers
-          members={this.state.users}
-          updateUsersCallback={this.updateUsersCallback}
-          team={this.state.team}
-        />
-        <UpdateTeamDescriptionModal
-          showModal={this.state.showDescriptionModal}
-          hideModal={this.hideDescriptionModalCallback}
-          team={this.state.team}
-          updateTeamCallback={this.updateTeamCallback}
-        />
-        {this.renderEditNameModel()}
-      </Wrapper>
+          </Breadcrumb>
+          <TabTitle>
+            <StyledH3 onClick={this.showNameModal}>
+              {this.state.team.name}
+            </StyledH3>
+          </TabTitle>
+          <Row>
+            <Col xs={6} sm={3}>
+              <BadgeWrapper>
+                <Glyphicon glyph="calendar" />
+              </BadgeWrapper>
+              <StyledWell>
+                <FormattedHTMLMessage
+                  id="settings_page.single_team.created_on"
+                  values={{
+                    created_at: moment(this.state.team.created_at).format(
+                      "DD.MM.YYYY"
+                    )
+                  }}
+                />
+              </StyledWell>
+            </Col>
+            <Col xs={10} sm={5}>
+              <BadgeWrapper>
+                <Glyphicon glyph="user" />
+              </BadgeWrapper>
+              <StyledWell>
+                <FormattedHTMLMessage
+                  id="settings_page.single_team.created_by"
+                  values={{ created_by: this.state.team.created_by }}
+                />
+              </StyledWell>
+            </Col>
+            <Col xs={8} sm={4}>
+              <BadgeWrapper>
+                <Glyphicon glyph="hdd" />
+              </BadgeWrapper>
+              <StyledWell>
+                <FormattedHTMLMessage
+                  id="settings_page.single_team.space_usage"
+                  values={{
+                    space_usage: formatBytes(this.state.team.space_taken)
+                  }}
+                />
+              </StyledWell>
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={12} onClick={this.showDescriptionModal}>
+              <BadgeWrapper>
+                <Glyphicon glyph="info-sign" />
+              </BadgeWrapper>
+              <StyledDescriptionWell>
+                <span>{this.renderDescription()}</span>
+              </StyledDescriptionWell>
+            </Col>
+          </Row>
+          <TeamsMembers
+            members={this.state.users}
+            updateUsersCallback={this.updateUsersCallback}
+            team={this.state.team}
+          />
+          <UpdateTeamDescriptionModal
+            showModal={this.state.showDescriptionModal}
+            hideModal={this.hideDescriptionModalCallback}
+            team={this.state.team}
+            updateTeamCallback={this.updateTeamCallback}
+          />
+          {this.renderEditNameModel()}
+        </Wrapper>
+      </DocumentTitle>
     );
   }
 }
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx
index 32db0418c..43a21d4c1 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes, { number, string, bool } from "prop-types";
+import DocumentTitle from "react-document-title";
 import styled from "styled-components";
 import { Breadcrumb } from "react-bootstrap";
 import { connect } from "react-redux";
@@ -19,16 +20,19 @@ const Wrapper = styled.div`
   padding: 16px 15px 50px 15px;
 `;
 
-const SettingsTeams = ({ teams }) =>
-  <Wrapper>
-    <Breadcrumb>
-      <Breadcrumb.Item active>
-        <FormattedMessage id="settings_page.all_teams" />
-      </Breadcrumb.Item>
-    </Breadcrumb>
-    <TeamsPageDetails teams={teams} />
-    <TeamsDataTable teams={teams} />
-  </Wrapper>;
+const SettingsTeams = ({ teams }) => (
+  <DocumentTitle title="SciNote | Teams">
+    <Wrapper>
+      <Breadcrumb>
+        <Breadcrumb.Item active>
+          <FormattedMessage id="settings_page.all_teams" />
+        </Breadcrumb.Item>
+      </Breadcrumb>
+      <TeamsPageDetails teams={teams} />
+      <TeamsDataTable teams={teams} />
+    </Wrapper>
+  </DocumentTitle>
+);
 
 SettingsTeams.propTypes = {
   teams: PropTypes.arrayOf(
@@ -44,7 +48,7 @@ SettingsTeams.propTypes = {
 };
 
 SettingsTeams.defaultProps = {
-  teams: [{id: 0, name: "", current_team: "", role: "", members: 0}]
+  teams: [{ id: 0, name: "", current_team: "", role: "", members: 0 }]
 };
 
 const mapStateToProps = ({ all_teams }) => ({
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
index 6848758a9..b2f3b56d7 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
@@ -12,6 +12,7 @@ import {
 import { Redirect } from "react-router";
 import { LinkContainer } from "react-router-bootstrap";
 import { FormattedMessage } from "react-intl";
+import DocumentTitle from "react-document-title";
 import update from "immutability-helper";
 import styled from "styled-components";
 import _ from "lodash";
@@ -225,48 +226,50 @@ class SettingsNewTeam extends Component {
       !_.isEmpty(this.state.formErrors.description);
 
     return (
-      <Wrapper>
-        <Breadcrumb>
-          <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
-            <Breadcrumb.Item>
-              <FormattedMessage id="settings_page.all_teams" />
-            </Breadcrumb.Item>
-          </LinkContainer>
-          <Breadcrumb.Item active={true}>
-            <FormattedMessage id="settings_page.new_team.title" />
-          </Breadcrumb.Item>
-        </Breadcrumb>
-
-        <form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
-          <MyFormGroupDiv>
-            {this.renderTeamNameFormGroup()}
-            <small>
-              <FormattedMessage id="settings_page.new_team.name_sublabel" />
-            </small>
-          </MyFormGroupDiv>
-
-          <MyFormGroupDiv>
-            {this.renderTeamDescriptionFormGroup()}
-            <small>
-              <FormattedMessage id="settings_page.new_team.description_sublabel" />
-            </small>
-          </MyFormGroupDiv>
-          <ButtonToolbar>
-            <Button
-              type="submit"
-              className="btn-primary"
-              disabled={btnDisabled}
-            >
-              <FormattedMessage id="settings_page.new_team.create" />
-            </Button>
+      <DocumentTitle title="SciNote | Team | New">
+        <Wrapper>
+          <Breadcrumb>
             <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
-              <Button>
-                <FormattedMessage id="general.cancel" />
-              </Button>
+              <Breadcrumb.Item>
+                <FormattedMessage id="settings_page.all_teams" />
+              </Breadcrumb.Item>
             </LinkContainer>
-          </ButtonToolbar>
-        </form>
-      </Wrapper>
+            <Breadcrumb.Item active={true}>
+              <FormattedMessage id="settings_page.new_team.title" />
+            </Breadcrumb.Item>
+          </Breadcrumb>
+
+          <form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
+            <MyFormGroupDiv>
+              {this.renderTeamNameFormGroup()}
+              <small>
+                <FormattedMessage id="settings_page.new_team.name_sublabel" />
+              </small>
+            </MyFormGroupDiv>
+
+            <MyFormGroupDiv>
+              {this.renderTeamDescriptionFormGroup()}
+              <small>
+                <FormattedMessage id="settings_page.new_team.description_sublabel" />
+              </small>
+            </MyFormGroupDiv>
+            <ButtonToolbar>
+              <Button
+                type="submit"
+                className="btn-primary"
+                disabled={btnDisabled}
+              >
+                <FormattedMessage id="settings_page.new_team.create" />
+              </Button>
+              <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
+                <Button>
+                  <FormattedMessage id="general.cancel" />
+                </Button>
+              </LinkContainer>
+            </ButtonToolbar>
+          </form>
+        </Wrapper>
+      </DocumentTitle>
     );
   }
 }
diff --git a/package.json b/package.json
index 75a074613..99ab47e5b 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "react-bootstrap-table": "^4.0.0",
     "react-bootstrap-timezone-picker": "^1.0.11",
     "react-data-grid": "^2.0.2",
+    "react-document-title": "^2.0.3",
     "react-dom": "15.6.1",
     "react-intl": "^2.3.0",
     "react-intl-redux": "^0.6.0",
diff --git a/yarn.lock b/yarn.lock
index 3a3030b74..036393ff1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2289,6 +2289,10 @@ exenv@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
 
+exenv@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -4864,7 +4868,7 @@ prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.5.6:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -5018,6 +5022,13 @@ react-data-grid@^2.0.2:
   version "2.0.60"
   resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-2.0.60.tgz#4a1549d4dad032677439f25dbcf1036ab966032f"
 
+react-document-title@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-document-title/-/react-document-title-2.0.3.tgz#bbf922a0d71412fc948245e4283b2412df70f2b9"
+  dependencies:
+    prop-types "^15.5.6"
+    react-side-effect "^1.0.2"
+
 react-dom-factories@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.1.tgz#c50692ac5ff1adb39d86dfe6dbe3485dacf58455"
@@ -5130,6 +5141,13 @@ react-s-alert@^1.3.0:
   dependencies:
     babel-runtime "^6.23.0"
 
+react-side-effect@^1.0.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.3.tgz#512c25abe0dec172834c4001ec5c51e04d41bc5c"
+  dependencies:
+    exenv "^1.2.1"
+    shallowequal "^1.0.1"
+
 react-tagsinput@^3.17.0:
   version "3.18.0"
   resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.18.0.tgz#40e036fc0f4c3d6b4689858189ab02926717a818"
@@ -5607,6 +5625,10 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shallowequal@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"

From fb0ba702e1c18cc913c1c2053a9a636b44fad289 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Thu, 19 Oct 2017 12:37:17 +0200
Subject: [PATCH 2/3] add HOC for page title

---
 .../src/components/PageTitle/index.jsx        | 27 +++++++++++++++++++
 app/javascript/src/config/locales/messages.js |  6 +++++
 .../src/scenes/SettingsPage/index.jsx         |  6 ++---
 .../SettingsPage/scenes/preferences/index.jsx |  6 ++---
 .../SettingsPage/scenes/profile/index.jsx     |  6 +++--
 5 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/src/components/PageTitle/index.jsx

diff --git a/app/javascript/src/components/PageTitle/index.jsx b/app/javascript/src/components/PageTitle/index.jsx
new file mode 100644
index 000000000..3943a863b
--- /dev/null
+++ b/app/javascript/src/components/PageTitle/index.jsx
@@ -0,0 +1,27 @@
+// @flow
+import React from "react";
+import type { Node } from "react";
+import type { MessageDescriptor } from "flow-typed";
+import DocumentTitle from "react-document-title";
+import { formatMessage, defineMessages, injectIntl } from "react-intl";
+
+type Props = {
+  intl: any,
+  localeID: string,
+  values?: any,
+  children: Node
+};
+
+const PageTitle = (props: Props): Node => {
+  const message = defineMessages({
+    placeholder: { id: props.localeID, values: props.values }
+  });
+  const title = props.intl.formatMessage(message.placeholder);
+  return <DocumentTitle title={title}>{props.children}</DocumentTitle>;
+};
+
+PageTitle.defaultProps = {
+  values: null
+};
+
+export default injectIntl(PageTitle);
diff --git a/app/javascript/src/config/locales/messages.js b/app/javascript/src/config/locales/messages.js
index 26328ca30..4d3a4ec81 100644
--- a/app/javascript/src/config/locales/messages.js
+++ b/app/javascript/src/config/locales/messages.js
@@ -8,6 +8,12 @@ export default {
       loading: "Loading ...",
       upload: "Upload"
     },
+    page_title: {
+      root: "SciNote",
+      settings_preference: "SciNote | Settings | Preferences",
+      settings_profile: "SciNote | Settings | Profile",
+      team_page: "SciNote | Settings | Teams | {name}"
+    },
     error_messages: {
       text_too_short: "is too short (minimum is {min_length} characters)",
       text_too_long: "is too long (maximum is {max_length} characters)",
diff --git a/app/javascript/src/scenes/SettingsPage/index.jsx b/app/javascript/src/scenes/SettingsPage/index.jsx
index 6ccfd3d26..cace85262 100644
--- a/app/javascript/src/scenes/SettingsPage/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/index.jsx
@@ -3,7 +3,6 @@ import { Route, Switch, Redirect } from "react-router-dom";
 import { LinkContainer } from "react-router-bootstrap";
 import { Nav, NavItem } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import DocumentTitle from "react-document-title";
 
 import {
   ROOT_PATH,
@@ -16,6 +15,7 @@ import {
 
 import { SETTINGS_PATH, SETTINGS_TEAMS } from "../../config/api_endpoints";
 
+import PageTitle from "../../components/PageTitle";
 import NotFound from "../../components/404/NotFound";
 import SettingsProfile from "./scenes/profile";
 import SettingsPreferences from "./scenes/preferences";
@@ -40,7 +40,7 @@ export default class SettingsPage extends Component {
 
   render() {
     return (
-      <DocumentTitle title="SciNote">
+      <PageTitle localeID="page_title.root">
         <div className="container">
           <Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}>
             <LinkContainer
@@ -86,7 +86,7 @@ export default class SettingsPage extends Component {
             <Route component={NotFound} />
           </Switch>
         </div>
-      </DocumentTitle>
+      </PageTitle>
     );
   }
 }
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
index 88fd5bd91..26c9fe45f 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import { FormattedMessage } from "react-intl";
-import DocumentTitle from "react-document-title";
 
 import { getUserPreferencesInfo } from "../../../../services/api/users_api";
+import PageTitle from "../../../../components/PageTitle";
 import SettingsAccountWrapper from "../../components/SettingsAccountWrapper";
 import InputTimezone from "./components/InputTimezone";
 import NotificationsGroup from "./components/NotificationsGroup";
@@ -46,7 +46,7 @@ class SettingsPreferences extends Component {
 
   render() {
     return (
-      <DocumentTitle title="SciNote | Preferences">
+      <PageTitle localeID="page_title.settings_preference">
         <SettingsAccountWrapper>
           <div className="col-xs-12 col-sm-9">
             <InputTimezone
@@ -85,7 +85,7 @@ class SettingsPreferences extends Component {
             />
           </div>
         </SettingsAccountWrapper>
-      </DocumentTitle>
+      </PageTitle>
     );
   }
 }
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
index 6dfa3c919..b5cede703 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
@@ -1,11 +1,13 @@
 import React from "react";
 import DocumentTitle from "react-document-title";
+
+import PageTitle from "../../../../components/PageTitle";
 import SettingsAccountWrapper from "../../components/SettingsAccountWrapper";
 import MyProfile from "./components/MyProfile";
 import MyStatistics from "./components/MyStatistics";
 
 const SettingsProfile = () => (
-  <DocumentTitle title="SciNote | Profile">
+  <PageTitle localeID="page_title.settings_profile">
     <SettingsAccountWrapper>
       <div className="col-xs-12 col-sm-4">
         <MyProfile />
@@ -14,7 +16,7 @@ const SettingsProfile = () => (
         <MyStatistics />
       </div>
     </SettingsAccountWrapper>
-  </DocumentTitle>
+  </PageTitle>
 );
 
 export default SettingsProfile;

From 5e5d7ea2ddedd3b7a9665b8a6b4b46e0a7239a6e Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Thu, 19 Oct 2017 12:50:33 +0200
Subject: [PATCH 3/3] fix page title locales

---
 app/javascript/src/components/PageTitle/index.jsx        | 6 +++---
 app/javascript/src/config/locales/messages.js            | 8 +++++---
 .../src/scenes/SettingsPage/scenes/preferences/index.jsx | 2 +-
 .../src/scenes/SettingsPage/scenes/profile/index.jsx     | 2 +-
 .../src/scenes/SettingsPage/scenes/team/index.jsx        | 9 ++++++---
 .../src/scenes/SettingsPage/scenes/teams/index.jsx       | 6 +++---
 .../src/scenes/SettingsPage/scenes/teams/new/index.jsx   | 6 +++---
 7 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/javascript/src/components/PageTitle/index.jsx b/app/javascript/src/components/PageTitle/index.jsx
index 3943a863b..5700ef88a 100644
--- a/app/javascript/src/components/PageTitle/index.jsx
+++ b/app/javascript/src/components/PageTitle/index.jsx
@@ -14,14 +14,14 @@ type Props = {
 
 const PageTitle = (props: Props): Node => {
   const message = defineMessages({
-    placeholder: { id: props.localeID, values: props.values }
+    placeholder: { id: props.localeID }
   });
-  const title = props.intl.formatMessage(message.placeholder);
+  const title = props.intl.formatMessage(message.placeholder, props.values);
   return <DocumentTitle title={title}>{props.children}</DocumentTitle>;
 };
 
 PageTitle.defaultProps = {
-  values: null
+  values: {}
 };
 
 export default injectIntl(PageTitle);
diff --git a/app/javascript/src/config/locales/messages.js b/app/javascript/src/config/locales/messages.js
index 4d3a4ec81..d3ff9b457 100644
--- a/app/javascript/src/config/locales/messages.js
+++ b/app/javascript/src/config/locales/messages.js
@@ -10,9 +10,11 @@ export default {
     },
     page_title: {
       root: "SciNote",
-      settings_preference: "SciNote | Settings | Preferences",
-      settings_profile: "SciNote | Settings | Profile",
-      team_page: "SciNote | Settings | Teams | {name}"
+      settings_preference_page: "SciNote | Settings | Preferences",
+      settings_profile_page: "SciNote | Settings | Profile",
+      team_page: "SciNote | Settings | Teams | {name}",
+      all_teams_page: "SciNote | Settings | Teams",
+      new_team_page: "SciNote | Settings | Teams | New"
     },
     error_messages: {
       text_too_short: "is too short (minimum is {min_length} characters)",
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
index 26c9fe45f..29a887f78 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
@@ -46,7 +46,7 @@ class SettingsPreferences extends Component {
 
   render() {
     return (
-      <PageTitle localeID="page_title.settings_preference">
+      <PageTitle localeID="page_title.settings_preference_page">
         <SettingsAccountWrapper>
           <div className="col-xs-12 col-sm-9">
             <InputTimezone
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
index b5cede703..65a45f48e 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/profile/index.jsx
@@ -7,7 +7,7 @@ import MyProfile from "./components/MyProfile";
 import MyStatistics from "./components/MyStatistics";
 
 const SettingsProfile = () => (
-  <PageTitle localeID="page_title.settings_profile">
+  <PageTitle localeID="page_title.settings_profile_page">
     <SettingsAccountWrapper>
       <div className="col-xs-12 col-sm-4">
         <MyProfile />
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx
index b53a4bfa8..70539ae87 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/index.jsx
@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import ReactRouterPropTypes from "react-router-prop-types";
 import styled from "styled-components";
-import DocumentTitle from "react-document-title";
 import { Breadcrumb, Row, Col, Glyphicon, Well } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
 import { FormattedHTMLMessage, FormattedMessage } from "react-intl";
@@ -13,6 +12,7 @@ import { SETTINGS_TEAMS_ROUTE } from "../../../../config/routes";
 import { TEAM_DETAILS_PATH } from "../../../../config/api_endpoints";
 import { BORDER_LIGHT_COLOR } from "../../../../config/constants/colors";
 
+import PageTitle from "../../../../components/PageTitle";
 import TeamsMembers from "./components/TeamsMembers";
 import UpdateTeamDescriptionModal from "./components/UpdateTeamDescriptionModal";
 import UpdateTeamNameModal from "./components/UpdateTeamNameModal";
@@ -154,7 +154,10 @@ class SettingsTeam extends Component {
 
   render() {
     return (
-      <DocumentTitle title={`SciNote | Team | ${this.state.team.name}`}>
+      <PageTitle
+        localeID="page_title.team_page"
+        values={{ name: this.state.team.name }}
+      >
         <Wrapper>
           <Breadcrumb>
             <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
@@ -235,7 +238,7 @@ class SettingsTeam extends Component {
           />
           {this.renderEditNameModel()}
         </Wrapper>
-      </DocumentTitle>
+      </PageTitle>
     );
   }
 }
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx
index 43a21d4c1..09560f1cf 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/index.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes, { number, string, bool } from "prop-types";
-import DocumentTitle from "react-document-title";
 import styled from "styled-components";
 import { Breadcrumb } from "react-bootstrap";
 import { connect } from "react-redux";
@@ -8,6 +7,7 @@ import { FormattedMessage } from "react-intl";
 
 import { BORDER_LIGHT_COLOR } from "../../../../config/constants/colors";
 
+import PageTitle from "../../../../components/PageTitle";
 import TeamsPageDetails from "./components/TeamsPageDetails";
 import TeamsDataTable from "./components/TeamsDataTable";
 
@@ -21,7 +21,7 @@ const Wrapper = styled.div`
 `;
 
 const SettingsTeams = ({ teams }) => (
-  <DocumentTitle title="SciNote | Teams">
+  <PageTitle localeID="page_title.all_teams_page">
     <Wrapper>
       <Breadcrumb>
         <Breadcrumb.Item active>
@@ -31,7 +31,7 @@ const SettingsTeams = ({ teams }) => (
       <TeamsPageDetails teams={teams} />
       <TeamsDataTable teams={teams} />
     </Wrapper>
-  </DocumentTitle>
+  </PageTitle>
 );
 
 SettingsTeams.propTypes = {
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
index b2f3b56d7..6c144e81d 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
@@ -12,7 +12,6 @@ import {
 import { Redirect } from "react-router";
 import { LinkContainer } from "react-router-bootstrap";
 import { FormattedMessage } from "react-intl";
-import DocumentTitle from "react-document-title";
 import update from "immutability-helper";
 import styled from "styled-components";
 import _ from "lodash";
@@ -31,6 +30,7 @@ import { getTeamsList } from "../../../../../components/actions/TeamsActions";
 
 import { BORDER_LIGHT_COLOR } from "../../../../../config/constants/colors";
 
+import PageTitle from "../../../../../components/PageTitle";
 import NameFormControl from "./components/NameFormControl";
 
 const Wrapper = styled.div`
@@ -226,7 +226,7 @@ class SettingsNewTeam extends Component {
       !_.isEmpty(this.state.formErrors.description);
 
     return (
-      <DocumentTitle title="SciNote | Team | New">
+      <PageTitle localeID="page_title.new_team_page">
         <Wrapper>
           <Breadcrumb>
             <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
@@ -269,7 +269,7 @@ class SettingsNewTeam extends Component {
             </ButtonToolbar>
           </form>
         </Wrapper>
-      </DocumentTitle>
+      </PageTitle>
     );
   }
 }