Mandant switcher

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