Fixes #554 (#559)

* update title

* update titles

* delete unnecessary line

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 */}

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,

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

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import {
   metaKeyName,
 } from '../../../utils/metaKey';

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

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

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

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" />

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" />

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" />

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" />

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" />

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" />