From a4066d579151c90f79e6e2052bfa5962df9a3049 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 14 Mar 2024 18:56:25 +1300
Subject: [PATCH] Added user history

---
 materialious/src/lib/Api/index.ts             | 12 ++++++
 materialious/src/routes/history/+page.svelte  | 40 +++++++++++++++++++
 materialious/src/routes/watch/[slug]/+page.ts |  7 +++-
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 materialious/src/routes/history/+page.svelte

diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts
index dc4d0365..d66f1a3e 100644
--- a/materialious/src/lib/Api/index.ts
+++ b/materialious/src/lib/Api/index.ts
@@ -88,3 +88,15 @@ export async function deleteUnsubscribe(authorId: string) {
     ...buildAuthHeaders()
   });
 }
+
+export async function getHistory(page: number = 1): Promise<string[]> {
+  const resp = await fetch(buildPath(`auth/history?page=${page}`), buildAuthHeaders());
+  return await resp.json();
+}
+
+export async function postHistory(videoId: string) {
+  await fetch(buildPath(`auth/history/${videoId}`), {
+    method: 'POST',
+    ...buildAuthHeaders()
+  });
+}
\ No newline at end of file
diff --git a/materialious/src/routes/history/+page.svelte b/materialious/src/routes/history/+page.svelte
new file mode 100644
index 00000000..8eb443a3
--- /dev/null
+++ b/materialious/src/routes/history/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { getHistory, getVideo } from '$lib/Api';
+	import type { VideoPlay } from '$lib/Api/model';
+	import PageLoading from '$lib/PageLoading.svelte';
+	import Thumbnail from '$lib/Thumbnail.svelte';
+	import { onMount } from 'svelte';
+	import { activePage } from '../../store';
+
+	activePage.set('history');
+
+	let history: VideoPlay[] = [];
+	let loaded = false;
+
+	async function loadPageHistory(page: number = 1) {
+		const videoIds = await getHistory(page);
+		for (const videoId of videoIds) {
+			history = [...history, await getVideo(videoId)];
+		}
+	}
+
+	onMount(async () => {
+		await loadPageHistory();
+		loaded = true;
+	});
+</script>
+
+{#if loaded}
+	<div class="page right active">
+		<div class="space"></div>
+		<div class="grid">
+			{#each history as video}
+				<div class="s12 m6 l2">
+					<Thumbnail {video} />
+				</div>
+			{/each}
+		</div>
+	</div>
+{:else}
+	<PageLoading />
+{/if}
diff --git a/materialious/src/routes/watch/[slug]/+page.ts b/materialious/src/routes/watch/[slug]/+page.ts
index baf2a087..8ab56bd2 100644
--- a/materialious/src/routes/watch/[slug]/+page.ts
+++ b/materialious/src/routes/watch/[slug]/+page.ts
@@ -1,7 +1,12 @@
-import { amSubscribed, getComments, getDislikes, getVideo } from '$lib/Api/index.js';
+import { amSubscribed, getComments, getDislikes, getVideo, postHistory } from '$lib/Api/index.js';
+import { get } from 'svelte/store';
+import { auth } from '../../../store';
 
 export async function load({ params }) {
   const video = await getVideo(params.slug);
+  if (get(auth)) {
+    postHistory(video.videoId);
+  }
   return {
     video: video,
     returnYTDislikes: await getDislikes(params.slug),