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>
This commit is contained in:
André Jaenisch
parent
e9c76418eb
commit
5753e14721
1 changed files with 112 additions and 80 deletions
|
|
@ -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,86 +224,93 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</h2>
|
||||
<ul>
|
||||
{#if data?.user?.commitsMap}
|
||||
<!-- Commit day -->
|
||||
<li>
|
||||
<!-- Indent the whole block by 6 -->
|
||||
<div class="flex flex-col gap-6 ps-6">
|
||||
<!-- 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))} - {$_(
|
||||
'page.profile.history.activities.commits.number',
|
||||
{ values: { number: data.user.commitsMap.length - 1 } }
|
||||
)}
|
||||
<span class="flex gap-2">
|
||||
<Repo24 fill="currentColor" />
|
||||
<!-- Pick a repo with known commits -->
|
||||
{data.user.followingsMap[3].name}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Commits -->
|
||||
<ul>
|
||||
{#each data.user.commitsMap as commit}
|
||||
{#if commit.name}
|
||||
<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
|
||||
<!-- Commit body -->
|
||||
<div class="flex w-full justify-between gap-4 border border-surface-100">
|
||||
<!-- Detail text -->
|
||||
<div class="flex flex-col flex-1">
|
||||
<span class="text-surface-500">{commit.name}</span>
|
||||
<span class="text-surface-400"
|
||||
>{$_('page.profile.history.activities.commits.relative_time', {
|
||||
values: { relativeTime: $date(new Date(commit.committed)) }
|
||||
})}</span
|
||||
>
|
||||
</div>
|
||||
<!-- SHA -->
|
||||
<div class="flex">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon border border-surface-100 rounded bg-white self-start"
|
||||
>
|
||||
<Copy16 fill="currentColor" />
|
||||
<span class="sr-only"
|
||||
>{$_('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 -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn border border-surface-100 rounded bg-white min-w-32 self-start"
|
||||
>
|
||||
{commit.hash.slice(0, 8)}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Browse -->
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon border border-surface-100 rounded bg-white"
|
||||
>
|
||||
<FileDirectory16 fill="currentColor" />
|
||||
<span class="sr-only"
|
||||
>{$_('page.profile.history.activities.commits.actions.browse')}</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{#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 -->
|
||||
<div class="flex flex-col gap-6 ps-6">
|
||||
<!-- Commit date -->
|
||||
<!-- But align the icon to History heading -->
|
||||
<div class="flex gap-6 -ms-6">
|
||||
<span class="bg-white">
|
||||
<GitCommit24 fill="currentColor" />
|
||||
</span>
|
||||
<!-- And align the date with the commits below -->
|
||||
<span class="flex gap-6 -ms-3">
|
||||
<!-- Pluralisation: https://lokalise.com/blog/svelte-i18n/#Pluralization_with_Svelte_i18n -->
|
||||
{$date(new Date(commitsByDateAndProject[0]))} - {$_(
|
||||
'page.profile.history.activities.commits.number',
|
||||
{ values: { number: commitsByProject[1].length } }
|
||||
)}
|
||||
<span class="flex gap-2">
|
||||
<Repo24 fill="currentColor" />
|
||||
{data.user.followingsMap.find(
|
||||
(following) => following.id === commitsByProject[0]
|
||||
).name}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Commits -->
|
||||
<ul>
|
||||
{#each commitsByProject[1] as commit}
|
||||
{#if commit.name}
|
||||
<li class="ltr:border-l-2 rtl:border-r-2 ms-2">
|
||||
<!-- Commit body -->
|
||||
<div class="flex w-full justify-between gap-4 border border-surface-100">
|
||||
<!-- Detail text -->
|
||||
<div class="flex flex-col flex-1">
|
||||
<span class="text-surface-500">{commit.name}</span>
|
||||
<span class="text-surface-400"
|
||||
>{$_('page.profile.history.activities.commits.relative_time', {
|
||||
values: { relativeTime: $date(new Date(commit.committed)) }
|
||||
})}</span
|
||||
>
|
||||
</div>
|
||||
<!-- SHA -->
|
||||
<div class="flex">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon border border-surface-100 rounded bg-white self-start"
|
||||
>
|
||||
<Copy16 fill="currentColor" />
|
||||
<span class="sr-only"
|
||||
>{$_(
|
||||
'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 -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn border border-surface-100 rounded bg-white min-w-32 self-start"
|
||||
>
|
||||
{commit.hash.slice(0, 8)}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Browse -->
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon border border-surface-100 rounded bg-white"
|
||||
>
|
||||
<FileDirectory16 fill="currentColor" />
|
||||
<span class="sr-only"
|
||||
>{$_(
|
||||
'page.profile.history.activities.commits.actions.browse'
|
||||
)}</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
{/each}
|
||||
{:else}
|
||||
<li class="flex flex-col ltr:border-l-2 rtl:border-r-2 ms-2">
|
||||
<!-- Commit day -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue