thomasabishop/eolas-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add live data to EntriesListSidebar

Browse source
This commit is contained in:
Thomas Bishop 2025-07-18 16:13:05 +01:00
parent 335e935971
commit a21e5721d2
2 changed files with 37 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/EntriesListSidebar.tsx
View file

@ -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>
)
}

5
src/components/TagListSidebar.tsx
View file

@ -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>