feat: add link to Connect Project

ref issue #51

Author: maxceem

config/development.js

@@ -4,6 +4,11 @@ module.exports = {
    */
   TOPCODER_COMMUNITY_WEBSITE_URL: "https://topcoder-dev.com",
 
+  /**
+   * URL of Topcoder Connect Website
+   */
+  CONNECT_WEBSITE_URL: "https://connect.topcoder-dev.com",
+
   /**
    * Email to report issues to
    */

config/production.js

@@ -4,6 +4,11 @@ module.exports = {
    */
   TOPCODER_COMMUNITY_WEBSITE_URL: "https://topcoder.com",
 
+  /**
+   * URL of Topcoder Connect Website
+   */
+  CONNECT_WEBSITE_URL: "https://connect.topcoder.com",
+
   /**
    * Email to report issues to
    */

src/routes/MyTeamsDetails/components/TeamSummary/index.jsx

@@ -7,6 +7,7 @@ import React from "react";
 import PT from "prop-types";
 import DataItem from "components/DataItem";
 import {
+  formatConnectProjectUrl,
   formatMoney,
   formatRemainingTimeForTeam,
   formatReportIssueUrl,
@@ -39,6 +40,14 @@ const TeamSummary = ({ team }) => {
       </div>
 
       <div styleName="actions">
+        <Button
+          href={formatConnectProjectUrl(team.id)}
+          target="_blank"
+          type="secondary"
+          size="medium"
+        >
+          Open in Connect
+        </Button>
         <Button
           type="warning"
           size="medium"

src/routes/MyTeamsDetails/components/TeamSummary/styles.module.scss

@@ -19,5 +19,14 @@
 }
 
 .actions {
-  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+
+  > * {
+    margin-top: 20px;
+  }
+
+  > *:not(:last-child) {
+    margin-right: 10px;
+  }
 }

src/routes/MyTeamsDetails/index.jsx

@@ -15,7 +15,6 @@ import TeamSummary from "./components/TeamSummary";
 import TeamMembers from "./components/TeamMembers";
 import TeamPositions from "./components/TeamPositions";
 import withAuthentication from "../../hoc/withAuthentication";
-import { useAsync } from "react-use";
 
 const MyTeamsDetails = ({ teamId }) => {
   const [team, loadingError] = useData(getTeamById, teamId);

src/routes/MyTeamsList/components/TeamCard/index.jsx

@@ -7,8 +7,6 @@ import "./styles.module.scss";
 import _ from "lodash";
 import { Link } from "@reach/router";
 import DataItem from "components/DataItem";
-import moment from "moment";
-import { DAY_FORMAT } from "constants";
 import IconCalendar from "../../../../assets/images/icon-calendar.svg";
 import IconClock from "../../../../assets/images/icon-clock.svg";
 import IconMoney from "../../../../assets/images/icon-money.svg";
@@ -18,6 +16,7 @@ import {
   formatMoney,
   formatRemainingTimeForTeam,
   formatReportIssueUrl,
+  formatConnectProjectUrl,
 } from "utils/format";
 import AvatarGroup from "components/AvatarGroup";
 import ThreeDotsMenu from "components/ThreeDotsMenu";
@@ -28,6 +27,15 @@ const TeamCard = ({ team }) => {
       <div styleName="three-dots-menu">
         <ThreeDotsMenu
           options={[
+            {
+              label: "Open in Connect",
+              action: () => {
+                window.open(formatConnectProjectUrl(team.id));
+              },
+            },
+            {
+              separator: true,
+            },
             {
               label: "Report an Issue",
               action: () => {

src/utils/format.js

@@ -3,10 +3,24 @@
  */
 import _ from "lodash";
 import { RATE_TYPE } from "constants";
-import { EMAIL_REPORT_ISSUE, EMAIL_REQUEST_EXTENSION } from "../../config";
+import {
+  EMAIL_REPORT_ISSUE,
+  EMAIL_REQUEST_EXTENSION,
+  CONNECT_WEBSITE_URL,
+} from "../../config";
 import moment from "moment";
 import { DAY_FORMAT } from "constants/";
 
+/**
+ * Format URL to the project (team) in Connect App.
+ *
+ * @param {string|number} teamId team (project) id
+ *
+ * @returns {string} URL to Connect project
+ */
+export const formatConnectProjectUrl = (teamId) =>
+  `${CONNECT_WEBSITE_URL}/projects/${teamId}`;
+
 /**
  * Formats number with base word in singular or plural form depend on the number.
  *