feat: fetch nav menu data

TinsFox · Nov 2, 2024 · b1be784 · b1be784
1 parent 60be317
commit b1be784
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
@@ -19,8 +19,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar"
-
-import { menus } from "./layout/sidebar/data"
+import { useNavMenu } from "@/hooks/query/user-memu"
 
 const navSecondary = [
   {
@@ -36,6 +35,8 @@ const navSecondary = [
 ]
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const { data: menus } = useNavMenu()
+
   return (
     <Sidebar variant="inset" {...props}>
       <SidebarHeader>

diff --git a/src/components/nav-breadcrumb.tsx b/src/components/nav-breadcrumb.tsx
@@ -2,7 +2,6 @@ import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 
-import { menus } from "@/components/layout/sidebar/data"
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -11,6 +10,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb"
+import { useNavMenu } from "@/hooks/query/user-memu"
 import { cn } from "@/lib/utils"
 import type { IMenu } from "@/models/menu"
 
@@ -23,7 +23,7 @@ interface Breadcrumb {
 export function NavBreadcrumb({ className }: { className?: string }) {
   const location = useLocation()
   const { t } = useTranslation("navigation")
-
+  const { data: menus } = useNavMenu()
   const findMenuPath = (
     pathname: string,
     items: IMenu[],

diff --git a/src/components/layout/sidebar/data.tsx → src/hooks/query/user-memu.ts b/src/components/layout/sidebar/data.tsx → src/hooks/query/user-memu.ts
@@ -1,3 +1,4 @@
+import { queryOptions, useSuspenseQuery } from "@tanstack/react-query"
 import {
   Archive,
   ArchiveX,
@@ -23,6 +24,23 @@ import {
 
 import type { IMenu } from "@/models/menu"
 
+export const queryNavMenu = () => queryOptions({
+  queryKey: ["nav-menu"],
+  queryFn: async () => mockMenu(),
+})
+
+export function useNavMenu() {
+  return useSuspenseQuery(queryNavMenu())
+}
+
+async function mockMenu(): Promise<IMenu[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(menus)
+    }, 1000)
+  })
+}
+
 export const menus: IMenu[] = [
   {
     title: "dashboard",