fix: add Svelte's key value for '#each' blocks to ensure reactivity o…

…f nested components; fix import Signed-off-by: Robert Goniszewski <[email protected]>
goniszewski · Dec 28, 2023 · 55266c2 · 55266c2
1 parent 25183a2
commit 55266c2
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 12 deletions.
diff --git a/src/lib/components/BookmarkCard/BookmarkCard.svelte b/src/lib/components/BookmarkCard/BookmarkCard.svelte
@@ -266,7 +266,7 @@
 			<div class="card-actions justify-end px-2 font-medium tracking-tight gap-1">
 				<span class="font-sans font-semibold text-xs">#</span>
 				{#if bookmark.tags}
-					{#each bookmark.tags as tag}
+					{#each bookmark.tags as tag (tag.id)}
 						<a href={`/tags/${tag.name}`} class="link font-sans text-xs">{tag.name}</a>
 					{/each}
 				{/if}

diff --git a/src/lib/components/BookmarkListItem/BookmarkListItem.svelte b/src/lib/components/BookmarkListItem/BookmarkListItem.svelte
@@ -139,7 +139,7 @@
 			<div class="flex w-full gap-1">
 				<span class="font-sans font-semibold text-xs">#</span>
 				{#if bookmark.tags}
-					{#each bookmark.tags as tag}
+					{#each bookmark.tags as tag (tag.id)}
 						<a
 							href={`/tags/${tag.name}`}
 							class="link font-sans text-xs w-full whitespace-nowrap max-w-[8rem] hover:text-secondary"

diff --git a/src/lib/components/BookmarksList/BookmarkList.svelte b/src/lib/components/BookmarksList/BookmarkList.svelte
@@ -13,13 +13,13 @@
 	{#if $page.data.bookmarks.length > 0}
 		{#if $userSettingsStore.bookmarksView === 'grid'}
 			<div class="w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
-				{#each bookmarks as bookmark}
+				{#each bookmarks as bookmark (bookmark.id)}
 					<BookmarkCard {bookmark} />
 				{/each}
 			</div>
 		{:else if $userSettingsStore.bookmarksView === 'list'}
 			<div class="flex flex-col w-full gap-2">
-				{#each bookmarks as bookmark}
+				{#each bookmarks as bookmark (bookmark.id)}
 					<BookmarkListItem {bookmark} />
 				{/each}
 			</div>

diff --git a/src/lib/components/CategoryTree/CategoryTree.svelte b/src/lib/components/CategoryTree/CategoryTree.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { editCategoryStore } from '$lib/stores/edit-category.store';
 	import Icon from '$lib/components/Icon/Icon.svelte';
-	import type { Category } from '$lib/interfaces/Category.interface';
+	import type { Category } from '$lib/types/Category.type';
 
 	export let categories: (Category & { children?: Category[] })[] | [] = [];
 </script>
 
-{#each categories as category}
+{#each categories as category (category.id)}
 	<div class="flex flex-col">
 		<div class="flex items-center">
 			{#if !category.icon}
@@ -23,7 +22,7 @@
 		</div>
 
 		{#if category.children}
-			{#each category.children as categoryChild}
+			{#each category.children as categoryChild (categoryChild.id)}
 				<div class="flex items-center ml-4">
 					{#if !categoryChild.icon}
 						<div

diff --git a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
@@ -63,7 +63,7 @@
 							<h3 class="text-xl">Tags</h3>
 							<div class="flex flex-wrap gap-2 m-1">
 								{#if $bookmark.tags?.length}
-									{#each $bookmark.tags as tag}
+									{#each $bookmark.tags as tag (tag.id)}
 										<span class="badge badge-outline badge-sm whitespace-nowrap">{tag.name}</span>
 									{/each}
 								{:else}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -155,7 +155,7 @@
 							<div>
 								<h3 class="text-xl">Tags</h3>
 								<div class="flex flex-wrap p-2">
-									{#each $page.data.tags as tag}
+									{#each $page.data.tags as tag (tag.id)}
 										{#if tag.bookmarks.length > 0}
 											<a href={`/tags/${tag.slug}`} class="link m-1 hover:text-secondary"
 												>#{tag.name}</a

diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
@@ -67,7 +67,7 @@
 									</thead>
 									<!-- body -->
 									<tbody>
-										{#each data.adminData.users as user}
+										{#each data.adminData.users as user (user.id)}
 											<tr>
 												<td>{user.id}</td>
 												<td>{user.name}</td>

diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -82,7 +82,7 @@
 				<h2 class="card-title">Latest bookmarks</h2>
 				{#if $page.data.bookmarks.length > 0}
 					<div class="flex flex-col w-full columns-sm gap-2">
-						{#each $page.data.bookmarks.slice(0, 3) as bookmark}
+						{#each $page.data.bookmarks.slice(0, 3) as bookmark (bookmark.id)}
 							<a
 								href={bookmark.url}
 								title={bookmark.url}