From 6641cbebc2bbdb19dd2939e52c8a259e6e9340f7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 7 Apr 2024 14:34:18 +0200
Subject: [PATCH] fix(project): save the last 6 projects in history, show only
 5 on desktop

The project grid on the home page with the recently visited projects now contains an even number of projects which makes for a much nicer grid (because it's now uniform).
---
 frontend/src/components/project/partials/ProjectCardGrid.vue | 4 ++++
 frontend/src/modules/projectHistory.test.ts                  | 5 +++--
 frontend/src/modules/projectHistory.ts                       | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/project/partials/ProjectCardGrid.vue b/frontend/src/components/project/partials/ProjectCardGrid.vue
index 4d692ec62..a66556c4d 100644
--- a/frontend/src/components/project/partials/ProjectCardGrid.vue
+++ b/frontend/src/components/project/partials/ProjectCardGrid.vue
@@ -63,6 +63,10 @@ const filteredProjects = computed(() => {
 
 	@media screen and (min-width: $widescreen) {
 		--project-grid-columns: 5;
+
+		.project-grid-item:nth-child(6) {
+			display: none;
+		}
 	}
 }
 
diff --git a/frontend/src/modules/projectHistory.test.ts b/frontend/src/modules/projectHistory.test.ts
index e180acd46..3f2ff3cff 100644
--- a/frontend/src/modules/projectHistory.test.ts
+++ b/frontend/src/modules/projectHistory.test.ts
@@ -26,7 +26,7 @@ test('store project in history', () => {
 	expect(saved).toBe('[{"id":1}]')
 })
 
-test('store only the last 5 projects in history', () => {
+test('store only the last 6 projects in history', () => {
 	let saved: string | null = null
 	vi.spyOn(localStorage, 'getItem').mockImplementation(() => saved)
 	vi.spyOn(localStorage, 'setItem').mockImplementation((key: string, projects: string) => {
@@ -39,7 +39,8 @@ test('store only the last 5 projects in history', () => {
 	saveProjectToHistory({id: 4})
 	saveProjectToHistory({id: 5})
 	saveProjectToHistory({id: 6})
-	expect(saved).toBe('[{"id":6},{"id":5},{"id":4},{"id":3},{"id":2}]')
+	saveProjectToHistory({id: 7})
+	expect(saved).toBe('[{"id":7},{"id":6},{"id":5},{"id":4},{"id":3},{"id":2}]')
 })
 
 test('don\'t store the same project twice', () => {
diff --git a/frontend/src/modules/projectHistory.ts b/frontend/src/modules/projectHistory.ts
index 2f0a0c668..25d94b7d3 100644
--- a/frontend/src/modules/projectHistory.ts
+++ b/frontend/src/modules/projectHistory.ts
@@ -20,6 +20,8 @@ function saveHistory(history: ProjectHistory[]) {
 	localStorage.setItem('projectHistory', JSON.stringify(history))
 }
 
+const MAX_SAVED_PROJECTS = 6
+
 export function saveProjectToHistory(project: ProjectHistory) {
 	const history: ProjectHistory[] = getHistory()
 
@@ -33,7 +35,7 @@ export function saveProjectToHistory(project: ProjectHistory) {
 	// Add the new project to the beginning of the project
 	history.unshift(project)
 
-	if (history.length > 5) {
+	if (history.length > MAX_SAVED_PROJECTS) {
 		history.pop()
 	}
 	saveHistory(history)