From 85abb8c5904e2e7d5c11c1d0795b21b9a6345114 Mon Sep 17 00:00:00 2001
From: Robert Goniszewski <robertgoniszewski@outlook.com>
Date: Wed, 3 Apr 2024 21:30:35 +0200
Subject: [PATCH] fix: add recursive component to handle nested category tree

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
---
 .../CategoryTree/CategoryTree.svelte          | 24 +++++++------------
 .../CategoryTreeItem/CategoryTreeItem.svelte  | 24 +++++++++++++++++++
 src/lib/utils/build-category-tree.ts          | 13 ++++++++++
 src/routes/+layout.svelte                     | 14 +++--------
 4 files changed, 48 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/components/CategoryTreeItem/CategoryTreeItem.svelte
 create mode 100644 src/lib/utils/build-category-tree.ts

diff --git a/src/lib/components/CategoryTree/CategoryTree.svelte b/src/lib/components/CategoryTree/CategoryTree.svelte
index 8118c04..d81dc5e 100644
--- a/src/lib/components/CategoryTree/CategoryTree.svelte
+++ b/src/lib/components/CategoryTree/CategoryTree.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import Icon from '$lib/components/Icon/Icon.svelte';
 	import type { Category } from '$lib/types/Category.type';
+	import CategoryTreeItem from '../CategoryTreeItem/CategoryTreeItem.svelte';
 
-	export let categories: (Category & { children?: Category[] })[] | [] = [];
+	// CategoryWithChildren type is a recursive type that includes the children property
+	type CategoryWithChildren = Category & { children?: CategoryWithChildren[] };
+
+	export let categories: CategoryWithChildren[] | [] = [];
 </script>
 
 {#each categories as category (category.id)}
@@ -10,7 +14,7 @@
 		<div class="flex items-center">
 			{#if !category.icon}
 				<div
-					class="w-4 h-4 my-auto rounded-full"
+					class="my-auto h-4 w-4 rounded-full"
 					style={`background-color: ${category?.color || '#a0a0a0'};`}
 				/>
 			{:else}
@@ -22,20 +26,8 @@
 		</div>
 
 		{#if category.children}
-			{#each category.children as categoryChild (categoryChild.id)}
-				<div class="flex items-center ml-4">
-					{#if !categoryChild.icon}
-						<div
-							class="w-4 h-4 my-auto rounded-full"
-							style={`background-color: ${categoryChild?.color || '#a0a0a0'};`}
-						/>
-					{:else}
-						<Icon name={categoryChild.icon} size={16} color={categoryChild?.color} />
-					{/if}
-					<a href={`/categories/${categoryChild.slug}`} class="link m-1 hover:text-primary"
-						>{categoryChild.name}</a
-					>
-				</div>
+			{#each category.children as child (child.id)}
+				<CategoryTreeItem children={category.children} {...child} />
 			{/each}
 		{/if}
 	</div>
diff --git a/src/lib/components/CategoryTreeItem/CategoryTreeItem.svelte b/src/lib/components/CategoryTreeItem/CategoryTreeItem.svelte
new file mode 100644
index 0000000..37426b1
--- /dev/null
+++ b/src/lib/components/CategoryTreeItem/CategoryTreeItem.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Category } from '$lib/types/Category.type';
+	import Icon from '../Icon/Icon.svelte';
+
+	export let nestedTimes = 0;
+	export let children = [] as Category[];
+	export let name = '';
+	export let icon = null as string | null;
+	export let slug = '';
+	export let color = '';
+</script>
+
+<div class="flex items-center" style={`margin-left: ${nestedTimes + 1}rem;`}>
+	{#if !icon}
+		<div class="my-auto h-4 w-4 rounded-full" style={`background-color: ${color || '#a0a0a0'};`} />
+	{:else}
+		<Icon name={icon} size={16} {color} />
+	{/if}
+	<a href={`/categories/${slug}`} class="link m-1 hover:text-primary">{name}</a>
+</div>
+
+{#each children as child}
+	<svelte:self nestedTimes={nestedTimes + 1} {...child} />
+{/each}
diff --git a/src/lib/utils/build-category-tree.ts b/src/lib/utils/build-category-tree.ts
new file mode 100644
index 0000000..df03c25
--- /dev/null
+++ b/src/lib/utils/build-category-tree.ts
@@ -0,0 +1,13 @@
+import type { Category } from '$lib/types/Category.type';
+
+export function buildCategoryTree(
+	categories: Category[],
+	parent?: Category
+): (Category & { children?: Category[] })[] {
+	return categories
+		.filter((c) => c.parent?.id === parent?.id)
+		.map((c) => ({
+			...c,
+			children: buildCategoryTree(categories, c)
+		}));
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 89374fa..f8ed0a6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,6 +13,7 @@
 	import { checkPocketbaseConnection, user } from '$lib/pb';
 	import { searchedValue } from '$lib/stores/search.store';
 	import type { Category } from '$lib/types/Category.type';
+	import { buildCategoryTree } from '$lib/utils/build-category-tree';
 	import { ToastNode, showToast } from '$lib/utils/show-toast';
 	import { IconMenu, IconX } from '@tabler/icons-svelte';
 	import { onDestroy, onMount } from 'svelte';
@@ -44,17 +45,8 @@
 
 	$: {
 		const categories = $page.data.categories;
-		const categoriesTreeData = categories
-			.filter((c) => !c.parent)
-			.map((c) => ({
-				...c,
-				children: categories
-					.filter((c2) => c2.parent?.id === c.id)
-					.map((c2) => ({
-						...c2
-					}))
-			}));
-		categoriesTree.set(categoriesTreeData);
+
+		categoriesTree.set(buildCategoryTree(categories));
 	}
 </script>