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