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

---
 src/components/EntriesListSidebar.tsx | 62 +++++++++++++++------------
 src/components/TagListSidebar.tsx     |  5 +--
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/components/EntriesListSidebar.tsx b/src/components/EntriesListSidebar.tsx
index 6b03424..c0d93a3 100644
--- a/src/components/EntriesListSidebar.tsx
+++ b/src/components/EntriesListSidebar.tsx
@@ -4,32 +4,40 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components
 import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
 import { CollapsibleContent } from "../components/ui/collapsible"
 
-import { mockEntries } from "@/mock-data/mock-entries"
+import { useQuery } from "@tanstack/react-query"
+import api from "../api/eolas-api"
+
 export default function EntriesListSidebar() {
-	return (
-		<Collapsible className="group/collapsible">
-			<SidebarMenuItem key="entries">
-				<CollapsibleTrigger asChild>
-					<SidebarMenuButton asChild>
-						<a href="#">
-							<FileText />
-							<span>Entries</span>
-							<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-						</a>
-					</SidebarMenuButton>
-				</CollapsibleTrigger>
-				<CollapsibleContent>
-					<SidebarMenuSub>
-						{mockEntries.map((item) => (
-							<SidebarMenuItem>
-								<a href={item.url}>
-									<span className="text-xs">{item.title}</span>
-								</a>
-							</SidebarMenuItem>
-						))}
-					</SidebarMenuSub>
-				</CollapsibleContent>
-			</SidebarMenuItem>
-		</Collapsible>
-	)
+   const { data: entries, isLoading } = useQuery({
+      queryKey: ["entries_list"],
+      queryFn: () => api.get("/entries").then((res) => res.data),
+   })
+
+   console.log(entries)
+   return (
+      <Collapsible className="group/collapsible">
+         <SidebarMenuItem key="entries">
+            <CollapsibleTrigger asChild>
+               <SidebarMenuButton asChild>
+                  <a href="#">
+                     <FileText />
+                     <span>Entries</span>
+                     <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </a>
+               </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+               <SidebarMenuSub>
+                  {entries?.entries.map((item, i) => (
+                     <SidebarMenuItem key={i}>
+                        <a>
+                           <span className="text-xs">{item.title}</span>
+                        </a>
+                     </SidebarMenuItem>
+                  ))}
+               </SidebarMenuSub>
+            </CollapsibleContent>
+         </SidebarMenuItem>
+      </Collapsible>
+   )
 }
diff --git a/src/components/TagListSidebar.tsx b/src/components/TagListSidebar.tsx
index d50c0ba..d9638d2 100644
--- a/src/components/TagListSidebar.tsx
+++ b/src/components/TagListSidebar.tsx
@@ -3,7 +3,6 @@ import { Tags, ChevronRight } from "lucide-react"
 import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components/ui/sidebar"
 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"
 
@@ -29,8 +28,8 @@ export default function TagListSidebar() {
 				</CollapsibleTrigger>
 				<CollapsibleContent>
 					<SidebarMenuSub>
-						{tags?.tags.map((item) => (
-							<SidebarMenuItem>
+						{tags?.tags.map((item, i) => (
+							<SidebarMenuItem key={i}>
 								<a>
 									<span className="text-xs">{item}</span>
 								</a>