Release 2020/11/24

.circleci/config.yml

@@ -230,7 +230,7 @@ workflows:
           filters:
             branches:
               only:
-                - develop
+                - free
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      

config/default.js

@@ -112,6 +112,7 @@ module.exports = {
     COMMUNITY: 'https://community.topcoder-dev.com',
     FORUMS: 'https://apps.topcoder-dev.com/forums',
     HELP: 'https://www.topcoder.com/thrive/tracks?track=Topcoder&tax=Help%20Articles',
+    SUBMISSION_REVIEW: 'https://submission-review.topcoder-dev.com',
 
     THRIVE: 'https://www.topcoder.com/thrive',
 

config/production.js

@@ -32,6 +32,7 @@ module.exports = {
     COMMUNITY: 'https://community.topcoder.com',
     FORUMS: 'https://apps.topcoder.com/forums',
     HELP: 'https://www.topcoder.com/thrive/tracks?track=Topcoder&tax=Help%20Articles',
+    SUBMISSION_REVIEW: 'https://submission-review.topcoder.com',
     MEMBER: 'https://member.topcoder.com',
     ONLINE_REVIEW: 'https://software.topcoder.com',
     PAYMENT_TOOL: 'https://payment.topcoder.com',

package.json

@@ -140,7 +140,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.1.2",
+    "topcoder-react-lib": "1.1.3",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

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/MMatchLeaderboard/index.jsx

@@ -70,7 +70,8 @@ export default class MMLeaderboard extends Component {
       // Use Lodash to sort array
       data = _.orderBy(
         data,
-        [d => String(d[sortParam.field]).toLowerCase()], [sortParam.order],
+        [d => Number(d[sortParam.field]) || String(d[sortParam.field]).toLowerCase()],
+        [sortParam.order],
       );
     }
 

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/components/challenge-detail/Header/TabSelector/index.jsx

@@ -160,6 +160,18 @@ export default function ChallengeViewSelector(props) {
             </a>
           ) : null
         }
+        {
+          (hasRegistered && mySubmissions.length > 0) && (
+            <a
+              href={`${config.URL.SUBMISSION_REVIEW}/challenges/${challenge.legacyId}`}
+              styleName="challenge-selector-common challenge-unselected-view"
+              target="_blank"
+              rel="oopener noreferrer"
+            >
+              SUBMISSION REVIEW
+            </a>
+          )
+        }
         {
           numWinners ? (
             <a
@@ -225,6 +237,7 @@ ChallengeViewSelector.defaultProps = {
 ChallengeViewSelector.propTypes = {
   isLoggedIn: PT.bool,
   challenge: PT.shape({
+    legacyId: PT.string,
     legacy: PT.shape({
       forumId: PT.number,
     }),

src/shared/components/challenge-detail/Header/index.jsx

@@ -81,7 +81,8 @@ export default function ChallengeHeader(props) {
   const sortedAllPhases = _.cloneDeep(allPhases)
     .sort((a, b) => moment(phaseEndDate(a)).diff(phaseEndDate(b)));
 
-  const { prizes } = prizeSets && prizeSets.length ? prizeSets[0] : [];
+  const placementPrizes = _.find(prizeSets, { type: 'placement' });
+  const { prizes } = placementPrizes || [];
 
   const checkpointPrizes = _.find(prizeSets, { type: 'checkpoint' });
   let numberOfCheckpointsPrizes = 0;

src/shared/containers/EDU/Home.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { config } from 'topcoder-react-utils';
-import { Helmet } from 'react-helmet';
+import MetaTags from 'components/MetaTags';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -44,15 +44,15 @@ export default class EDUHome extends React.Component {
 
   render() {
     const { taxonomy } = this.state;
+    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
+
     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>
+        <MetaTags
+          description={description}
+          title={title}
+        />
         {/* Banner */}
         <div className={homeTheme.bannerContainer}>
           <div className={homeTheme.bannerImage} />

src/shared/containers/EDU/Search.jsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { config, isomorphy } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -13,7 +14,6 @@ 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
@@ -87,18 +87,28 @@ export default class EDUSearch extends React.Component {
     const {
       taxonomy, query, tree, isShowFilter,
     } = this.state;
+    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
+
+    const metaTags = (
+      <MetaTags
+        description={description}
+        title={title}
+      />
+    );
     // This container needs at least those variables
     // to be able to render meaningful data
-    if (!taxonomy) return <LoadingIndicator />;
+    if (!taxonomy) {
+      return (
+        <React.Fragment>
+          { metaTags }
+          <LoadingIndicator />;
+        </React.Fragment>
+      );
+    }
     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>
+        { metaTags }
         {/* Banner */}
         <div className={searchTheme.bannerContainer}>
           <div className={searchTheme.searchBarWrapp}>

src/shared/containers/EDU/Tracks.jsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { config, isomorphy } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -14,7 +15,6 @@ 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';
@@ -163,18 +163,28 @@ export default class EDUTracks extends React.Component {
       taxonomy, query, tree, isShowFilter,
       articleCnt, videoCnt, forumCnt,
     } = this.state;
+    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
+
+    const metaTags = (
+      <MetaTags
+        description={description}
+        title={title}
+      />
+    );
     // This container needs at least those variables
     // to be able to render meaningful data
-    if (!taxonomy) return <LoadingIndicator />;
+    if (!taxonomy) {
+      return (
+        <React.Fragment>
+          { metaTags }
+          <LoadingIndicator />;
+        </React.Fragment>
+      );
+    }
     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>
+        { metaTags }
         {/* Banner */}
         <div
           className={tracksTheme.bannerContainer}

src/shared/containers/EDU/styles/home.scss

@@ -2,8 +2,9 @@
 
 .container {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  width: 100%;
 
   .bannerContainer {
     background-image: linear-gradient(98.81deg, #8b41b0 0%, #ef476f 100%);

src/shared/containers/EDU/styles/search.scss

@@ -2,8 +2,9 @@
 
 .container {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  width: 100%;
 
   .bannerContainer {
     background-color: #2a2a2a;

src/shared/containers/EDU/styles/tracks.scss

@@ -2,8 +2,9 @@
 
 .container {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  width: 100%;
 
   .bannerContainer {
     min-height: 475px;

src/shared/containers/GigsPages.jsx

@@ -9,16 +9,18 @@ import Viewport from 'components/Contentful/Viewport';
 import { config } from 'topcoder-react-utils';
 import RecruitCRMJobDetails from 'containers/Gigs/RecruitCRMJobDetails';
 import { Helmet } from 'react-helmet';
+import MetaTags from 'components/MetaTags';
 
 
 export default function GigsPagesContainer(props) {
   const { match } = props;
   const { id } = match.params;
   const isApply = `${config.GIGS_PAGES_PATH}/${id}/apply` === match.url;
+  const title = 'Gig Work | Topcoder Community | Topcoder';
+  const description = 'Compete and build up your profiles and skills! Topcoder members become eligible to work on Gig Work projects by first proving themselves in various skill sets through Topcoder competitions.';
   return (
     <div>
       <Helmet>
-        <title>Topcoder - Gig Work Opportunities</title>
         <script type="text/javascript">{`
 window._chatlio = window._chatlio||[];
 !function(){ var t=document.getElementById("chatlio-widget-embed");if(t&&window.ChatlioReact&&_chatlio.init)return void _chatlio.init(t,ChatlioReact);for(var e=function(t){return function(){_chatlio.push([t].concat(arguments)) }},i=["configure","identify","track","show","hide","isShown","isOnline", "page", "open", "showOrHide"],a=0;a<i.length;a++)_chatlio[i[a]]||(_chatlio[i[a]]=e(i[a]));var n=document.createElement("script"),c=document.getElementsByTagName("script")[0];n.id="chatlio-widget-embed",n.src="https://w.chatlio.com/w.chatlio-widget.js",n.async=!0,n.setAttribute("data-embed-version","2.3");
@@ -28,6 +30,10 @@ window._chatlio = window._chatlio||[];
         `}
         </script>
       </Helmet>
+      <MetaTags
+        description={description}
+        title={title}
+      />
       <Header />
       {
         id ? (

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';