From 335e935971e72fdc8af2a15bb88a70c3a694c13d Mon Sep 17 00:00:00 2001
From: thomasabishop <thomasabishop@tuta.com>
Date: Fri, 18 Jul 2025 16:00:39 +0100
Subject: [PATCH] feat: add live data to TagListSidebar

---
 src/api/eolas-api.ts              |  4 ++--
 src/components/TagListSidebar.tsx | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/api/eolas-api.ts b/src/api/eolas-api.ts
index 3f30f54..df683f3 100644
--- a/src/api/eolas-api.ts
+++ b/src/api/eolas-api.ts
@@ -1,8 +1,8 @@
 import axios from "axios"
 
 const api = axios.create({
-	baseURL: process.env.VITE_EOLAS_API_ENDPOINT,
-	timeout: 10000,
+   baseURL: import.meta.env.VITE_EOLAS_API_ENDPOINT,
+   timeout: 10000,
 })
 
 export default api
diff --git a/src/components/TagListSidebar.tsx b/src/components/TagListSidebar.tsx
index b5f4ab6..d50c0ba 100644
--- a/src/components/TagListSidebar.tsx
+++ b/src/components/TagListSidebar.tsx
@@ -4,8 +4,17 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components
 import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
 import { CollapsibleContent } from "../components/ui/collapsible"
 import { mockTags } from "@/mock-data/mock-tags"
+import { useQuery } from "@tanstack/react-query"
+import api from "../api/eolas-api"
 
 export default function TagListSidebar() {
+	const { data: tags, isLoading } = useQuery({
+		queryKey: ["tag_list"],
+		queryFn: () => api.get("/tags").then((res) => res.data),
+	})
+
+	console.log(tags)
+
 	return (
 		<Collapsible className="group/collapsible">
 			<SidebarMenuItem key="tags">
@@ -20,10 +29,10 @@ export default function TagListSidebar() {
 				</CollapsibleTrigger>
 				<CollapsibleContent>
 					<SidebarMenuSub>
-						{mockTags.map((item) => (
+						{tags?.tags.map((item) => (
 							<SidebarMenuItem>
-								<a href={item.url}>
-									<span className="text-xs">{item.title}</span>
+								<a>
+									<span className="text-xs">{item}</span>
 								</a>
 							</SidebarMenuItem>
 						))}