Merge pull request #7094 from topcoder-platform/PM-1188

PM-1188 copilot opportunities on challenge feed

Author: kkartunov

__tests__/shared/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/__snapshots__/index.jsx.snap

@@ -38,12 +38,14 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
       auth={Object {}}
       challenges={Array []}
       communityName={null}
+      copilotOpportunities={Array []}
       expandTag={null}
       expandedTags={Array []}
       expanding={false}
       filterState={Object {}}
       loadMoreActive={null}
       loadMoreAll={null}
+      loadMoreCopilotOpportunities={null}
       loadMoreMy={null}
       loadMoreMyPast={null}
       loadMoreOnGoing={null}
@@ -103,12 +105,14 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
       auth={Object {}}
       challenges={Array []}
       communityName={null}
+      copilotOpportunities={Array []}
       expandTag={null}
       expandedTags={Array []}
       expanding={false}
       filterState={Object {}}
       loadMoreActive={null}
       loadMoreAll={null}
+      loadMoreCopilotOpportunities={null}
       loadMoreMy={null}
       loadMoreMyPast={null}
       loadMoreOnGoing={null}

__tests__/shared/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/index.jsx

@@ -102,6 +102,7 @@ module.exports = {
     /* This is the same value as above, but it is used by topcoder-react-lib,
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder-dev.com',
+    COPILOTS_URL: 'https://copilots.topcoder-dev.com',
     CHALLENGES_URL: 'https://www.topcoder-dev.com/challenges',
     TCO_OPEN_URL: 'https://www.topcoder-dev.com/community/member-programs/topcoder-open',
     ARENA: 'https://arena.topcoder-dev.com',

__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap

@@ -104,6 +104,7 @@ module.exports = {
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder-dev.com',
     CHALLENGES_URL: 'https://www.topcoder-dev.com/challenges',
+    COPILOTS_URL: 'https://copilots.topcoder-dev.com',
     TCO_OPEN_URL: 'https://www.topcoder-dev.com/community/member-programs/topcoder-open',
     ARENA: 'https://arena.topcoder-dev.com',
     AUTH: 'https://accounts-auth0.topcoder-dev.com',

config/backup-default.js

@@ -26,6 +26,7 @@ module.exports = {
      * as a more verbose name for the param. */
     COMMUNITY_APP: 'https://community-app.topcoder.com',
     CHALLENGES_URL: 'https://www.topcoder.com/challenges',
+    COPILOTS_URL: 'https://copilots.topcoder.com',
     TCO_OPEN_URL: 'https://www.topcoder.com/community/member-programs/topcoder-open',
 
     AUTH: 'https://accounts-auth0.topcoder.com',

config/default.js

@@ -10,6 +10,7 @@ import { processSRM } from 'utils/tc';
 import { errors, services } from 'topcoder-react-lib';
 import { BUCKETS } from 'utils/challenge-listing/buckets';
 import SORT from 'utils/challenge-listing/sort';
+import getCopilotOpportunities from '../../services/copilotOpportunities';
 
 const { fireErrorMessage } = errors;
 const { getService } = services.challenge;
@@ -25,6 +26,8 @@ const PAGE_SIZE = 10;
  */
 const REVIEW_OPPORTUNITY_PAGE_SIZE = 1000;
 
+const COPILOT_OPPORTUNITY_PAGE_SIZE = 20;
+
 /**
  * Private. Loads from the backend all challenges matching some conditions.
  * @param {Function} getter Given params object of shape { limit, offset }
@@ -496,6 +499,21 @@ function getReviewOpportunitiesDone(uuid, page, tokenV3) {
     });
 }
 
+/**
+ * Action to get a list of currently open Copilot Opportunities using V5 API
+ * @param {String} uuid Unique identifier for init/done instance from shortid module
+ * @param {Number} page Page of copilot opportunities to fetch (1-based)
+ * @return {Promise<{uuid: string, loaded: object}>} Action result
+ */
+function getCopilotOpportunitiesDone(uuid, page) {
+  return getCopilotOpportunities(page, COPILOT_OPPORTUNITY_PAGE_SIZE)
+    .then(loaded => ({ uuid, loaded }))
+    .catch((error) => {
+      fireErrorMessage('Error Getting Copilot Opportunities', error.content || error);
+      return Promise.reject(error);
+    });
+}
+
 /**
  * Payload creator for the action that inits the loading of SRMs.
  * @param {String} uuid
@@ -610,6 +628,9 @@ export default createActions({
     GET_REVIEW_OPPORTUNITIES_INIT: (uuid, page) => ({ uuid, page }),
     GET_REVIEW_OPPORTUNITIES_DONE: getReviewOpportunitiesDone,
 
+    GET_COPILOT_OPPORTUNITIES_INIT: (uuid, page) => ({ uuid, page }),
+    GET_COPILOT_OPPORTUNITIES_DONE: getCopilotOpportunitiesDone,
+
     GET_SRMS_INIT: getSrmsInit,
     GET_SRMS_DONE: getSrmsDone,
 

config/production.js

@@ -0,0 +1,76 @@
+/**
+ * Component for rendering a Copilot Opportunity Card which will serve as a row in the list.
+ */
+import _ from 'lodash';
+import { config } from 'topcoder-react-utils';
+import moment from 'moment';
+import React, { useMemo } from 'react';
+import PT from 'prop-types';
+
+import Tags from '../Tags';
+
+import './style.scss';
+
+const PROJECT_TYPE_LABELS = {
+  dev: 'Development',
+  ai: 'AI (Artificial Intelligence)',
+  design: 'Design',
+  datascience: 'DataScience',
+  qa: 'Quality Assurance',
+};
+
+function CopilotOpportunityCard({
+  opportunity,
+}) {
+  const skills = useMemo(() => _.uniq((opportunity.skills || []).map(skill => skill.name)), [
+    opportunity.skills,
+  ]);
+  const start = moment(opportunity.startDate);
+
+  return (
+    <div styleName="copilotOpportunityCard">
+      <div styleName="left-panel">
+
+        <div styleName="challenge-details">
+          <a
+            href={`${config.URL.COPILOTS_URL}/opportunity/${opportunity.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {opportunity.project.name}
+          </a>
+
+          <div styleName="details-footer">
+            <span styleName="date">
+              Starts {start.format('MMM DD')}
+            </span>
+            { skills.length > 0
+              && (
+              <Tags
+                skills={skills}
+              />
+              ) }
+          </div>
+        </div>
+      </div>
+
+      <div styleName="right-panel">
+        <div styleName="type">
+          <span>{PROJECT_TYPE_LABELS[opportunity.type]}</span>
+        </div>
+        <div styleName={`status ${opportunity.status === 'completed' ? 'completed' : ''}`}>
+          <span>{opportunity.status}</span>
+        </div>
+        <div styleName="numHours">
+          <span>{opportunity.numHoursPerWeek} hours/week</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CopilotOpportunityCard.propTypes = {
+  opportunity: PT.shape().isRequired,
+};
+
+export default CopilotOpportunityCard;