Add GitHub components for Repos, Issues, PullRequests

src/web/src/components/Posts/GitHubInfo.tsx

@@ -0,0 +1,76 @@
+import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
+import Repos from './Repos';
+import Issues from './Issues';
+import PullRequests from './Pullrequests';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      padding: '0',
+      display: 'flex',
+      borderLeft: '1.5px solid #999999',
+      flexDirection: 'column',
+      [theme.breakpoints.up('lg')]: {
+        width: '21rem',
+      },
+      color: theme.palette.text.secondary,
+    },
+    GitHubInfoContainer: {
+      margin: '2rem 0 0 1rem',
+    },
+  })
+);
+
+type Props = {
+  ghUrls: string[];
+};
+
+const filterGitHubUrls = (ghUrls: string[]) => {
+  const issues: string[] = [];
+  const pullRequests: string[] = [];
+  const repos: string[] = [];
+
+  ghUrls.forEach((ghUrl) => {
+    // add unique repo urls to repos array
+    if (
+      ghUrl.match(/https:\/\/github\.com\/[^\/]+\/[^\/]+/) &&
+      !repos.includes(ghUrl.replace(/(https:\/\/github\.com\/[^\/]+\/[^\/]+)\/.*/, '$1'))
+    ) {
+      repos.push(ghUrl.replace(/(https:\/\/github\.com\/[^\/]+\/[^\/]+)\/.*/, '$1'));
+    }
+
+    // remove trailing characters after issue or pullRequest number from ghUrl
+    const trimmedUrl: string = ghUrl.replace(
+      /(https:\/\/github\.com\/[^\/]+\/[^\/]+\/(issues|pull)\/[0-9]+).*/,
+      '$1'
+    );
+
+    // add unique issue urls to issues array
+    if (trimmedUrl.match(/https:\/\/github\.com\/[^\/]+\/[^\/]+\/issues\/[0-9]+/)) {
+      if (!issues.includes(trimmedUrl)) issues.push(trimmedUrl);
+    }
+
+    // add unique pull request urls to pullRequests array
+    if (trimmedUrl.match(/https:\/\/github\.com\/[^\/]+\/[^\/]+\/pull\/[0-9]+/)) {
+      if (!pullRequests.includes(trimmedUrl)) pullRequests.push(trimmedUrl);
+    }
+  });
+  return { repos, issues, pullRequests };
+};
+
+const GitHubInfo = ({ ghUrls }: Props) => {
+  const classes = useStyles();
+  const { repos, issues, pullRequests } = filterGitHubUrls(ghUrls);
+
+  return (
+    <ListSubheader className={classes.root}>
+      <div className={classes.GitHubInfoContainer}>
+        {repos.length ? <Repos repoUrls={repos} /> : null}
+        {issues.length ? <Issues issueUrls={issues} /> : null}
+        {pullRequests.length ? <PullRequests prUrls={pullRequests} /> : null}
+      </div>
+    </ListSubheader>
+  );
+};
+
+export default GitHubInfo;

src/web/src/components/Posts/Issues.tsx

@@ -0,0 +1,63 @@
+import { VscIssues } from 'react-icons/vsc';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      textDecoration: 'none',
+      color: theme.palette.text.primary,
+      '&:hover': {
+        textDecorationLine: 'underline',
+      },
+    },
+    GitHubInfo: {
+      lineHeight: '2rem',
+      fontSize: '1.2rem',
+    },
+    GitHubLinkTitle: {
+      fontSize: '1.4rem',
+      margin: 0,
+      paddingTop: '1rem',
+    },
+    icon: {
+      fontSize: '2rem',
+      marginRight: '1rem',
+      verticalAlign: 'text-bottom',
+    },
+    issues: {
+      display: 'flex',
+      margin: 0,
+    },
+    issue: {
+      marginRight: '2rem',
+    },
+  })
+);
+
+type Props = {
+  issueUrls: string[];
+};
+
+const Issues = ({ issueUrls }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.GitHubInfo}>
+      <h1 className={classes.GitHubLinkTitle}>
+        <VscIssues className={classes.icon}></VscIssues>
+        {issueUrls.length === 1 ? 'Issue' : 'Issues'}
+      </h1>
+      <p className={classes.issues}>
+        {issueUrls.map((issue) => (
+          <p key={issue} className={classes.issue}>
+            <a href={issue} rel="bookmark" className={classes.link}>
+              #{issue.replace(/https:\/\/github\.com\/.+\/issues\/([0-9]+).*/, '$1')}
+            </a>
+          </p>
+        ))}
+      </p>
+    </div>
+  );
+};
+
+export default Issues;

src/web/src/components/Posts/Post.tsx

@@ -15,6 +15,7 @@ import AdminButtons from '../AdminButtons';
 import Spinner from '../Spinner';
 import PostDesktopInfo from './PostInfo';
 import PostAvatar from './PostAvatar';
+import GitHubInfo from './GitHubInfo';
 
 type Props = {
   postUrl: string;
@@ -243,6 +244,8 @@ const PostComponent = ({ postUrl }: Props) => {
   // Grab the post data from our backend so we can render it
   const { data: post, error } = useSWR<Post>(postUrl);
   const [expandHeader, setExpandHeader] = useState(false);
+  // Extract all the github urls from the post
+  const extractedGitHubUrls: string[] = post?.html ? extractGitHubUrlsFromPost(post.html) : [];
 
   if (error) {
     console.error(`Error loading post at ${postUrl}`, error);
@@ -331,6 +334,7 @@ const PostComponent = ({ postUrl }: Props) => {
             postDate={formatPublishedDate(post.updated)}
             blogUrl={post.feed.link}
           />
+          {extractedGitHubUrls.length ? <GitHubInfo ghUrls={extractedGitHubUrls} /> : null}
         </ListSubheader>
       )}
       <div className={classes.content}>

src/web/src/components/Posts/Pullrequests.tsx

@@ -0,0 +1,63 @@
+import { VscGitPullRequest } from 'react-icons/vsc';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      textDecoration: 'none',
+      color: theme.palette.text.primary,
+      '&:hover': {
+        textDecorationLine: 'underline',
+      },
+    },
+    GitHubInfo: {
+      lineHeight: '2rem',
+      fontSize: '1.2rem',
+    },
+    GitHubLinkTitle: {
+      fontSize: '1.4rem',
+      margin: 0,
+      paddingTop: '1rem',
+    },
+    icon: {
+      fontSize: '2rem',
+      marginRight: '1rem',
+      verticalAlign: 'text-bottom',
+    },
+    pullRequests: {
+      display: 'flex',
+      margin: 0,
+    },
+    pullRequest: {
+      marginRight: '2rem',
+    },
+  })
+);
+
+type Props = {
+  prUrls: string[];
+};
+
+const PullRequests = ({ prUrls }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.GitHubInfo}>
+      <h1 className={classes.GitHubLinkTitle}>
+        <VscGitPullRequest className={classes.icon}></VscGitPullRequest>
+        {prUrls.length === 1 ? 'Pull Request' : 'Pull Requests'}
+      </h1>
+      <p className={classes.pullRequests}>
+        {prUrls.map((pullRequest) => (
+          <p key={pullRequest} className={classes.pullRequest}>
+            <a href={pullRequest} rel="bookmark" className={classes.link}>
+              #{pullRequest.replace(/https:\/\/github\.com\/.+\/pull\/([0-9]+).*/, '$1')}
+            </a>
+          </p>
+        ))}
+      </p>
+    </div>
+  );
+};
+
+export default PullRequests;

src/web/src/components/Posts/Repos.tsx

@@ -0,0 +1,59 @@
+import { VscRepoForked } from 'react-icons/vsc';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      textDecoration: 'none',
+      color: theme.palette.text.primary,
+      '&:hover': {
+        textDecorationLine: 'underline',
+      },
+    },
+    GitHubInfo: {
+      lineHeight: '2rem',
+      fontSize: '1.2rem',
+      wordWrap: 'break-word',
+    },
+    GitHubLinkTitle: {
+      fontSize: '1.4rem',
+      margin: 0,
+      paddingTop: '1rem',
+    },
+    icon: {
+      fontSize: '2rem',
+      marginRight: '1rem',
+      verticalAlign: 'text-bottom',
+    },
+    repo: {
+      marginTop: '2rem',
+      lineHeight: '0.5rem',
+    },
+  })
+);
+
+type Props = {
+  repoUrls: string[];
+};
+
+const Repos = ({ repoUrls }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.GitHubInfo}>
+      <h1 className={classes.GitHubLinkTitle}>
+        <VscRepoForked className={classes.icon}></VscRepoForked>
+        {repoUrls.length === 1 ? 'Repo' : 'Repos'}
+      </h1>
+      {repoUrls.map((repo) => (
+        <p key={repo} className={classes.repo}>
+          <a href={repo} rel="bookmark" className={classes.link}>
+            {repo.replace(/https:\/\/github\.com\//, '')}
+          </a>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default Repos;