Feature contentful - gig work updates

.circleci/config.yml

@@ -260,7 +260,7 @@ workflows:
           filters:
             branches:
               only:
-                - develop
+                - feature-contentful
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration

src/shared/components/Contentful/Article/Article.jsx

@@ -15,7 +15,10 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import YouTubeVideo from 'components/YouTubeVideo';
 import moment from 'moment';
 import localStorage from 'localStorage';
-import { config, Link, isomorphy } from 'topcoder-react-utils';
+import { Helmet } from 'react-helmet';
+import {
+  config, Link, isomorphy,
+} from 'topcoder-react-utils';
 import qs from 'qs';
 // SVGs and assets
 import GestureIcon from 'assets/images/icon-gesture.svg';
@@ -110,9 +113,27 @@ export default class Article extends React.Component {
     if (isomorphy.isClientSide()) {
       shareUrl = encodeURIComponent(window.location.href);
     }
+    const description = htmlToText.fromString(
+      ReactDOMServer.renderToString(markdown(fields.content)),
+      {
+        ignoreHref: true,
+        ignoreImage: true,
+        singleNewLineParagraphs: true,
+        uppercaseHeadings: false,
+      },
+    ).substring(0, CONTENT_PREVIEW_LENGTH);
 
     return (
       <React.Fragment>
+        <Helmet>
+          <title>{fields.title}</title>
+          <meta name="title" property="og:title" content={fields.title} />
+          <meta name="description" property="og:description" content={description} />
+          <meta name="description" property="description" content={description} />
+          <meta name="twitter:description" content={description} />
+          <meta name="image" property="og:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : null} />
+          <meta name="twitter:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : null} />
+        </Helmet>
         {/* Banner */}
         {
           fields.featuredImage ? (

src/shared/components/Contentful/SearchBar/SearchBar.jsx

@@ -56,6 +56,7 @@ export class SearchBarInner extends Component {
     this.getSuggestionList = this.getSuggestionList.bind(this);
     this.handleSearchChange = this.handleSearchChange.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
     // using debounce to avoid processing or requesting too much
     this.updateSuggestionListWithNewSearch = _.debounce(
       this.updateSuggestionListWithNewSearch.bind(this), 400,
@@ -71,6 +72,29 @@ export class SearchBarInner extends Component {
     document.removeEventListener('mousedown', this.handleClickOutside);
   }
 
+  onKeyDown(e) {
+    const { inputlVal, selectedFilter } = this.state;
+    if (inputlVal && e.which === 13) {
+      const searchQuery = {};
+      if (this.searchFieldRef && this.searchFieldRef.value) {
+        if (selectedFilter.name === 'Tags') {
+          searchQuery.tags = [this.searchFieldRef.value];
+        }
+        if (selectedFilter.name === 'All') {
+          searchQuery.phrase = this.searchFieldRef.value;
+        }
+        if (selectedFilter.name === 'Title') {
+          searchQuery.title = this.searchFieldRef.value;
+        }
+      }
+      if (selectedFilter.name !== 'Author') {
+        window.location.href = `${config.TC_EDU_BASE_PATH}${config.TC_EDU_SEARCH_PATH}?${qs.stringify(searchQuery)}`;
+      } else {
+        window.location.href = `${config.TC_EDU_BASE_PATH}${config.TC_EDU_SEARCH_PATH}?author=${inputlVal}`;
+      }
+    }
+  }
+
   /**
    * Set the search field ref
    */
@@ -136,6 +160,7 @@ export class SearchBarInner extends Component {
       isShowSuggestion,
       suggestionList,
       selectedFilter,
+      noResults,
     } = this.state;
 
     const searchQuery = {};
@@ -151,7 +176,8 @@ export class SearchBarInner extends Component {
       }
     }
 
-    return (suggestionList && !_.isEmpty(suggestionList) && isShowSuggestion && (
+    // eslint-disable-next-line no-nested-ternary
+    return suggestionList && !_.isEmpty(suggestionList) && isShowSuggestion ? (
       <div
         className={theme['popup-search-result']}
         ref={this.setPopupSearchResultRef}
@@ -319,7 +345,14 @@ export class SearchBarInner extends Component {
           ) : null
         }
       </div>
-    ));
+    ) : noResults ? (
+      <div
+        className={theme['popup-search-result']}
+        ref={this.setPopupSearchResultRef}
+      >
+        <span>No Results</span>
+      </div>
+    ) : null;
   }
 
   handleClickOutside(e) {
@@ -379,23 +412,26 @@ export class SearchBarInner extends Component {
         .then((results) => {
           // Nothing found?
           if (!results.total) {
-            this.setState({ suggestionList: {} });
+            this.setState({
+              suggestionList: {},
+              noResults: true,
+            });
             return;
           }
           // Author query?
           if (selectedFilter.name === 'Author') {
             const suggestionList = {
               Author: _.map(results.items, item => ({ ...item.fields })),
             };
-            this.setState({ suggestionList });
+            this.setState({ suggestionList, noResults: false });
             return;
           }
           // ALL && Tags
           const suggestionList = this.groupResults(results);
           this.setState({ suggestionList });
         });
     } else {
-      this.setState({ suggestionList: {} });
+      this.setState({ suggestionList: {}, noResults: false });
     }
   }
 
@@ -419,6 +455,7 @@ export class SearchBarInner extends Component {
           contentAuthor: contentAuthor.fields,
           externalArticle: fields.externalArticle,
           contentUrl: fields.contentUrl,
+          slug: fields.slug,
         };
       }),
       'type',
@@ -471,6 +508,7 @@ export class SearchBarInner extends Component {
               document.addEventListener('mousedown', this.handleClickOutside);
             }}
             onChange={this.handleSearchChange}
+            onKeyDown={this.onKeyDown}
           />
           <div className={theme.dropdown}>
             <button

src/shared/components/Contentful/SearchBar/themes/default.scss

@@ -156,6 +156,10 @@ $link-color: #0d61bf;
   overflow-y: auto;
   box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.15);
   z-index: 999;
+
+  > span {
+    margin-left: 15px;
+  }
 }
 
 .icon-search {

src/shared/containers/EDU/Home.jsx

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import { config } from 'topcoder-react-utils';
+import { Helmet } from 'react-helmet';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -45,6 +46,13 @@ export default class EDUHome extends React.Component {
     const { taxonomy } = this.state;
     return (
       <div className={homeTheme.container}>
+        <Helmet>
+          <title>THRIVE - Grow with us. Tutorials and workshops that matter.</title>
+          <meta name="title" property="og:title" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="og:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="twitter:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+        </Helmet>
         {/* Banner */}
         <div className={homeTheme.bannerContainer}>
           <div className={homeTheme.bannerImage} />

src/shared/containers/EDU/Search.jsx

@@ -13,6 +13,7 @@ import { updateQuery } from 'utils/url';
 import qs from 'qs';
 import LoadingIndicator from 'components/LoadingIndicator';
 import SearchPageFilter from 'components/Contentful/SearchPageFilter/SearchPageFilter';
+import { Helmet } from 'react-helmet';
 // Partials
 import ResultTabs from './partials/ResultTabs';
 // CSS
@@ -91,6 +92,13 @@ export default class EDUSearch extends React.Component {
     if (!taxonomy) return <LoadingIndicator />;
     return (
       <div className={searchTheme.container}>
+        <Helmet>
+          <title>THRIVE - Search {`${query.title}`}</title>
+          <meta name="title" property="og:title" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="og:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="twitter:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+        </Helmet>
         {/* Banner */}
         <div className={searchTheme.bannerContainer}>
           <div className={searchTheme.searchBarWrapp}>

src/shared/containers/EDU/Tracks.jsx

@@ -14,6 +14,7 @@ import qs from 'qs';
 import TracksTree from 'components/Contentful/TracksTree/TracksTree';
 import LoadingIndicator from 'components/LoadingIndicator';
 import TracksFilter from 'components/Contentful/TracksFilter/TracksFilter';
+import { Helmet } from 'react-helmet';
 // SVGs & Assets
 import Dev from 'assets/images/img-development.png';
 import Design from 'assets/images/img_design.png';
@@ -167,6 +168,13 @@ export default class EDUTracks extends React.Component {
     if (!taxonomy) return <LoadingIndicator />;
     return (
       <div className={tracksTheme.container}>
+        <Helmet>
+          <title>THRIVE - {`${query.track}`}</title>
+          <meta name="title" property="og:title" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="og:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="twitter:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+        </Helmet>
         {/* Banner */}
         <div
           className={tracksTheme.bannerContainer}

src/shared/containers/EDU/partials/ResultTabs.jsx

@@ -162,7 +162,7 @@ export default class ResultTabs extends React.Component {
                   ]}
                 />
               ))
-            ) : (<h3>Nothing Found</h3>)
+            ) : (<h3>No results found</h3>)
           }
           {
             articles.total > articles.items.length ? (
@@ -193,7 +193,7 @@ export default class ResultTabs extends React.Component {
                   ))
                 }
               </div>
-            ) : (<h3>Nothing Found</h3>)
+            ) : (<h3>No results found</h3>)
           }
           {
             videos.total > videos.items.length ? (
@@ -225,7 +225,7 @@ export default class ResultTabs extends React.Component {
                   />
                 );
               })
-            ) : (<h3>Nothing Found</h3>)
+            ) : (<h3>No results found</h3>)
           }
           {
             posts.total > posts.items.length ? (

src/shared/services/contentful.js

@@ -346,8 +346,8 @@ class Service {
         query.query = tags.join(' ');
       }
     }
-    if (startDate) query['sys.createdAt[gte]'] = startDate;
-    if (endDate) query['sys.createdAt[lte]'] = endDate;
+    if (startDate) query['fields.creationDate[gte]'] = startDate;
+    if (endDate) query['fields.creationDate[lte]'] = endDate;
     if (phrase) query.query = phrase;
     if (title) query['fields.title[match]'] = title;
     const content = {};