Add project and issue links in card

client/src/components/BoardPage/IssueCard.jsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
+const issueURLPattern = /(^https?:\/\/([^\/]))$/i;
+
 export class IssueCard extends React.PureComponent {
   render() {
     const { card } = this.props;
+    const issueURLInfo = extractInfoFromIssueURL(card.issue.url);
+    const projectURL = `${issueURLInfo.baseURL}/${issueURLInfo.owner}/${issueURLInfo.projectName}`;
+    const issueURL = `${projectURL}/issues/${card.issue.number}`;
     return (
       <div className="kanboard-card">
         <div className="box">
@@ -30,18 +35,28 @@ export class IssueCard extends React.PureComponent {
           </div>
           <div className="level is-mobile" style={{marginTop:'1rem'}}>
             <div className="level-left">
-              <small className="level-item"><a href="#">{card.project}</a></small>
+              <small className="level-item"><a href={projectURL}>{card.project}</a></small>
             </div>
             <div className="level-right">
-                <a className="level-item" target="_blank" href={card.issue.url.replace('/api/v1/repos', '')}>
+              <a className="level-item" target="_blank" href={issueURL}>
-                  <span className="icon is-small has-text-info">
+                <span className="icon is-small has-text-info">
-                    <i className="fas fa-search" aria-hidden="true"></i>
+                  <i className="fas fa-search" aria-hidden="true"></i>
-                  </span>
+                </span>
-                </a>
+              </a>
             </div>
           </div>
         </div>
       </div>
     );
   }
+}
+
+function extractInfoFromIssueURL(issueURL) {
+  const pattern = /^(https?:\/\/[^\/]+)\/api\/v1\/repos\/([^\/]+)\/([^\/]+)\/.*$/;
+  const matches = pattern.exec(issueURL);
+  return {
+    baseURL: matches[1],
+    owner: matches[2],
+    projectName: matches[3],
+  };
 }