From 61560b87f722b2fc4576b83101c6b2e31cf11363 Mon Sep 17 00:00:00 2001
From: "Mr.tang" <1074461480@qq.com>
Date: Sat, 24 Feb 2018 00:31:41 +0800
Subject: [PATCH] Fixes #554 (#559)

* update title

* update titles

* delete unnecessary line
---
 client/modules/IDE/components/About.jsx           |  4 ++++
 client/modules/IDE/components/AssetList.jsx       | 15 +++++++++++++++
 client/modules/IDE/components/Feedback.jsx        |  5 ++++-
 .../IDE/components/KeyboardShortcutModal.jsx      |  1 -
 client/modules/IDE/components/Preferences.jsx     |  4 ++++
 client/modules/IDE/components/SketchList.jsx      | 11 +++++++++++
 client/modules/IDE/pages/IDEView.jsx              |  2 +-
 client/modules/User/pages/AccountView.jsx         |  4 ++++
 .../modules/User/pages/EmailVerificationView.jsx  |  4 ++++
 client/modules/User/pages/LoginView.jsx           |  4 ++++
 client/modules/User/pages/NewPasswordView.jsx     |  4 ++++
 client/modules/User/pages/ResetPasswordView.jsx   |  4 ++++
 client/modules/User/pages/SignupView.jsx          |  4 ++++
 13 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index 13eb343b..281e0d99 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
+import { Helmet } from 'react-helmet';
 
 const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
 const playUrl = require('../../../images/play.svg');
@@ -8,6 +9,9 @@ const asteriskUrl = require('../../../images/p5-asterisk.svg');
 function About(props) {
   return (
     <div className="about__content">
+      <Helmet>
+        <title>p5.js Web Editor | About</title>
+      </Helmet>
       <div className="about__content-column">
         <InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
         {/* Video button to hello p5 video page */}
diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
index 57452d49..0584ae02 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -3,6 +3,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';
+import { Helmet } from 'react-helmet';
+
 import prettyBytes from 'pretty-bytes';
 
 import * as AssetActions from '../actions/assets';
@@ -14,9 +16,19 @@ class AssetList extends React.Component {
     this.props.getAssets(this.props.username);
   }
 
+  getAssetsTitle() {
+    if (this.props.username === this.props.user.username) {
+      return 'p5.js Web Editor | My assets';
+    }
+    return `p5.js Web Editor | ${this.props.username}'s assets`;
+  }
+
   render() {
     return (
       <div className="asset-table-container">
+        <Helmet>
+          <title>{this.getAssetsTitle()}</title>
+        </Helmet>
         {this.props.assets.length === 0 &&
           <p className="asset-table__empty">No uploaded assets.</p>
         }
@@ -47,6 +59,9 @@ class AssetList extends React.Component {
 }
 
 AssetList.propTypes = {
+  user: PropTypes.shape({
+    username: PropTypes.string
+  }).isRequired,
   username: PropTypes.string.isRequired,
   assets: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
diff --git a/client/modules/IDE/components/Feedback.jsx b/client/modules/IDE/components/Feedback.jsx
index a2c6d06b..a88fbe38 100644
--- a/client/modules/IDE/components/Feedback.jsx
+++ b/client/modules/IDE/components/Feedback.jsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
-
+import { Helmet } from 'react-helmet';
 import githubLogoUrl from '../../../images/github.svg';
 
 function Feedback(props) {
   return (
     <div className="feedback__content">
+      <Helmet>
+        <title>p5.js Web Editor | Feedback</title>
+      </Helmet>
       <div className="feedback__content-pane">
         <h2 className="feedback__content-pane-header">
           Via Github Issues
diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx
index 8b542efc..74d91692 100644
--- a/client/modules/IDE/components/KeyboardShortcutModal.jsx
+++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import {
   metaKeyName,
 } from '../../../utils/metaKey';
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 08f9f529..b179ffa8 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
+import { Helmet } from 'react-helmet';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 // import { bindActionCreators } from 'redux';
 // import { connect } from 'react-redux';
@@ -51,6 +52,9 @@ class Preferences extends React.Component {
 
     return (
       <section className="preferences" tabIndex="0" title="preference-menu">
+        <Helmet>
+          <title>p5.js Web Editor | Preferences</title>
+        </Helmet>
         <Tabs>
           <TabList>
             <div className="preference__subheadings">
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 8dce130d..26bbfa32 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import moment from 'moment';
 import { Link, browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
+import { Helmet } from 'react-helmet';
 import * as SketchActions from '../actions/projects';
 import * as ProjectActions from '../actions/project';
 import * as ToastActions from '../actions/toast';
@@ -17,10 +18,20 @@ class SketchList extends React.Component {
     this.props.getProjects(this.props.username);
   }
 
+  getSketchesTitle() {
+    if (this.props.username === this.props.user.username) {
+      return 'p5.js Web Editor | My sketches';
+    }
+    return `p5.js Web Editor | ${this.props.username}'s sketches`;
+  }
+
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
       <div className="sketches-table-container">
+        <Helmet>
+          <title>{this.getSketchesTitle()}</title>
+        </Helmet>
         { this.props.sketches.length === 0 &&
           <p className="sketches-table__empty">No sketches.</p>
         }
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 66547bd7..0f0ebf83 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -200,7 +200,7 @@ class IDEView extends React.Component {
     return (
       <div className="ide">
         <Helmet>
-          <title>{this.props.project.name}</title>
+          <title>p5.js Web Editor | {this.props.project.name}</title>
         </Helmet>
         {this.props.toast.isVisible && <Toast />}
         <Nav
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index 0130a6dd..2fb03b1f 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import axios from 'axios';
+import { Helmet } from 'react-helmet';
 import { updateSettings, initiateVerification } from '../actions';
 import AccountForm from '../components/AccountForm';
 import { validateSettings } from '../../../utils/reduxFormUtils';
@@ -32,6 +33,9 @@ class AccountView extends React.Component {
   render() {
     return (
       <div className="form-container">
+        <Helmet>
+          <title>p5.js Web Editor | Account</title>
+        </Helmet>
         <div className="form-container__header">
           <button className="form-container__logo-button" onClick={this.gotoHomePage}>
             <InlineSVG src={logoUrl} alt="p5js Logo" />
diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx
index 77c2eccf..4b860b9a 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.jsx
@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import get from 'lodash/get';
+import { Helmet } from 'react-helmet';
 import { verifyEmailConfirmation } from '../actions';
 
 const exitUrl = require('../../../images/exit.svg');
@@ -69,6 +70,9 @@ class EmailVerificationView extends React.Component {
 
     return (
       <div className="form-container">
+        <Helmet>
+          <title>p5.js Web Editor | Email Verification</title>
+        </Helmet>
         <div className="form-container__header">
           <button className="form-container__logo-button" onClick={this.gotoHomePage}>
             <InlineSVG src={logoUrl} alt="p5js Logo" />
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index b0f6f2fc..5183c76e 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { reduxForm } from 'redux-form';
 import { Link, browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
+import { Helmet } from 'react-helmet';
 import { validateAndLoginUser } from '../actions';
 import LoginForm from '../components/LoginForm';
 import { validateLogin } from '../../../utils/reduxFormUtils';
@@ -34,6 +35,9 @@ class LoginView extends React.Component {
     }
     return (
       <div className="form-container">
+        <Helmet>
+          <title>p5.js Web Editor | Login</title>
+        </Helmet>
         <div className="form-container__header">
           <button className="form-container__logo-button" onClick={this.gotoHomePage}>
             <InlineSVG src={logoUrl} alt="p5js Logo" />
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index bbb5b7ab..12d8d700 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import { bindActionCreators } from 'redux';
+import { Helmet } from 'react-helmet';
 import NewPasswordForm from '../components/NewPasswordForm';
 import * as UserActions from '../actions';
 
@@ -34,6 +35,9 @@ class NewPasswordView extends React.Component {
     });
     return (
       <div className={newPasswordClass}>
+        <Helmet>
+          <title>p5.js Web Editor | New Password</title>
+        </Helmet>
         <div className="form-container__header">
           <button className="form-container__logo-button" onClick={this.gotoHomePage}>
             <InlineSVG src={logoUrl} alt="p5js Logo" />
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 479b9042..523783b7 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';
 import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
+import { Helmet } from 'react-helmet';
 import * as UserActions from '../actions';
 import ResetPasswordForm from '../components/ResetPasswordForm';
 
@@ -33,6 +34,9 @@ class ResetPasswordView extends React.Component {
     });
     return (
       <div className={resetPasswordClass}>
+        <Helmet>
+          <title>p5.js Web Editor | Reset Password</title>
+        </Helmet>
         <div className="form-container__header">
           <button className="form-container__logo-button" onClick={this.gotoHomePage}>
             <InlineSVG src={logoUrl} alt="p5js Logo" />
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index 445cd4fd..13ee2909 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import axios from 'axios';
 import { Link, browserHistory } from 'react-router';
+import { Helmet } from 'react-helmet';
 import InlineSVG from 'react-inlinesvg';
 import { reduxForm } from 'redux-form';
 import * as UserActions from '../actions';
@@ -34,6 +35,9 @@ class SignupView extends React.Component {
     }
     return (
       <div className="form-container">
+        <Helmet>
+          <title>p5.js Web Editor | Signup</title>
+        </Helmet>
         <div className="form-container__header">
           <button className="form-container__logo-button" onClick={this.gotoHomePage}>
             <InlineSVG src={logoUrl} alt="p5js Logo" />