From 512739773813eb3b50e28da03664166d15abd90f Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Thu, 12 Jan 2023 16:00:29 +0800
Subject: [PATCH] #134 prev next buttons in topbar are working due to recorded
 path history store

---
 .../gui/src/components/TopBar/TopBar.svelte   | 15 ++++--
 modules/gui/src/libs/stores/nav.ts            | 51 +++++++++++++++++--
 modules/gui/src/routes/+layout.svelte         | 10 ++++
 modules/gui/src/routes/+page.svelte           |  2 -
 modules/gui/src/routes/cli/+page.svelte       |  2 -
 .../gui/src/routes/documentation/+page.svelte |  2 -
 modules/gui/src/routes/packages/+page.svelte  |  2 -
 .../src/routes/packages/[slug]/+page.svelte   |  3 +-
 modules/gui/src/routes/profile/+page.svelte   |  2 -
 9 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/modules/gui/src/components/TopBar/TopBar.svelte b/modules/gui/src/components/TopBar/TopBar.svelte
index be28f9c..26e1d39 100644
--- a/modules/gui/src/components/TopBar/TopBar.svelte
+++ b/modules/gui/src/components/TopBar/TopBar.svelte
@@ -7,7 +7,7 @@
 
 	import ProfileNavButton from './ProfileNavButton.svelte';
 
-	let backLink = navStore.backLink;
+	let { nextPath, prevPath } = navStore;
 
 	const onSearch = (term: string) => {
 		searchStore.search(term);
@@ -23,9 +23,9 @@
 	<a href="/">
 		<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
 	</a>
-	<ul id="PrevNextButtons" class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
-		<a href={$backLink} class={currentPath !== '/' ? 'active' : ''}>&#8592</a>
-		<a href={$backLink} class={currentPath === '/' ? 'active' : ''}>&#8594</a>
+	<ul class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
+		<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
+		<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
 	</ul>
 	<SearchInput
 		class="flex-grow border border-none py-4"
@@ -64,7 +64,12 @@
 		color: white;
 	}
 
-	#PrevNextButtons a.active {
+	ul button {
+		pointer-events: none;
+	}
+
+	ul button.active {
 		color: white;
+		pointer-events: all;
 	}
 </style>
diff --git a/modules/gui/src/libs/stores/nav.ts b/modules/gui/src/libs/stores/nav.ts
index b8d3729..5f441dd 100644
--- a/modules/gui/src/libs/stores/nav.ts
+++ b/modules/gui/src/libs/stores/nav.ts
@@ -1,10 +1,55 @@
 import { writable } from 'svelte/store';
+import { goto } from '$app/navigation';
 
 export default function initNavStore() {
-	const backLink = writable<string>('/');
+	const historyStore = writable<string[]>(['/']);
+	let history = ['/'];
+
+	historyStore.subscribe((v) => (history = v));
+
+	const prevPathStore = writable<string>('');
+	const nextPathStore = writable<string>('');
+
+	let currentIndex = 0; // if non next/back click
+
+	let isMovingNext = false;
+	let isMovingBack = false;
 
 	return {
-		backLink,
-		set: (newlink: string) => backLink.set(newlink)
+		historyStore,
+		prevPath: prevPathStore,
+		nextPath: nextPathStore,
+		next: () => {
+			if (currentIndex < history.length - 1) {
+				isMovingNext = true;
+				goto(history[currentIndex + 1]);
+				prevPathStore.set(history[currentIndex]);
+				currentIndex++;
+				if (currentIndex >= history.length - 1) nextPathStore.set('');
+			}
+		},
+		back: () => {
+			if (currentIndex > 0) {
+				isMovingBack = true;
+				goto(history[currentIndex - 1]);
+				nextPathStore.set(history[currentIndex]);
+				currentIndex--;
+				if (currentIndex === 0) prevPathStore.set('');
+			}
+		},
+		setNewPath: (newNextPath: string, newPrevPath: string) => {
+			const oldCurrentPath = history[currentIndex];
+			const isNavArrows = isMovingBack || isMovingNext;
+			if (!isNavArrows && newNextPath !== oldCurrentPath) {
+				historyStore.update((history) => {
+					const cleanHistory = history.filter((_v, i) => i <= currentIndex);
+					currentIndex = cleanHistory.length;
+					prevPathStore.set(cleanHistory[currentIndex - 1]);
+					return [...cleanHistory, newNextPath];
+				});
+			}
+			isMovingNext = false;
+			isMovingBack = false;
+		}
 	};
 }
diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte
index f349f5b..9b6af43 100644
--- a/modules/gui/src/routes/+layout.svelte
+++ b/modules/gui/src/routes/+layout.svelte
@@ -2,14 +2,24 @@
 <script lang="ts">
 	import '$appcss';
 	import { navigating } from '$app/stores';
+	import { afterNavigate } from '$app/navigation';
 	import TopBar from '$components/TopBar/TopBar.svelte';
 	import FooterLinks from '$components/FooterLinks/FooterLinks.svelte';
+	import { navStore } from '$libs/stores';
 
 	import SearchPopupResults from '$components/SearchPopupResults/SearchPopupResults.svelte';
 
 	let view: HTMLElement;
 
 	$: if ($navigating) view.scrollTop = 0;
+
+	afterNavigate(({ from, to }) => {
+		if (to?.route.id) {
+			const nextPath = to.url.href.replace(to.url.origin, '');
+			const fromPath = from?.url.href.replace(from.url.origin, '');
+			navStore.setNewPath(nextPath, fromPath || '/');
+		}
+	});
 </script>
 
 <div id="main-layout" class="w-full">
diff --git a/modules/gui/src/routes/+page.svelte b/modules/gui/src/routes/+page.svelte
index cb33f10..75b6b42 100644
--- a/modules/gui/src/routes/+page.svelte
+++ b/modules/gui/src/routes/+page.svelte
@@ -1,14 +1,12 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
 	import '$appcss';
-	import { backLink } from '$libs/stores';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
 	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
 	import TopPackages from '$components/TopPackages/TopPackages.svelte';
 	import News from '$components/News/News.svelte';
 	import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
-	backLink.set('');
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/cli/+page.svelte b/modules/gui/src/routes/cli/+page.svelte
index b0550a4..f3490c3 100644
--- a/modules/gui/src/routes/cli/+page.svelte
+++ b/modules/gui/src/routes/cli/+page.svelte
@@ -3,8 +3,6 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import CliBanner from '$components/CliBanner/CliBanner.svelte';
 	import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/documentation/+page.svelte b/modules/gui/src/routes/documentation/+page.svelte
index 857b921..3d72e17 100644
--- a/modules/gui/src/routes/documentation/+page.svelte
+++ b/modules/gui/src/routes/documentation/+page.svelte
@@ -3,8 +3,6 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
 	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/packages/+page.svelte b/modules/gui/src/routes/packages/+page.svelte
index dae8d10..8b184ef 100644
--- a/modules/gui/src/routes/packages/+page.svelte
+++ b/modules/gui/src/routes/packages/+page.svelte
@@ -2,8 +2,6 @@
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index 0e83113..cdefed0 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-	import { navStore, packagesReviewStore } from '$libs/stores';
+	import { packagesReviewStore } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
 	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
 	import type { Review } from '@tea/ui/types';
 	import SuggestedPackages from '$components/SuggestedPackages/SuggestedPackages.svelte';
-	navStore.set('/packages');
 
 	/** @type {import('./$types').PageData} */
 	export let data;
diff --git a/modules/gui/src/routes/profile/+page.svelte b/modules/gui/src/routes/profile/+page.svelte
index a3db7d2..94e6ce3 100644
--- a/modules/gui/src/routes/profile/+page.svelte
+++ b/modules/gui/src/routes/profile/+page.svelte
@@ -5,8 +5,6 @@
 	import Preflight from '$components/Preflight/Preflight.svelte';
 	import Badges from '$components/Badges/Badges.svelte';
 	import InstalledPackages from '$components/InstalledPackages/InstalledPackages.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>