Move MetaTags from utils lib to community-app

Author: luizrrodrigues

src/shared/components/Contentful/Route.jsx

@@ -7,7 +7,7 @@ import _ from 'lodash';
 import ContentfulLoader from 'containers/ContentfulLoader';
 import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import PT from 'prop-types';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';

src/shared/components/MetaTags.jsx

@@ -0,0 +1,82 @@
+/**
+ * Auxiliary wrapper around React Helmet that helps to generate meta tags for
+ * generic use cases.
+ *
+ * NOTE: This component relies on `domain` path of Redux store to hold
+ * the current app domain, which will serve as the base path for the bundled
+ * images.
+ */
+
+import PT from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Helmet } from 'react-helmet';
+
+function MetaTags({
+  description,
+  domain,
+  image,
+  siteName,
+  socialDescription,
+  socialTitle,
+  title,
+  url,
+}) {
+  const img = `${domain}${image}`;
+  const socTitle = socialTitle || title;
+  const socDesc = socialDescription || description;
+  return (
+    <Helmet>
+      {/* General tags. */}
+      <title>
+        {title}
+      </title>
+      <meta name="description" content={description} />
+
+      {/* Twitter cards. */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={socTitle} />
+      <meta name="twitter:description" content={socDesc} />
+      { image ? <meta name="twitter:image" content={img} /> : null }
+      {
+        siteName ? (
+          <meta name="twitter:site" content={`@${siteName}`} />
+        ) : null
+      }
+
+      {/* Open Graph data. */}
+      <meta property="og:title" content={socTitle} />
+      { image ? <meta property="og:image" content={img} /> : null }
+      { image ? <meta property="og:image:alt" content={socTitle} /> : null }
+      <meta property="og:description" content={socDesc} />
+      {
+        siteName ? (<meta property="og:sitename" content={siteName} />) : null
+      }
+      { url ? (<meta property="og:url" content={url} />) : null }
+    </Helmet>
+  );
+}
+
+MetaTags.defaultProps = {
+  image: null,
+  siteName: null,
+  socialDescription: null,
+  socialTitle: null,
+  url: null,
+};
+
+MetaTags.propTypes = {
+  description: PT.string.isRequired,
+  domain: PT.string.isRequired,
+  image: PT.string,
+  siteName: PT.string,
+  socialDescription: PT.string,
+  socialTitle: PT.string,
+  title: PT.string.isRequired,
+  url: PT.string,
+};
+
+/* TODO: It is not good to depend on the domain written into redux state here,
+ * better pass it via the renderer context at the server side, and get it from
+ * the location at the frontend side, or something similar? */
+export default connect(state => ({ domain: state.domain }))(MetaTags);

src/shared/components/Settings/index.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import PT from 'prop-types';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 
 import { TABS } from 'actions/page/settings';
 

src/shared/containers/Profile.jsx

@@ -7,7 +7,7 @@ import PT from 'prop-types';
 import { connect } from 'react-redux';
 
 import { actions } from 'topcoder-react-lib';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
 import ProfilePage from 'components/ProfilePage';

src/shared/containers/ProfileStats.jsx

@@ -9,7 +9,7 @@ import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
 import ProfileStatsPage from 'components/ProfilePage/Stats';
 import { shouldShowGraph, isValidTrack } from 'utils/memberStats';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import _ from 'lodash';
 import qs from 'qs';
 

src/shared/containers/challenge-detail/index.jsx

@@ -39,7 +39,8 @@ import {
   SUBTRACKS,
   CHALLENGE_STATUS,
 } from 'utils/tc';
-import { config, MetaTags } from 'topcoder-react-utils';
+import { config } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import { actions } from 'topcoder-react-lib';
 import { getService } from 'services/contentful';
 // import {

src/shared/containers/challenge-listing/Listing/index.jsx

@@ -25,7 +25,7 @@ import sidebarActions from 'actions/challenge-listing/sidebar';
 import communityActions from 'actions/tc-communities';
 // import SORT from 'utils/challenge-listing/sort';
 import { BUCKETS, filterChanged, sortChangedBucket } from 'utils/challenge-listing/buckets';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import { USER_GROUP_MAXAGE } from 'config';
 import { updateChallengeType } from 'utils/challenge';
 

src/shared/containers/terms-detail/index.jsx

@@ -11,7 +11,7 @@ import _ from 'lodash';
 import LoadingIndicator from 'components/LoadingIndicator';
 import TermDetails from 'components/Terms/TermDetails';
 import { actions } from 'topcoder-react-lib';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
 import SwitchWithLabel from 'components/SwitchWithLabel';
 import { themr } from 'react-css-super-themr';

src/shared/routes/Communities/Blockchain/Routes.jsx

@@ -27,7 +27,8 @@ import Settings from 'routes/Settings';
 import TermsDetail from 'routes/TermsDetail';
 import { Route, Switch } from 'react-router-dom';
 import { ThemeProvider } from 'react-css-super-themr';
-import { config, MetaTags } from 'topcoder-react-utils';
+import { config } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 
 import primaryButtonStyle from 'components/buttons/outline/round/open-sans/green-uppercase.scss';
 import secondaryButtonStyle from 'components/buttons/outline/round/open-sans/blue-uppercase.scss';

src/shared/routes/Communities/Cognitive/Routes.jsx

@@ -23,7 +23,8 @@ import socialImage from 'assets/images/communities/cognitive/social.jpg';
 
 import TermsDetail from 'routes/TermsDetail';
 import { Route, Switch } from 'react-router-dom';
-import { config, MetaTags } from 'topcoder-react-utils';
+import { config } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 
 export default function Cognitive({ base, member, meta }) {
   return (

src/shared/routes/Communities/Mobile/Routes.jsx

@@ -17,7 +17,8 @@ import ProfileStats from 'routes/ProfileStats';
 
 import { Route, Switch } from 'react-router-dom';
 import { ThemeProvider } from 'react-css-super-themr';
-import { config, MetaTags } from 'topcoder-react-utils';
+import { config } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 
 import primaryButtonStyle from 'components/buttons/outline/round/open-sans/green-uppercase.scss';
 import secondaryButtonStyle from 'components/buttons/outline/round/open-sans/blue-uppercase.scss';

src/shared/routes/index.jsx

@@ -11,7 +11,8 @@ import React from 'react';
 import {
   Switch, Route, withRouter, Redirect,
 } from 'react-router-dom';
-import { MetaTags, config } from 'topcoder-react-utils';
+import { config } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 
 import PT from 'prop-types';