Recent commits page (#118)

* Display recent commits

* - Support more repositories
- Fix font size and alignment
- Sort by date
- Use GH Api token

* Supply repositories via .env file; Add time to list of commits; Skip commits page if there are no repositories configured

* Update CommITCrowd banner; Fix next flow for commits page. Fix feedback

---------

Co-authored-by: Tobias de Bruijn <[email protected]>

sample.env

@@ -9,3 +9,7 @@ VITE_ACTIVITY_ENDPOINT=https://koala.svsticky.nl/api/activities
 # Timers
 VITE_LOAD_INTERVAL=900000  # 15 * 60 * 1000
 VITE_NEXT_INTERVAL=8000    # 8 * 1000
+
+# Commits page
+VITE_GITHUB_REPOS=svsticky/radio svsticky/constipated-koala svsticky/static-sticky
+VITE_GITHUB_API_TOKEN=

src/App.jsx

@@ -5,7 +5,8 @@ import BoardText from "./components/BoardText";
 import Quotes from "./components/Quotes";
 import Ad from "./components/Ad";
 import { TeamPage } from "./components/Team";
-import { LOGO } from "./helpers/env";
+import {GITHUB_REPOS, LOGO} from "./helpers/env";
+import { CommitsPage } from "./components/Commits";
 
 export default class App extends Component {
   constructor(props) {
@@ -19,7 +20,6 @@ export default class App extends Component {
 
   next() {
     const params = new URLSearchParams(window.location.search);
-
     const display_internal = params.get("internal") == "true";
 
     switch (this.state.current) {
@@ -59,12 +59,27 @@ export default class App extends Component {
         });
         break;
       case "quotes":
-        this.setState({
-          // current: "team", REMOVED TEMPORARELY
-          current: "activities",
-        });
+        // this.setState({
+        //   // current: "team", REMOVED TEMPORARELY
+        //   current: "activities",
+        // });
+
+        // Dont go to commits page if no repositories are configured
+        if(GITHUB_REPOS === "") {
+          this.setState({
+            current: "activities",
+          });
+        } else {
+          this.setState({
+            current: "commits",
+          });
+        }
+
         break;
       case "team":
+        // Temporarily disabled
+        break;
+      case "commits":
         this.setState({
           current: "activities",
         });
@@ -114,6 +129,8 @@ export default class App extends Component {
         return <Quotes />;
       case "team":
         return <TeamPage />;
+      case "commits":
+        return <CommitsPage />;
       default:
         return;
     }

src/components/Commits.jsx

@@ -0,0 +1,97 @@
+import {octokit} from "../helpers/github";
+import {useQuery} from "../hooks/useQuery";
+import Poster from "./Poster";
+import {GITHUB_REPOS} from "../helpers/env.js";
+
+function getCommits(owner, repo) {
+  return useQuery(async () => {
+    const res = await octokit.rest.repos.listCommits({
+      owner: owner,
+      repo: repo,
+      per_page: 4,
+    });
+
+    return res.data.map((commit, index) => {
+      return ({
+        index: index,
+        message: commit.commit.message,
+        author: commit.commit.author.name ?? commit.commit.author.login,
+        repo: repo,
+        date: new Date(commit.commit.committer.date),
+        owner: owner
+      })
+    });
+  });
+}
+
+function getAllCommits() {
+  const v = GITHUB_REPOS
+    .split(" ")
+    .map(fIdent => {
+      const v = fIdent.split("/");
+      return getCommits(v[0], v[1]);
+    });
+
+  let commits = v
+    .map(v => v.data)
+    .flat();
+  commits.sort((a, b) => {
+    return b?.date?.getTime() - a?.date?.getTime();
+  });
+
+  const isLoading = v.map(v => v.isLoading);
+
+  return {
+    data: commits.slice(0, 5),
+    isLoading: isLoading.includes(true),
+  }
+}
+
+function formatTime(date) {
+  let hh = date.getHours();
+  let mm = date.getMinutes();
+
+  if (hh < 10) hh = '0' + hh;
+  if (mm < 10) mm = '0' + mm;
+
+  return `${hh}:${mm}`
+}
+
+function formatDate(date) {
+  let dd = date.getDate();
+  let mm = date.getMonth() + 1;
+  const yyyy = date.getFullYear();
+
+  if (dd < 10) dd = '0' + dd;
+  if (mm < 10) mm = '0' + mm;
+
+  return `${dd}-${mm}-${yyyy}`;
+}
+
+export const CommitsPage = () => {
+  const { data: commits, isLoading } = getAllCommits();
+  if (isLoading) return <> Loading... </>;
+
+  return (
+    <div>
+      <h1 className="commits-title"> Recent commits</h1>
+      <ul className="commits-list">
+        {commits?.map((commit) => {
+          return (
+            <>
+              <li key={commit.index} className="commits-list__item">
+                <p className="commits-list__item__message">
+                  {commit.message.split('\n')[0]}
+                </p>
+                <p className="commits-list__item__meta">
+                  On <em>{commit.owner}/{commit.repo}</em> by <strong>{commit.author}</strong> ({formatDate(commit.date)} {formatTime(commit.date)})
+                </p>
+              </li>
+            </>
+          );
+        })}
+      </ul>
+      <Poster poster="/commitcrowd.png" />
+    </div>
+  );
+};

src/helpers/env.js

@@ -3,5 +3,8 @@
 export const CONTENTFUL_SPACE_ID = import.meta.env.VITE_CONTENTFUL_SPACE_ID;
 export const CONTENTFUL_ACCESS_TOKEN = import.meta.env.VITE_CONTENTFUL_ACCESS_TOKEN;
 
+export const GITHUB_API_TOKEN = import.meta.env.VITE_GITHUB_API_TOKEN;
+export const GITHUB_REPOS = import.meta.env.VITE_GITHUB_REPOS;
+
 export const KOALA_ACTIVITY_ENDPOINT = import.meta.env.VITE_ACTIVITY_ENDPOINT;
-export const LOGO = import.meta.env.VITE_LOGO;
+export const LOGO = import.meta.env.VITE_LOGO;

src/helpers/github.js

@@ -1,4 +1,5 @@
 import { Octokit } from "octokit";
+import { GITHUB_API_TOKEN } from './env.js'
 
 
-export const octokit = new Octokit({ auth: "" });
+export const octokit = new Octokit({ auth: GITHUB_API_TOKEN });

src/index.css

@@ -62,6 +62,32 @@ body {
   position: fixed;
 }
 
+.commits-title,
+.commits-list {
+  margin-left: 50px;
+  margin-top: 50px;
+  padding: 0;
+  color: #dae1e3;
+  max-height: 70%;
+  width: 50%;
+}
+
+.commits-list > li {
+  padding: 0;
+}
+
+.commits-list__item__message {
+  font-size: 35px;
+  padding: 0;
+  margin: 0;
+}
+
+.commits-list__item__meta {
+  font-size: 25px;
+  padding: 0;
+  margin: 1rem 1rem 1rem 2rem;
+}
+
 .full-advertisement,
 .full-advertisement > .poster {
   position: absolute;