moved title, metaTag, and link utils into SEO component

.gitignore

@@ -4,3 +4,4 @@ config/sequelizeCliConfig.js
 config/speechConfig.js
 public/bundle
 server.js
+webpack.config.js

package.json

@@ -7,6 +7,7 @@
     "test": "mocha --recursive",
     "test-all": "mocha --recursive",
     "start": "node server.js",
+    "start-dev": "nodemon server.js",
     "lint": "eslint .",
     "fix": "eslint . --fix",
     "precommit": "eslint .",

react/components/AboutPage/index.js

@@ -1,18 +1,12 @@
 import React from 'react';
 import NavBar from 'containers/NavBar';
 import SEO from 'components/SEO';
-import { createPageTitle } from 'utils/pageTitle';
-import { createBasicCanonicalLink } from 'utils/canonicalLink';
-import { createBasicMetaTags } from 'utils/metaTags';
 
 class AboutPage extends React.Component {
   render () {
-    const pageTitle = createPageTitle('About');
-    const canonicalLink = createBasicCanonicalLink('about');
-    const metaTags = createBasicMetaTags();
     return (
       <div>
-        <SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
+        <SEO pageTitle={'About'} pageUri={'about'} />
         <NavBar />
         <div className='row row--padded'>
           <div className='column column--5 column--med-10 align-content-top'>

react/components/HomePage/index.js

@@ -2,18 +2,12 @@ import React from 'react';
 import SEO from 'components/SEO';
 import NavBar from 'containers/NavBar';
 import PublishTool from 'containers/PublishTool';
-import { createPageTitle } from 'utils/pageTitle';
-import { createBasicCanonicalLink } from 'utils/canonicalLink';
-import { createBasicMetaTags } from 'utils/metaTags';
 
 class HomePage extends React.Component {
   render () {
-    const pageTitle = createPageTitle();
-    const canonicalLink = createBasicCanonicalLink();
-    const metaTags = createBasicMetaTags();
     return (
       <div className={'row row--tall flex-container--column'}>
-        <SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
+        <SEO />
         <NavBar />
         <div className={'row row--tall row--padded flex-container--column'}>
           <PublishTool />

react/components/SEO/index.jsx

@@ -2,23 +2,31 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import PropTypes from 'prop-types';
 
+import { createPageTitle } from 'utils/pageTitle';
+import { createMetaTags } from 'utils/metaTags';
+import { createCanonicalLink } from 'utils/canonicalLink';
+
 class SEO extends React.Component {
   render () {
-    const { pageTitle, metaTags, canonicalLink } = this.props;
+    let { pageTitle, asset, channel, pageUri } = this.props;
+    pageTitle = createPageTitle(pageTitle);
+    const metaTags = createMetaTags(asset, channel);
+    const canonicalLink = createCanonicalLink(asset, channel, pageUri);
     return (
       <Helmet
         title={pageTitle}
-        link={[{rel: 'canonical', href: canonicalLink}]}
         meta={metaTags}
+        link={[{rel: 'canonical', href: canonicalLink}]}
       />
     );
   }
 };
 
 SEO.propTypes = {
-  pageTitle    : PropTypes.string.isRequired,
+  pageTitle: PropTypes.string,
-  metaTags     : PropTypes.array.isRequired,
+  pageUri  : PropTypes.string,
-  canonicalLink: PropTypes.string.isRequired,
+  channel  : PropTypes.object,
+  asset    : PropTypes.object,
 };
 
 export default SEO;

react/components/ShowAssetDetails/view.jsx

@@ -5,21 +5,15 @@ import ErrorPage from 'components/ErrorPage';
 import AssetTitle from 'components/AssetTitle';
 import AssetDisplay from 'components/AssetDisplay';
 import AssetInfo from 'components/AssetInfo';
-import { createPageTitle } from 'utils/pageTitle';
-import { createAssetCanonicalLink } from 'utils/canonicalLink';
-import { createAssetMetaTags } from 'utils/metaTags';
 
 class ShowAssetDetails extends React.Component {
   render () {
     const { asset } = this.props;
     if (asset) {
       const { name } = asset.claimData;
-      const pageTitle = createPageTitle(`${name} - details`);
-      const canonicalLink = createAssetCanonicalLink(asset);
-      const metaTags = createAssetMetaTags(asset);
       return (
         <div>
-          <SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
+          <SEO pageTitle={`${name} - details`} asset={asset} />
           <NavBar />
           <div className='row row--tall row--padded'>
             <div className='column column--10'>

react/components/ShowAssetLite/view.jsx

@@ -2,21 +2,15 @@ import React from 'react';
 import SEO from 'components/SEO';
 import { Link } from 'react-router-dom';
 import AssetDisplay from 'components/AssetDisplay';
-import { createPageTitle } from 'utils/pageTitle';
-import { createAssetCanonicalLink } from 'utils/canonicalLink';
-import { createAssetMetaTags } from 'utils/metaTags';
 
 class ShowLite extends React.Component {
   render () {
     const { asset } = this.props;
     if (asset) {
       const { name, claimId } = asset.claimData;
-      const pageTitle = createPageTitle(name);
-      const canonicalLink = createAssetCanonicalLink(asset);
-      const metaTags = createAssetMetaTags(asset);
       return (
         <div className='row row--tall flex-container--column flex-container--center-center'>
-          <SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
+          <SEO pageTitle={name} asset={asset} />
           <div>
             <AssetDisplay />
             <Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted

react/components/ShowChannel/view.jsx

@@ -3,27 +3,21 @@ import SEO from 'components/SEO';
 import ErrorPage from 'components/ErrorPage';
 import NavBar from 'containers/NavBar';
 import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
-import { createPageTitle } from 'utils/pageTitle';
-import { createChannelCanonicalLink } from 'utils/canonicalLink';
-import { createChannelMetaTags } from 'utils/metaTags';
 
 class ShowChannel extends React.Component {
   render () {
     const { channel } = this.props;
     if (channel) {
       const { name, longId, shortId } = channel;
-      const pageTitle = createPageTitle(`${name}`);
-      const canonicalLink = createChannelCanonicalLink(channel);
-      const metaTags = createChannelMetaTags(channel);
       return (
         <div>
-          <SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
+          <SEO pageTitle={name} channel={channel} />
           <NavBar />
           <div className='row row--tall row--padded'>
             <div className='column column--10'>
-              <h2>channel name: {name || 'loading...'}</h2>
+              <h2>channel name: {name}</h2>
-              <p className={'fine-print'}>full channel id: {longId || 'loading...'}</p>
+              <p className={'fine-print'}>full channel id: {longId}</p>
-              <p className={'fine-print'}>short channel id: {shortId || 'loading...'}</p>
+              <p className={'fine-print'}>short channel id: {shortId}</p>
             </div>
             <div className='column column--10'>
               <ChannelClaimsDisplay />

react/containers/LoginPage/view.jsx

@@ -4,9 +4,6 @@ import SEO from 'components/SEO';
 import NavBar from 'containers/NavBar';
 import ChannelLoginForm from 'containers/ChannelLoginForm';
 import ChannelCreateForm from 'containers/ChannelCreateForm';
-import { createPageTitle } from 'utils/pageTitle';
-import { createBasicCanonicalLink } from 'utils/canonicalLink';
-import { createBasicMetaTags } from 'utils/metaTags';
 
 class LoginPage extends React.Component {
   componentWillReceiveProps (newProps) {
@@ -17,12 +14,9 @@ class LoginPage extends React.Component {
     }
   }
   render () {
-    const pageTitle = createPageTitle('Login');
-    const canonicalLink = createBasicCanonicalLink('login');
-    const metaTags = createBasicMetaTags();
     return (
       <div>
-        <SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
+        <SEO pageTitle={'Login'} pageUri={'login'} />
         <NavBar />
         <div className='row row--padded'>
           <div className='column column--5 column--med-10 align-content-top'>

react/utils/canonicalLink.js

@@ -1,13 +1,13 @@
 const { site: { host } } = require('../../config/speechConfig.js');
 
-export const createBasicCanonicalLink = (page) => {
+const createBasicCanonicalLink = (page) => {
   if (!page) {
     return `${host}`;
   };
   return `${host}/${page}`;
 };
 
-export const createAssetCanonicalLink = (asset) => {
+const createAssetCanonicalLink = (asset) => {
   let channelName, certificateId, name, claimId;
   if (asset.claimData) {
     ({ channelName, certificateId, name, claimId } = asset.claimData);
@@ -18,7 +18,20 @@ export const createAssetCanonicalLink = (asset) => {
   return `${host}/${claimId}/${name}`;
 };
 
-export const createChannelCanonicalLink = (channel) => {
+const createChannelCanonicalLink = (channel) => {
   const { name, longId } = channel;
   return `${host}/${name}:${longId}`;
 };
+
+export const createCanonicalLink = (asset, channel, page) => {
+  if (asset) {
+    return createAssetCanonicalLink(asset);
+  }
+  if (channel) {
+    return createChannelCanonicalLink(channel);
+  }
+  if (page) {
+    return createBasicCanonicalLink(page);
+  }
+  return createBasicCanonicalLink();
+};

react/utils/metaTags.js

@@ -20,7 +20,7 @@ const determineOgThumbnailContentType = (thumbnail) => {
   return '';
 };
 
-export const createBasicMetaTags = () => {
+const createBasicMetaTags = () => {
   return [
     {property: 'og:title', content: title},
     {property: 'og:url', content: host},
@@ -31,7 +31,7 @@ export const createBasicMetaTags = () => {
   ];
 };
 
-export const createChannelMetaTags = (channel) => {
+const createChannelMetaTags = (channel) => {
   const { name, longId } = channel;
   return [
     {property: 'og:title', content: `${name} on ${title}`},
@@ -43,7 +43,7 @@ export const createChannelMetaTags = (channel) => {
   ];
 };
 
-export const createAssetMetaTags = (asset) => {
+const createAssetMetaTags = (asset) => {
   const { claimData } = asset;
   const { contentType } = claimData;
   const embedUrl = `${host}/${claimData.claimId}/${claimData.name}`;
@@ -84,3 +84,13 @@ export const createAssetMetaTags = (asset) => {
   }
   return metaTags;
 };
+
+export const createMetaTags = (asset, channel) => {
+  if (asset) {
+    return createAssetMetaTags(asset);
+  };
+  if (channel) {
+    return createChannelMetaTags(channel);
+  };
+  return createBasicMetaTags();
+};