refactor: group commits by date and project

Yes, this means nested looping. But it also allows me to separate the
commits into a shape I need. I feel like this should not happen in
Vervis as it is something I as a consument of the data need.

I could have done this inside of the template but it feels ugly.

The main drawback I have with the current approach is that Svelte is not
capable of looping over objects so I have to turn that into a list of
nested Arrays. I might have done that in the function already but it is
easier to look up keys on an Object that to sift through Arrays.

The current implementation works. The next step is to extract it into a
component, test it and then I can refactor further.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/lib/components/templates/Profile.svelte

@@ -74,6 +74,31 @@ You should have received a copy of the GNU Affero General Public License along w
 			})
 			.flat(1);
 	};
+
+	/* Since I group commits by date and project I need to create a structure. */
+	const groupCommitsByDateAndProject = function (commitsMap) {
+		const groupByDateAndProject = {};
+		commitsMap
+			// Some commits couldn't be fetched from Vervis
+			.filter((commit) => Boolean(commit.id))
+			.forEach((commit) => {
+				const { committed, context } = commit;
+
+				// Ensure key exists
+				if (!groupByDateAndProject[committed]) {
+					groupByDateAndProject[committed] = {};
+				}
+
+				// Ensure Array exists
+				if (!groupByDateAndProject[committed][context]) {
+					groupByDateAndProject[committed][context] = [];
+				}
+
+				groupByDateAndProject[committed][context].push(commit);
+			});
+
+		return groupByDateAndProject;
+	};
 </script>
 
 <section class="w-full mx-auto flex px-8 pt-8">
@@ -199,6 +224,8 @@ You should have received a copy of the GNU Affero General Public License along w
 			</h2>
 			<ul>
 				{#if data?.user?.commitsMap}
+					{#each Object.entries(groupCommitsByDateAndProject(data.user.commitsMap)) as commitsByDateAndProject}
+						{#each Object.entries(commitsByDateAndProject[1]) as commitsByProject}
 							<!-- Commit day -->
 							<li>
 								<!-- Indent the whole block by 6 -->
@@ -206,28 +233,27 @@ You should have received a copy of the GNU Affero General Public License along w
 									<!-- Commit date -->
 									<!-- But align the icon to History heading -->
 									<div class="flex gap-6 -ms-6">
-								<!-- I don't group commits by date at the moment. -->
 										<span class="bg-white">
 											<GitCommit24 fill="currentColor" />
 										</span>
 										<!-- And align the date with the commits below -->
 										<span class="flex gap-6 -ms-3">
-									<!-- Manually remove the failed commit map fetch from the equation -->
 											<!-- Pluralisation: https://lokalise.com/blog/svelte-i18n/#Pluralization_with_Svelte_i18n -->
-									{$date(new Date(data.user.commitsMap[0].created))} - {$_(
+											{$date(new Date(commitsByDateAndProject[0]))} - {$_(
 												'page.profile.history.activities.commits.number',
-										{ values: { number: data.user.commitsMap.length - 1 } }
+												{ values: { number: commitsByProject[1].length } }
 											)}
 											<span class="flex gap-2">
 												<Repo24 fill="currentColor" />
-										<!-- Pick a repo with known commits -->
+												{data.user.followingsMap.find(
-										{data.user.followingsMap[3].name}
+													(following) => following.id === commitsByProject[0]
+												).name}
 											</span>
 										</span>
 									</div>
 									<!-- Commits -->
 									<ul>
-								{#each data.user.commitsMap as commit}
+										{#each commitsByProject[1] as commit}
 											{#if commit.name}
 												<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
 													<!-- Commit body -->
@@ -249,7 +275,9 @@ You should have received a copy of the GNU Affero General Public License along w
 															>
 																<Copy16 fill="currentColor" />
 																<span class="sr-only"
-															>{$_('page.profile.history.activities.commits.actions.copy')}</span
+																	>{$_(
+																		'page.profile.history.activities.commits.actions.copy'
+																	)}</span
 																>
 															</button>
 															<!-- Since I cannot successfully define font-mono here, enforce a minimum width for equally sized buttons -->
@@ -268,7 +296,9 @@ You should have received a copy of the GNU Affero General Public License along w
 															>
 																<FileDirectory16 fill="currentColor" />
 																<span class="sr-only"
-															>{$_('page.profile.history.activities.commits.actions.browse')}</span
+																	>{$_(
+																		'page.profile.history.activities.commits.actions.browse'
+																	)}</span
 																>
 															</button>
 														</div>
@@ -279,6 +309,8 @@ You should have received a copy of the GNU Affero General Public License along w
 									</ul>
 								</div>
 							</li>
+						{/each}
+					{/each}
 				{:else}
 					<li class="flex flex-col ltr:border-l-2 rtl:border-r-2 ms-2">
 						<!-- Commit day -->