From 92c7c0d8a1a9054dea4b2e641276c935181684a4 Mon Sep 17 00:00:00 2001
From: activus-d <damilolamohammed2@hotmail.com>
Date: Thu, 9 Jan 2025 06:51:42 +0100
Subject: [PATCH 1/3] Add a toggle feature to the 'contributors' section to
 allow visitors to sort the list of contributors by the number of commits or
 the lastest commits

---
 ui/src/index.ts                               |  1 +
 .../(components)/contributors-client.tsx      | 34 +++++++++-
 .../open-source/(components)/get-commits.ts   | 17 ++++-
 .../open-source/(sections)/contributors.tsx   | 67 ++++++++++++++++++-
 4 files changed, 110 insertions(+), 9 deletions(-)

diff --git a/ui/src/index.ts b/ui/src/index.ts
index eedc35e21..f17f2a41f 100644
--- a/ui/src/index.ts
+++ b/ui/src/index.ts
@@ -27,3 +27,4 @@ export * from './components/table';
 export * from './components/tabs';
 export * from './components/tooltip';
 export * from './components/typography';
+export * from './components/toggle-group';
diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx b/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx
index cc1db2392..346623cb4 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Avatar, AvatarFallback, AvatarImage, Button, Typography } from '@socialincome/ui';
+import { ToggleGroup, ToggleGroupItem } from '@socialincome/ui';
 import { useState } from 'react';
 
 type ContributorProp = {
@@ -9,6 +10,13 @@ type ContributorProp = {
 	avatarUrl: string;
 };
 
+interface Contributor {
+	id: number;
+	name: string;
+	avatarUrl: string;
+	commits: number;
+}
+
 function Contributor({ name, commits, avatarUrl }: ContributorProp) {
 	return (
 		<article className="flex min-w-60 flex-row items-center py-2">
@@ -29,18 +37,31 @@ function Contributor({ name, commits, avatarUrl }: ContributorProp) {
 }
 
 export function OpenSourceContributorsClient({
-	contributors,
+	contributorsByCommitCount,
+	contributorsByLatestCommit,
 	heading,
 	totalContributors,
 }: {
-	contributors: Array<{ name: string; commits: number; avatarUrl: string; id: number }>;
+	contributorsByCommitCount: Contributor[];
+	contributorsByLatestCommit: Contributor[];
 	heading: string;
 	totalContributors: number;
 }) {
 	const [showAllContributors, setShowAllContributors] = useState(false);
+	const [selectedToggle, setSelectedToggle] = useState("commit count");
+	const [contributors, setContributors] = useState(contributorsByCommitCount);
 
 	const displayedContributors = showAllContributors ? contributors : contributors.slice(0, 16);
 
+	const handleToggleChange = (value: string) => {
+		setSelectedToggle(value);
+		if (value === "latest commit") {
+			setContributors(contributorsByLatestCommit);
+		} else {
+			setContributors(contributorsByCommitCount);
+		}
+	};
+
 	return (
 		<section className="flex flex-col justify-self-start">
 			<section>
@@ -49,8 +70,15 @@ export function OpenSourceContributorsClient({
 				</Typography>
 			</section>
 
+			<section className="flex mb-10">
+				<ToggleGroup type="single" value={selectedToggle} onValueChange={handleToggleChange}>
+					<ToggleGroupItem value="commit count">Commit Count</ToggleGroupItem>
+					<ToggleGroupItem value="latest commit">Latest Commit</ToggleGroupItem>
+				</ToggleGroup>
+			</section>
+
 			<section className="flex flex-wrap gap-4">
-				{displayedContributors.map((contributor) => (
+				{displayedContributors.map((contributor: Contributor) => (
 					<Contributor
 						key={contributor.id}
 						name={contributor.name}
diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts b/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts
index 6bbed4d4e..15165a8ef 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts
@@ -8,13 +8,13 @@ interface GitHubCommit {
 		id: number;
 		login: string;
 		avatar_url: string;
-	} | null;
+	};
 	commit: {
 		author: {
 			date: string;
 		};
 	};
-}
+};
 
 export async function getCommits() {
 	// Calculate the date 30 days ago from today
@@ -34,7 +34,6 @@ export async function getCommits() {
 
 	// Extract the last page number from the Link header to get the total commit count
 	const linkHeader = totalCommitsRes.headers.get('link');
-	// Default to 1 in case no Link header is provided
 	let totalCommits = 1;
 
 	if (linkHeader) {
@@ -48,8 +47,20 @@ export async function getCommits() {
 		console.warn('No Link header found; assuming a single commit.');
 	}
 
+	// Fetch total commit data
+	let totalCommitsData: GitHubCommit[] = [];
+	for (let page = 1; page <= Math.ceil(totalCommits / 100); page++) {
+		const pagedUrl = `https://api.github.com/repos/${owner}/${repo}/commits?per_page=100&page=${page}`;
+		const pagedRes = await fetchData(owner, repo, pagedUrl);
+		const pagedData: GitHubCommit[] = await pagedRes.json();
+		totalCommitsData = totalCommitsData.concat(pagedData);
+	}
+
+	// return the total number of commits,
+	// the total number of commits made in the last 30 days, and the total commit data
 	return {
 		totalCommits,
 		newCommits: recentCommits.length,
+		totalCommitsData,
 	};
 }
diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx b/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
index a85670028..7d7280cbe 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
@@ -1,12 +1,34 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { OpenSourceContributorsClient } from '../(components)/contributors-client';
+import { getCommits } from '../(components)/get-commits';
 import { getContributors } from '../(components)/get-contributors';
+import { OpenSourceContributorsClient } from '../(components)/contributors-client';
 
 type Metadata = {
 	heading: string;
 };
 
+interface GitHubCommit {
+	author: {
+		id: number;
+		login: string;
+		avatar_url: string;
+	};
+	commit: {
+		author: {
+			date: string;
+		};
+	};
+}
+
+interface CombinedContributor {
+	id: number;
+	name: string;
+	avatarUrl: string;
+	commits: number;
+	latestCommitDate: Date;
+}
+
 export async function OpenSourceContributors({ lang }: DefaultParams) {
 	const translator = await Translator.getInstance({
 		language: lang,
@@ -17,10 +39,49 @@ export async function OpenSourceContributors({ lang }: DefaultParams) {
 	const heading = metadata.heading;
 
 	const contributors = await getContributors();
-	const totalContributors = contributors.length;
+	const { totalCommitsData } = await getCommits();
+
+	// Collect the latest commit date for each contributor
+	const latestCommitDates = new Map<number, Date>();
+	totalCommitsData.forEach((commit: GitHubCommit) => {
+		if (commit.author?.id && commit.commit?.author?.date) {
+			const contributorId = commit.author.id;
+			const commitDate = new Date(commit.commit.author.date);
+			const existingDate = latestCommitDates.get(contributorId);
+			if (!existingDate || commitDate > existingDate) {
+				latestCommitDates.set(contributorId, commitDate);
+			}
+		}
+	});
+
+	// Combine contributors' data with their latest commit dates
+	const combinedContributors = contributors
+		.filter((contributor) => latestCommitDates.has(contributor.id))
+		.map((contributor) => ({
+			id: contributor.id,
+			name: contributor.name,
+			avatarUrl: contributor.avatarUrl,
+			commits: contributor.commits,
+			latestCommitDate: latestCommitDates.get(contributor.id) || new Date(0),
+		}));
+
+	const totalContributors = combinedContributors.length;
+
+	const contributorsByCommitCount = [...combinedContributors].sort(
+		(a: CombinedContributor, b: CombinedContributor) => b.commits - a.commits
+	);
+
+	const contributorsByLatestCommit = [...combinedContributors].sort(
+		(a: CombinedContributor, b: CombinedContributor) => b.latestCommitDate.getTime() - a.latestCommitDate.getTime()
+	);
 
 	return (
-		<OpenSourceContributorsClient contributors={contributors} heading={heading} totalContributors={totalContributors} />
+		<OpenSourceContributorsClient
+			contributorsByCommitCount={contributorsByCommitCount}
+			contributorsByLatestCommit={contributorsByLatestCommit}
+			heading={heading}
+			totalContributors={totalContributors}
+		/>
 	);
 }
 

From c2877116e882326051022cf16e5e98635ad3295b Mon Sep 17 00:00:00 2001
From: activus-d <activus-d@users.noreply.github.com>
Date: Fri, 10 Jan 2025 10:02:37 +0000
Subject: [PATCH 2/3] Prettified Code!

---
 ui/src/index.ts                                 |  2 +-
 .../(components)/contributors-client.tsx        | 17 ++++++++++++-----
 .../open-source/(components)/get-commits.ts     |  2 +-
 .../open-source/(sections)/contributors.tsx     |  6 +++---
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/ui/src/index.ts b/ui/src/index.ts
index f17f2a41f..31434f8aa 100644
--- a/ui/src/index.ts
+++ b/ui/src/index.ts
@@ -25,6 +25,6 @@ export * from './components/separator';
 export * from './components/switch';
 export * from './components/table';
 export * from './components/tabs';
+export * from './components/toggle-group';
 export * from './components/tooltip';
 export * from './components/typography';
-export * from './components/toggle-group';
diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx b/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx
index 346623cb4..148279334 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(components)/contributors-client.tsx
@@ -1,7 +1,14 @@
 'use client';
 
-import { Avatar, AvatarFallback, AvatarImage, Button, Typography } from '@socialincome/ui';
-import { ToggleGroup, ToggleGroupItem } from '@socialincome/ui';
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+	Button,
+	ToggleGroup,
+	ToggleGroupItem,
+	Typography,
+} from '@socialincome/ui';
 import { useState } from 'react';
 
 type ContributorProp = {
@@ -48,14 +55,14 @@ export function OpenSourceContributorsClient({
 	totalContributors: number;
 }) {
 	const [showAllContributors, setShowAllContributors] = useState(false);
-	const [selectedToggle, setSelectedToggle] = useState("commit count");
+	const [selectedToggle, setSelectedToggle] = useState('commit count');
 	const [contributors, setContributors] = useState(contributorsByCommitCount);
 
 	const displayedContributors = showAllContributors ? contributors : contributors.slice(0, 16);
 
 	const handleToggleChange = (value: string) => {
 		setSelectedToggle(value);
-		if (value === "latest commit") {
+		if (value === 'latest commit') {
 			setContributors(contributorsByLatestCommit);
 		} else {
 			setContributors(contributorsByCommitCount);
@@ -70,7 +77,7 @@ export function OpenSourceContributorsClient({
 				</Typography>
 			</section>
 
-			<section className="flex mb-10">
+			<section className="mb-10 flex">
 				<ToggleGroup type="single" value={selectedToggle} onValueChange={handleToggleChange}>
 					<ToggleGroupItem value="commit count">Commit Count</ToggleGroupItem>
 					<ToggleGroupItem value="latest commit">Latest Commit</ToggleGroupItem>
diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts b/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts
index 15165a8ef..f949d37d9 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(components)/get-commits.ts
@@ -14,7 +14,7 @@ interface GitHubCommit {
 			date: string;
 		};
 	};
-};
+}
 
 export async function getCommits() {
 	// Calculate the date 30 days ago from today
diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx b/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
index 7d7280cbe..2d1dce68b 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(sections)/contributors.tsx
@@ -1,8 +1,8 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { OpenSourceContributorsClient } from '../(components)/contributors-client';
 import { getCommits } from '../(components)/get-commits';
 import { getContributors } from '../(components)/get-contributors';
-import { OpenSourceContributorsClient } from '../(components)/contributors-client';
 
 type Metadata = {
 	heading: string;
@@ -68,11 +68,11 @@ export async function OpenSourceContributors({ lang }: DefaultParams) {
 	const totalContributors = combinedContributors.length;
 
 	const contributorsByCommitCount = [...combinedContributors].sort(
-		(a: CombinedContributor, b: CombinedContributor) => b.commits - a.commits
+		(a: CombinedContributor, b: CombinedContributor) => b.commits - a.commits,
 	);
 
 	const contributorsByLatestCommit = [...combinedContributors].sort(
-		(a: CombinedContributor, b: CombinedContributor) => b.latestCommitDate.getTime() - a.latestCommitDate.getTime()
+		(a: CombinedContributor, b: CombinedContributor) => b.latestCommitDate.getTime() - a.latestCommitDate.getTime(),
 	);
 
 	return (

From 391e3d3e4bee0dff1778e0ac275ffb97fa94bc62 Mon Sep 17 00:00:00 2001
From: activus-d <damilolamohammed2@hotmail.com>
Date: Fri, 10 Jan 2025 12:17:10 +0100
Subject: [PATCH 3/3] fix line cut off in some browsers

---
 .../[region]/(website)/open-source/(components)/issue.tsx       | 2 +-
 .../(website)/open-source/(components)/issues-client.tsx        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(components)/issue.tsx b/website/src/app/[lang]/[region]/(website)/open-source/(components)/issue.tsx
index 8c56dcea6..4f5a1ef05 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(components)/issue.tsx
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(components)/issue.tsx
@@ -17,7 +17,7 @@ interface IssueProps extends Pick<Issue, 'title' | 'url'> {
 export function Issue({ title, url, text }: IssueProps) {
 	return (
 		<TableRow className="p-5 hover:bg-transparent">
-			<TableCell className="text-xl">{title}</TableCell>
+			<TableCell className="max-w-80 text-xl">{title}</TableCell>
 			<TableCell className="text-right text-xl">
 				<Button asChild variant="link" className="hover:underline">
 					<Link href={url} target="_blank" rel="noopener noreferrer">
diff --git a/website/src/app/[lang]/[region]/(website)/open-source/(components)/issues-client.tsx b/website/src/app/[lang]/[region]/(website)/open-source/(components)/issues-client.tsx
index f8fd46e11..bdc77e761 100644
--- a/website/src/app/[lang]/[region]/(website)/open-source/(components)/issues-client.tsx
+++ b/website/src/app/[lang]/[region]/(website)/open-source/(components)/issues-client.tsx
@@ -53,6 +53,7 @@ export function IssueClient({ title, issues, labels, tableHeader, filterText, li
 					<TableHeader>
 						<TableRow className="border-foreground p-5 hover:bg-transparent">
 							<TableCell className="text-xl">{tableHeader}</TableCell>
+							<TableCell className="text-xl"></TableCell>
 						</TableRow>
 					</TableHeader>
 					<TableBody>