refactor(bookmarks): improve metadata handling and type definitions

Signed-off-by: Robert Goniszewski <[email protected]>
goniszewski · Nov 15, 2024 · 4bb9cba · 4bb9cba
1 parent dfbc421
commit 4bb9cba
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 60 deletions.
diff --git a/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte b/src/lib/components/EditBookmarkForm/EditBookmarkForm.svelte
@@ -8,7 +8,7 @@ import SvelteSelect from 'svelte-select';
 import { writable, type Writable } from 'svelte/store';
 
 import { invalidate } from '$app/navigation';
-import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
+import { editBookmarkCategoriesStore, editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 import { searchEngine } from '$lib/stores/search.store';
 import type { Bookmark, BookmarkEdit } from '$lib/types/Bookmark.type';
 import { updateBookmarkInSearchIndex } from '$lib/utils/search';
@@ -19,14 +19,20 @@ export let closeModal: () => void;
 
 let error = '';
 const loading = writable(false);
-const bookmark = writable<Partial<Bookmark> | BookmarkEdit>();
+const bookmark = writable<BookmarkEdit | Partial<Bookmark>>();
 
 $: $bookmark = { ...$editBookmarkStore };
 
-const categoryItems = $page.data.categories.map((c) => ({
-	value: `${c.id}`,
-	label: c.name
-}));
+const categoryItems = [
+	...$page.data.categories.map((c) => ({
+		value: `${c.id}`,
+		label: c.name
+	})),
+	...$editBookmarkCategoriesStore.map((c) => ({
+		value: c,
+		label: c
+	}))
+];
 
 const bookmarkTagsInput: Writable<
 	| {
@@ -37,7 +43,14 @@ const bookmarkTagsInput: Writable<
 	| null
 > = writable(null);
 
-$: $bookmarkTagsInput = $bookmark.tags?.map((t) => ({ value: `${t.id}`, label: t.name })) || null;
+$: $bookmarkTagsInput =
+	(isImportedBookmark($bookmark)
+		? $bookmark.bookmarkTags?.map((t) => ({
+				value: t.value,
+				label: t.label
+			}))
+		: ($bookmark as Partial<Bookmark>).tags?.map((t) => ({ value: `${t.id}`, label: t.name }))) ||
+	null;
 
 const bookmarkTags = writable<
 	{
@@ -92,19 +105,28 @@ function handleTagsChange() {
 	];
 }
 
-function handleImportedBookmarkEdit() {
-	const formData = new FormData(form);
-	let rawData = Object.fromEntries(formData as any);
-	console.log('rawData', rawData);
-	delete rawData.tags;
-	editBookmarkStore.set({
-		...$bookmark,
-		...rawData,
-		category: JSON.parse(rawData.category)?.label,
-		bookmarkTags: $bookmarkTags
-	});
-	console.log('$editBookmarkStore', $editBookmarkStore);
-	closeModal();
+function isImportedBookmark(
+	bookmark: BookmarkEdit | Partial<Bookmark>
+): bookmark is BookmarkEdit & { imported: boolean } {
+	return 'imported' in bookmark;
+}
+
+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({
+			...$bookmark,
+			...rawData,
+			category: JSON.parse(rawData.category)?.label,
+			bookmarkTags: $bookmarkTags
+		});
+		closeModal();
+	} else {
+		form.submit();
+	}
 }
 
 const onGetMetadata = _.debounce(
@@ -215,13 +237,13 @@ const onGetMetadata = _.debounce(
 					<div class="flex w-full flex-col items-start justify-between gap-2 md:flex-row">
 						<div class="flex w-full flex-col items-center justify-between gap-2 md:flex-row">
 							<div class="flex flex-none flex-col">
-								{#if $bookmark.category?.id || $bookmark.category?.name}
+								{#if typeof $bookmark.category === 'string' || $bookmark.category?.id}
 									<label for="category" class="label">Category</label>
 									<Select
 										name="category"
 										searchable
 										items={categoryItems}
-										value={`${$bookmark.category?.id}`}
+										value={`${$bookmark.category?.id || $bookmark.category}`}
 										placeholder={'Select category'}
 										border={false}
 										className="this-select input input-bordered w-full md:min-w-28" />
@@ -391,14 +413,7 @@ const onGetMetadata = _.debounce(
 
 				<button
 					class="btn btn-primary mx-auto my-6 w-full max-w-xs"
-					on:click|preventDefault={() => {
-						console.log('$bookmark', $bookmark);
-						if ($bookmark.imported) {
-							handleImportedBookmarkEdit();
-						} else {
-							form.submit();
-						}
-					}}
+					on:click|preventDefault={handleSubmit}
 					disabled={$loading || !$bookmark.url || !$bookmark.title}>Save</button>
 			</div>
 		</div>

diff --git a/src/lib/stores/edit-bookmark.store.ts b/src/lib/stores/edit-bookmark.store.ts
@@ -2,3 +2,4 @@ import type { Bookmark, BookmarkEdit } from '$lib/types/Bookmark.type';
 import { writable } from 'svelte/store';
 
 export const editBookmarkStore = writable<Partial<Bookmark> | BookmarkEdit>({});
+export const editBookmarkCategoriesStore = writable<string[]>([]);
diff --git a/src/lib/types/Bookmark.type.ts b/src/lib/types/Bookmark.type.ts
@@ -3,23 +3,12 @@ import type { Metadata } from './Metadata.type';
 import type { Tag } from './Tag.type';
 import type { User } from './User.type';
 
-export type Bookmark = {
+export type Bookmark = Metadata & {
 	id: number;
-	url: string;
-	domain: string;
-	title: string;
-	description: string | null;
-	author: string | null;
-	contentText: string | null;
-	contentHtml: string | null;
-	contentType: string | null;
-	contentPublishedDate: string | null;
-	note: string | null;
 	mainImage: string | null;
 	mainImageId: number | null;
-	mainImageUrl: string | null;
 	icon: string | null;
-	iconUrl: string | null;
+	note: string | null;
 	importance: number | null;
 	flagged: null | Date;
 	read: null | Date;

diff --git a/src/lib/types/Metadata.type.ts b/src/lib/types/Metadata.type.ts
@@ -2,12 +2,12 @@ export type Metadata = {
 	url: string;
 	domain: string;
 	title: string;
-	description: string;
-	author: string;
-	contentText: string;
-	contentHtml: string;
-	contentType: string;
-	contentPublishedDate: Date | null;
-	mainImageUrl: string;
-	iconUrl: string;
+	description: string | null;
+	author: string | null;
+	contentText: string | null;
+	contentHtml: string | null;
+	contentType: string | null;
+	contentPublishedDate: string | null;
+	mainImageUrl: string | null;
+	iconUrl: string | null;
 };
diff --git a/src/lib/utils/get-metadata.ts b/src/lib/utils/get-metadata.ts
@@ -61,8 +61,6 @@ const articleExtractorScraper = async (html: string, url: string): Promise<Parti
 			? sanitizeHtml(articleExtractorMetadata?.content)
 			: '',
 		contentPublishedDate: articleExtractorMetadata?.published
-			? new Date(articleExtractorMetadata?.published)
-			: null
 	};
 };
 
@@ -144,13 +142,14 @@ export async function getMetadata(url: string, providedHtml?: string): Promise<M
 			urlMetadataMetadata?.description ||
 			articleExtractorMetadata?.description ||
 			firstParagraph ||
-			'',
-		author: urlMetadataMetadata?.author || articleExtractorMetadata?.author || '',
+			null,
+		author: urlMetadataMetadata?.author || articleExtractorMetadata?.author || null,
 		contentText,
-		contentHtml: articleExtractorMetadata?.contentHtml || sanitizeHtml(html) || '',
-		contentType: '',
-		contentPublishedDate: null,
-		mainImageUrl: urlMetadataMetadata?.mainImageUrl || articleExtractorMetadata?.mainImageUrl || '',
-		iconUrl: urlMetadataMetadata?.iconUrl || ''
+		contentHtml: articleExtractorMetadata?.contentHtml || sanitizeHtml(html) || null,
+		contentType: null,
+		contentPublishedDate: articleExtractorMetadata?.contentPublishedDate || null,
+		mainImageUrl:
+			urlMetadataMetadata?.mainImageUrl || articleExtractorMetadata?.mainImageUrl || null,
+		iconUrl: urlMetadataMetadata?.iconUrl || null
 	};
 }