From ecb7badaf390087868644ca6bc4dd8a21b93e111 Mon Sep 17 00:00:00 2001
From: Robert Goniszewski <robertgoniszewski@outlook.com>
Date: Wed, 20 Nov 2024 21:26:11 +0100
Subject: [PATCH] feat(import): implement WIP bookmark import execution with
 metadata support

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
---
 run-dev.sh                                    |   1 +
 .../BulkListItem/BulkListItem.svelte          |  79 +++++-----
 .../EditBookmarkForm/EditBookmarkForm.svelte  |  10 +-
 src/lib/stores/import-bookmarks.store.ts      |   4 +
 src/lib/types/BookmarkImport.type.ts          |  13 +-
 .../utils/bookmark-import/execute-import.ts   | 139 ++++++++++++++++++
 src/routes/api/bookmarks/import/+server.ts    |  54 +++++++
 src/routes/import/html/+page.svelte           |  76 +++++++++-
 8 files changed, 336 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/utils/bookmark-import/execute-import.ts
 create mode 100644 src/routes/api/bookmarks/import/+server.ts

diff --git a/run-dev.sh b/run-dev.sh
index 0a3a9a5..c1663c9 100755
--- a/run-dev.sh
+++ b/run-dev.sh
@@ -2,6 +2,7 @@
 
 trap 'echo "Received SIGINT or SIGTERM. Exiting..." >&2; exit 1' SIGINT SIGTERM
 
+bun --bun run run-migrations
 bun --bun run dev 
 
 kill -- -$$
\ No newline at end of file
diff --git a/src/lib/components/BulkListItem/BulkListItem.svelte b/src/lib/components/BulkListItem/BulkListItem.svelte
index 42368a0..210952a 100644
--- a/src/lib/components/BulkListItem/BulkListItem.svelte
+++ b/src/lib/components/BulkListItem/BulkListItem.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 import { importBookmarkStore } from '$lib/stores/import-bookmarks.store';
+import { createSlug } from '$lib/utils/create-slug';
 import {
 	IconCircleDashedCheck,
 	IconExclamationCircle,
@@ -49,41 +50,51 @@ const onRemoveItem = () => {
 		</label>
 	</th>
 	<td>
-		<div class="flex items-center gap-3">
-			<div class="avatar">
-				<div class="mask mask-squircle h-12 w-12">
-					{#if icon}
-						<img src={icon} alt="Avatar Tailwind CSS Component" />
-					{:else}
-						<IconPhotoX class="m-2 h-8 w-8 opacity-80" />
-					{/if}
+		<div class="flex flex-col gap-1">
+			<div class="flex items-center gap-3">
+				<div class="avatar">
+					<div class="mask mask-squircle h-12 w-12">
+						{#if icon}
+							<img src={icon} alt="Avatar Tailwind CSS Component" />
+						{:else}
+							<IconPhotoX class="m-2 h-8 w-8 opacity-80" />
+						{/if}
+					</div>
 				</div>
-			</div>
-			<div class="max-w-lg">
-				<div class="tooltip" data-tip={url}>
-					<a href={url} target="_blank" class="font-bold">
-						{urlObj.pathname !== '/'
-							? `${urlObj.hostname}/.../${urlObj.pathname.slice(-5)}`
-							: urlObj.hostname}
-					</a>
-				</div>
-				<div class="flex items-center gap-1 text-sm tracking-tight text-secondary">
-					{new URL(url).hostname.replace(/^www\./, '')}
-					{#if metadataFetched}
-						<div class="tooltip" data-tip="Metadata fetched">
-							<IconCircleDashedCheck class="h-4 w-4 text-success" />
-						</div>
-					{:else if isLoading}
-						<div class="tooltip" data-tip="Loading metadata">
-							<IconStopwatch class="h-4 w-4 text-warning" />
-						</div>
-					{:else}
-						<div class="tooltip" data-tip="Failed to fetch metadata">
-							<IconExclamationCircle class="h-4 w-4 text-error" />
-						</div>
-					{/if}
+				<div class="max-w-lg">
+					<div class="tooltip" data-tip={url}>
+						<a href={url} target="_blank" class="font-bold">
+							{urlObj.pathname !== '/'
+								? `${urlObj.hostname}/.../${urlObj.pathname.slice(-5)}`
+								: urlObj.hostname}
+						</a>
+					</div>
+					<div class="flex items-center gap-1 text-sm tracking-tight text-secondary">
+						{new URL(url).hostname.replace(/^www\./, '')}
+						{#if metadataFetched}
+							<div class="tooltip" data-tip="Metadata fetched">
+								<IconCircleDashedCheck class="h-4 w-4 text-success" />
+							</div>
+						{:else if isLoading}
+							<div class="tooltip" data-tip="Loading metadata">
+								<IconStopwatch class="h-4 w-4 text-warning" />
+							</div>
+						{:else}
+							<div class="tooltip" data-tip="Failed to fetch metadata">
+								<IconExclamationCircle class="h-4 w-4 text-error" />
+							</div>
+						{/if}
+					</div>
 				</div>
 			</div>
+			<div class="ml-2 flex gap-1 text-sm">
+				{#if metadata?.bookmarkTags?.length}
+					<span class="font-sans text-xs">Tags: </span>
+				{/if}
+				{#each metadata?.bookmarkTags || [] as tag (tag.value)}
+					<a href={`/tags/${createSlug(tag.value)}`} class="link font-sans text-xs">{tag.value}</a>
+				{/each}
+			</div>
 		</div>
 	</td>
 	<td class="max-w-xs">
@@ -91,7 +102,9 @@ const onRemoveItem = () => {
 			<span title={title} class="line-clamp-2">{title}</span>
 		</div>
 	</td>
-	<td><span class="link hover:link-secondary">{category}</span></td>
+	<td
+		><a class="link hover:link-secondary" href={`/categories/${createSlug(category)}`}>{category}</a
+		></td>
 	<th>
 		<button class="btn btn-ghost btn-xs text-secondary" on:click={onEditItem}>edit</button>
 		<button class="btn btn-ghost btn-xs text-error" on:click={onRemoveItem}>remove</button>
diff --git a/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte b/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
index 9b36ea6..b19522d 100644
--- a/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
+++ b/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
@@ -9,6 +9,7 @@ import { writable, type Writable } from 'svelte/store';
 
 import { invalidate } from '$app/navigation';
 import { editBookmarkCategoriesStore, editBookmarkStore } from '$lib/stores/edit-bookmark.store';
+import { importBookmarkStore } from '$lib/stores/import-bookmarks.store';
 import { searchEngine } from '$lib/stores/search.store';
 import type { Bookmark, BookmarkEdit } from '$lib/types/Bookmark.type';
 import { updateBookmarkInSearchIndex } from '$lib/utils/search';
@@ -115,9 +116,14 @@ function handleSubmit() {
 	if (isImportedBookmark($bookmark) && $bookmark.imported) {
 		const formData = new FormData(form);
 		let rawData = Object.fromEntries(formData as any);
-		console.log('rawData', rawData);
 		delete rawData.tags;
-		editBookmarkStore.set({
+		// editBookmarkStore.set({
+		// 	...$bookmark,
+		// 	...rawData,
+		// 	category: JSON.parse(rawData.category)?.label,
+		// 	bookmarkTags: $bookmarkTags
+		// });
+		importBookmarkStore.updateItem(+$bookmark.id, {
 			...$bookmark,
 			...rawData,
 			category: JSON.parse(rawData.category)?.label,
diff --git a/src/lib/stores/import-bookmarks.store.ts b/src/lib/stores/import-bookmarks.store.ts
index ce74ba2..cda6853 100644
--- a/src/lib/stores/import-bookmarks.store.ts
+++ b/src/lib/stores/import-bookmarks.store.ts
@@ -10,6 +10,10 @@ export const importBookmarkStore = {
 	set,
 	update,
 	addItem: (item: BulkListItem) => update((items) => [...items, item]),
+	updateItem: (itemId: number, updatedItem: BulkListItem) =>
+		update((items) =>
+			items.map((item) => (item.id === itemId ? { ...item, ...updatedItem } : item))
+		),
 	removeItem: (itemId: number) => update((items) => items.filter((item) => item.id !== itemId)),
 	selectItem: (itemId: number) =>
 		update((items) => items.map((item) => ({ ...item, selected: item.id === itemId }))),
diff --git a/src/lib/types/BookmarkImport.type.ts b/src/lib/types/BookmarkImport.type.ts
index 786c538..f4daa89 100644
--- a/src/lib/types/BookmarkImport.type.ts
+++ b/src/lib/types/BookmarkImport.type.ts
@@ -1,4 +1,4 @@
-import type { Bookmark } from './Bookmark.type';
+import type { Bookmark, BookmarkEdit } from './Bookmark.type';
 import type { Category } from './Category.type';
 
 export type ImportedBookmark = Pick<Bookmark, 'title' | 'url' | 'description'> & {
@@ -16,3 +16,14 @@ export type ImportResult = {
 	categories: ImportedCategory[];
 	tags: ImportedTag[];
 };
+
+export type ImportExecutionResult = {
+	total: number;
+	successful: number;
+	failed: number;
+	results: Array<{
+		success: boolean;
+		bookmark: Bookmark;
+		error?: string;
+	}>;
+};
diff --git a/src/lib/utils/bookmark-import/execute-import.ts b/src/lib/utils/bookmark-import/execute-import.ts
new file mode 100644
index 0000000..4eb20d5
--- /dev/null
+++ b/src/lib/utils/bookmark-import/execute-import.ts
@@ -0,0 +1,139 @@
+import type { BookmarkEdit } from '$lib/types/Bookmark.type';
+import { db } from '$lib/database/db';
+import {
+    bookmarkSchema, bookmarksToTagsSchema, categorySchema, tagSchema
+} from '$lib/database/schema';
+import { eq } from 'drizzle-orm';
+
+import { createSlug } from '../create-slug';
+
+import type { ImportExecutionResult } from '$lib/types/BookmarkImport.type';
+
+export async function executeImport(
+	bookmarks: BookmarkEdit[],
+	userId: number
+): Promise<ImportExecutionResult> {
+	const categoryCache = new Map<string, number>();
+	const tagCache = new Map<string, number>();
+
+	async function getOrCreateCategory(categoryPath: string, userId: number) {
+		if (categoryCache.has(categoryPath)) {
+			return categoryCache.get(categoryPath);
+		}
+
+		const parts = categoryPath.split('/').filter(Boolean);
+		let parentId: number | null = null;
+		let currentPath = '';
+
+		for (const part of parts) {
+			currentPath += `/${part}`;
+			const slug = createSlug(part);
+
+			let category = await db.query.categorySchema.findFirst({
+				where: eq(categorySchema.slug, slug)
+			});
+
+			if (!category) {
+				const [newCategory] = await db
+					.insert(categorySchema)
+					.values({
+						name: part,
+						slug,
+						ownerId: userId,
+						parentId,
+						created: new Date(),
+						updated: new Date()
+					})
+					.returning();
+				category = newCategory as typeof categorySchema.$inferSelect;
+			}
+
+			categoryCache.set(currentPath, category.id);
+			parentId = category.id;
+		}
+
+		return parentId;
+	}
+	async function getOrCreateTag(tagName: string, userId: number) {
+		if (tagCache.has(tagName)) {
+			return tagCache.get(tagName);
+		}
+
+		const slug = createSlug(tagName);
+		let tag = await db.query.tagSchema.findFirst({
+			where: eq(tagSchema.slug, slug)
+		});
+
+		if (!tag) {
+			const [newTag] = await db
+				.insert(tagSchema)
+				.values({
+					name: tagName,
+					slug,
+					ownerId: userId,
+					created: new Date(),
+					updated: new Date()
+				})
+				.returning();
+			tag = newTag;
+		}
+
+		tagCache.set(tagName, tag.id);
+		return tag.id;
+	}
+
+	const results = [];
+	for (const bookmark of bookmarks) {
+		try {
+			const categoryId = await getOrCreateCategory(bookmark.category, userId);
+
+			const [newBookmark] = await db
+				.insert(bookmarkSchema)
+				.values({
+					url: bookmark.url,
+					title: bookmark.title,
+					slug: createSlug(bookmark.title),
+					domain: new URL(bookmark.url).hostname,
+					description: bookmark.description || null,
+					ownerId: userId,
+					categoryId: categoryId ?? null,
+					created: new Date(),
+					updated: new Date()
+				} as typeof bookmarkSchema.$inferInsert)
+				.returning();
+
+			if (bookmark.bookmarkTags?.length) {
+				const tagIds = await Promise.all(
+					bookmark.bookmarkTags.map((tag) => getOrCreateTag(tag.value, userId))
+				);
+
+				await db.insert(bookmarksToTagsSchema).values(
+					tagIds
+						.filter((tagId): tagId is number => tagId !== undefined)
+						.map((tagId) => ({
+							bookmarkId: newBookmark.id,
+							tagId
+						}))
+				);
+			}
+
+			results.push({
+				success: true,
+				bookmark: newBookmark
+			});
+		} catch (error) {
+			results.push({
+				success: false,
+				error: error instanceof Error ? error.message : 'Unknown error',
+				bookmark
+			});
+		}
+	}
+
+	return {
+		total: bookmarks.length,
+		successful: results.filter((r) => r.success).length,
+		failed: results.filter((r) => !r.success).length,
+		results
+	} as unknown as ImportExecutionResult;
+}
diff --git a/src/routes/api/bookmarks/import/+server.ts b/src/routes/api/bookmarks/import/+server.ts
new file mode 100644
index 0000000..6e7c5f4
--- /dev/null
+++ b/src/routes/api/bookmarks/import/+server.ts
@@ -0,0 +1,54 @@
+import { executeImport } from '$lib/utils/bookmark-import/execute-import';
+import joi from 'joi';
+
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+export const POST: RequestHandler = async ({ locals, request }) => {
+	const ownerId = locals.user?.id;
+
+	if (!ownerId) {
+		return json({ success: false, error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const requestBody = await request.json();
+
+	const validationSchema = joi.object({
+		bookmarks: joi
+			.array()
+			.items(
+				joi.object({
+					url: joi.string().uri().required(),
+					title: joi.string().required(),
+					description: joi.string().allow('').optional(),
+					category: joi.string().required(),
+					bookmarkTags: joi
+						.array()
+						.items(
+							joi.object({
+								label: joi.string().required(),
+								value: joi.string().required()
+							})
+						)
+						.optional()
+				})
+			)
+			.required()
+	});
+
+	const { error } = validationSchema.validate(requestBody);
+
+	if (error) {
+		return json({ success: false, error: error.message }, { status: 400 });
+	}
+
+	try {
+		const result = await executeImport(requestBody.bookmarks, ownerId);
+
+		return json(result, { status: 201 });
+	} catch (error: any) {
+		console.error('Error importing bookmarks:', error?.message);
+
+		return json({ success: false, error: error?.message }, { status: 500 });
+	}
+};
diff --git a/src/routes/import/html/+page.svelte b/src/routes/import/html/+page.svelte
index 2dfd113..c236555 100644
--- a/src/routes/import/html/+page.svelte
+++ b/src/routes/import/html/+page.svelte
@@ -5,16 +5,19 @@ import Pagination from '$lib/components/Pagination/Pagination.svelte';
 import Select from '$lib/components/Select/Select.svelte';
 import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 import { importBookmarkStore } from '$lib/stores/import-bookmarks.store';
+import type { ImportExecutionResult } from '$lib/types/BookmarkImport.type';
 import type { BulkListItem } from '$lib/types/common/BulkList.type';
 import { importBookmarks } from '$lib/utils/import-bookmarks';
 import { showToast } from '$lib/utils/show-toast';
 import { derived, writable } from 'svelte/store';
 
+const defaultCategory = '[No parent]';
+
 const step = writable<number>(1);
 const isFetchingMetadata = writable<boolean>(true);
-const defaultCategory = '[No parent]';
 const selectedCategory = writable<string>();
 const processedItems = writable<number>(0);
+const importResult = writable<ImportExecutionResult>();
 
 const currentItems = derived([importBookmarkStore, page], ([$importBookmarkStore, $page]) => {
 	return $importBookmarkStore.slice(
@@ -43,6 +46,7 @@ const processMetadataQueue = async (items: BulkListItem[]) => {
 				});
 				const { metadata } = await response.json();
 				processedItems.update((count) => count + 1);
+
 				return {
 					...metadata,
 					...item,
@@ -64,9 +68,9 @@ const processMetadataQueue = async (items: BulkListItem[]) => {
 
 	isFetchingMetadata.set(false);
 	showToast.success(
-		`Successfully imported ${results.length - failedItemsCount} bookmarks from ${
+		`Successfully fetched metadata for ${results.length - failedItemsCount} bookmarks from ${
 			items.length
-		} items (${failedItemsCount} failed).`,
+		} items (failed for ${failedItemsCount}).`,
 		{
 			icon: failedItemsCount ? '⚠️' : '🎉',
 			duration: 3000
@@ -136,6 +140,39 @@ const onSetSelectedCategory = () => {
 		items.map((item) => (item.selected ? { ...item, category: $selectedCategory } : item))
 	);
 };
+
+const onImportAction = async () => {
+	try {
+		const response = await fetch('/api/bookmarks/import', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				bookmarks: $importBookmarkStore.map((bookmark) => ({
+					url: bookmark.url,
+					title: bookmark.title,
+					description: bookmark.description,
+					category: bookmark.category,
+					bookmarkTags: bookmark.bookmarkTags
+				}))
+			})
+		});
+
+		if (!response.ok) {
+			const error = await response.json();
+			throw new Error(error.message);
+		}
+
+		const result = await response.json();
+
+		importResult.set(result);
+		step.set(3);
+	} catch (error) {
+		console.error('Failed to import bookmarks:', error);
+		return;
+	}
+};
 </script>
 
 {#if $step === 1}
@@ -154,7 +191,7 @@ const onSetSelectedCategory = () => {
 		<div class="mb-4 flex w-full gap-2 pl-12">
 			<button
 				class="btn btn-primary btn-sm"
-				disabled={$isFetchingMetadata}
+				disabled={$isFetchingMetadata || $importBookmarkStore.length === 0}
 				on:click={importBookmarkStore.removeSelected}>IMPORT</button>
 
 			{#if $isAnySelected && !$isFetchingMetadata}
@@ -202,4 +239,35 @@ const onSetSelectedCategory = () => {
 			items={$itemsCount}
 			position="right" />
 	</div>
+{:else if $step === 3}
+	<div class="flex flex-col items-center justify-center">
+		<h1 class="mb-8 text-2xl font-bold">Import results</h1>
+		<div class="flex flex-col items-center justify-center">
+			{#if $importResult.successful}
+				<div class="alert alert-success">
+					<div>
+						<span class="text-lg font-bold">Success!</span>
+						<span class="text-sm">
+							{$importResult.successful} bookmarks imported successfully.
+						</span>
+					</div>
+				</div>
+			{/if}
+			{#if $importResult.failed}
+				<div class="alert alert-error">
+					<div>
+						<span class="text-lg font-bold">Error!</span>
+						<span class="text-sm">
+							{$importResult.failed} bookmarks failed to import.
+						</span>
+					</div>
+				</div>
+			{/if}
+			<div class="flex flex-col items-center justify-center">
+				<span>
+					Total bookmarks: {$importResult.total}
+				</span>
+			</div>
+		</div>
+	</div>
 {/if}