Mandant switcher

src/components/nav-favorites.tsx

@@ -4,7 +4,7 @@ import {
   MoreHorizontal,
   StarOff,
   Trash2,
-} from "lucide-react"
+} from 'lucide-react'
 
 import {
   DropdownMenu,
@@ -12,7 +12,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from '@/components/ui/dropdown-menu'
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -21,16 +21,16 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from "@/components/ui/sidebar"
+} from '@/components/ui/sidebar'
 
 export function NavFavorites({
   favorites,
 }: {
-  favorites: {
+  favorites: Array<{
     name: string
     url: string
     emoji: string
-  }[]
+  }>
 }) {
   const { isMobile } = useSidebar()
 
@@ -55,8 +55,8 @@ export function NavFavorites({
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 className="w-56 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
-                align={isMobile ? "end" : "start"}
+                side={isMobile ? 'bottom' : 'right'}
+                align={isMobile ? 'end' : 'start'}
               >
                 <DropdownMenuItem>
                   <StarOff className="text-muted-foreground" />

src/features/CRM/components/detail.tsx

@@ -1,23 +1,10 @@
-import { useAnsprechpartner, useAnsprechpartnerEditMutation } from '../queries'
+import { Button } from '@/components/ui/button'
+import { useAnsprechpartner } from '../queries'
 
 function AnsprechpartnerDetail({ id }: { id: number }) {
-  const { data } = useAnsprechpartner(id)
-  const { mutate } = useAnsprechpartnerEditMutation()
+  const { data: ansprechpartner } = useAnsprechpartner(id)
 
-  return (
-    <div>
-      {JSON.stringify(data)}
-      <button
-        onClick={(e) => {
-          const newAnsprechparter = data!
-          newAnsprechparter.first_name += '1'
-          mutate(newAnsprechparter)
-        }}
-      >
-        Edit Ansprechpartner
-      </button>
-    </div>
-  )
+  return <div></div>
 }
 
 export default AnsprechpartnerDetail

src/features/CRM/queries.ts

@@ -1,4 +1,9 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  useSuspenseQuery,
+} from '@tanstack/react-query'
 
 const ansprechpartnerKeys = {
   all: ['ansprechpartner'] as const,
@@ -7,7 +12,7 @@ const ansprechpartnerKeys = {
   detail: (id: number) => [...ansprechpartnerKeys.details(), id] as const,
 }
 
-type Ansprechpartner = {
+export type Ansprechpartner = {
   ID: number
   CreatedAt: Date
   UpdatedAt: Date | undefined
@@ -37,7 +42,7 @@ export function useAllAnsprechpartners() {
 }
 
 export function useAnsprechpartner(id: number) {
-  return useQuery<Ansprechpartner>({
+  return useSuspenseQuery<Ansprechpartner>({
     queryKey: ansprechpartnerKeys.detail(id),
     queryFn: async () => {
       const data = await fetch('http://localhost:3000/v1/ansprechpartner/' + id)

src/features/Mandant/components/team-switcher.tsx

@@ -26,31 +26,29 @@ export function TeamSwitcher() {
   const { data: currentMandant } = useCurrentMandant()
   const { data: mandanten } = useAllMandanten()
 
-  const { mutate } = useCurrentMandantMutation()
+  const editCurrentTeamMutation = useCurrentMandantMutation()
 
   useEffect(() => {
-    console.log('AddEvent')
     const down = (e: KeyboardEvent) => {
-      console.log('Keydown: ' + e.key)
-
       let numKey = Number(e.key)
 
       if ((e.metaKey || e.ctrlKey) && !Number.isNaN(numKey)) {
-        console.log('CMD | META-before & ' + numKey)
-
         numKey -= 1
+        if (mandanten && currentMandant) {
+          const mandant = mandanten[numKey]
 
-        console.log('CMD | META & ' + numKey)
-        if (mandanten) {
-          mutate(mandanten[numKey])
-          console.log('MUTATED ' + mandanten[numKey])
+          if (mandant.id === currentMandant.id) {
+            return
+          }
+
+          editCurrentTeamMutation.mutate(mandanten[numKey])
         }
       }
     }
 
     document.addEventListener('keydown', down)
     return () => document.removeEventListener('keydown', down)
-  }, [mandanten])
+  }, [mandanten, currentMandant])
 
   if (!currentMandant || !mandanten) return <p>Loading...</p>
 
@@ -102,12 +100,16 @@ export function TeamSwitcher() {
 }
 
 function MandantDMI({ mandant, index }: { mandant: Mandant; index: number }) {
-  const { mutate } = useCurrentMandantMutation()
+  const { data: currentMandant } = useCurrentMandant()
+  const editCurrentMandantMutaiton = useCurrentMandantMutation()
+
+  if (!currentMandant) return <p>Loading...</p>
 
   return (
     <DropdownMenuItem
       key={mandant.name}
-      onClick={() => mutate(mandant)}
+      onClick={() => editCurrentMandantMutaiton.mutate(mandant)}
+      disabled={mandant.id === currentMandant.id}
       className="gap-2 p-2"
     >
       <div

src/integrations/tanstack-query/root-provider.tsx

@@ -1,7 +1,14 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 export function getContext() {
-  const queryClient = new QueryClient()
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        experimental_prefetchInRender: true,
+      },
+    },
+  })
+
   return {
     queryClient,
   }

src/routes/_sidebar/about.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import AnsprechpartnerDetail from '@/features/CRM/components/detail'
 
@@ -7,8 +8,8 @@ export const Route = createFileRoute('/_sidebar/about')({
 
 function RouteComponent() {
   return (
-    <div>
+    <Suspense fallback={<p>Loading......</p>}>
       <AnsprechpartnerDetail id={8} />
-    </div>
+    </Suspense>
   )
 }