Merge pull request #921 from hackclub/matthewstanciu/link-to-github-events

Link to GitHub events in "Live from GitHub" section

components/index/github.js

@@ -8,6 +8,7 @@ export default function GitHub({
   key,
   text,
   time,
+  url,
   message,
   ...props
 }) {
@@ -16,7 +17,7 @@ export default function GitHub({
       variant="pill"
       bg="snow"
       as="a"
-      href="https://github.com/hackclub"
+      href={url}
       target="_blank"
       rel="noopener"
       sx={{

lib/helpers.js

@@ -180,3 +180,10 @@ export const formatDate = (format, date, divider = ' ') => {
     .map(chunk => formatChunk(chunk, new Date(date)))
     .join(divider)
 }
+
+export const normalizeGitHubCommitUrl = url => {
+  return url
+    .replace('api.', '')
+    .replace('/repos', '')
+    .replace('commits', 'commit')
+}

pages/api/github.js

@@ -1,3 +1,5 @@
+import { normalizeGitHubCommitUrl } from '../../lib/helpers'
+
 const isRelevantEventType = type =>
   ['PushEvent', 'PullRequestEvent', 'WatchEvent'].includes(type)
 
@@ -14,6 +16,21 @@ const getMessage = (type, payload, repo) => {
   }
 }
 
+const getUrl = (type, payload, repo) => {
+  switch (type) {
+    case 'PushEvent':
+      return payload.commits?.[0].url
+        ? normalizeGitHubCommitUrl(payload.commits[0].url)
+        : 'https://github.com/hackclub'
+    case 'PullRequestEvent':
+      return payload.pull_request.html_url
+    case 'WatchEvent':
+      return `https://github.com/${repo.name}`
+    default:
+      return `https://github.com/hackclub`
+  }
+}
+
 export async function fetchGitHub() {
   const initialGitHubData = await fetch(
     'https://api.github.com/orgs/hackclub/events'
@@ -25,6 +42,7 @@ export async function fetchGitHub() {
       type,
       user: actor.login,
       userImage: actor.avatar_url,
+      url: getUrl(type, payload, repo),
       message: getMessage(type, payload, repo),
       time: created_at
     }))

pages/index.js

@@ -740,6 +740,7 @@ function Page({
                             img={data.userImage}
                             user={data.user}
                             time={data.time}
+                            url={data.url}
                             message={data.message}
                             key={key}
                           />