CUD Funktionallitaet Frontend + Mock

Author: Christoph Henrici

frontend/.env.development

@@ -1,3 +1,3 @@
-VITE_USE_MOCK=false
+VITE_USE_MOCK=true
 # If you want real backend in dev, flip to false and (optionally) set:
 VITE_BACKEND_URL=http://localhost:8080

frontend/package.json

@@ -24,7 +24,7 @@
 		"react": "19.1.1",
 		"react-dom": "19.1.1",
 		"react-error-boundary": "6.0.0",
-		"react-router": "7.8.2",
+		"react-router-dom": "7.8.2",
 		"valibot": "1.1.0"
 	},
 	"devDependencies": {

frontend/pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import {lazy, Suspense} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
-import {Route, Routes} from 'react-router'
+import {Route, Routes} from 'react-router-dom'
 import {LoadingOrError} from '@/components/LoadingOrError'
 import {Gallery} from '@/pages/Gallery'
 import { NewClient } from './pages/NewClient'

frontend/src/App.tsx

@@ -1,18 +1,63 @@
-import * as v from 'valibot'
+import * as v from 'valibot';
 
-const Client = v.object({
-	id: v.number(),
-	name: v.string(),
-	email: v.string()
-})
-export type Client = v.InferOutput<typeof Client>
+const Client = v.object({ id: v.number(), name: v.string(), email: v.string() });
+export type Client = v.InferOutput<typeof Client>;
+const Clients = v.array(Client);
 
-const Clients = v.array(Client)
+// Write DTO (what your form sends)
+const ClientUpsert = v.object({
+  name: v.string(),
+  email: v.string()
+});
+export type ClientUpsert = v.InferOutput<typeof ClientUpsert>;
+
+const API = '/api';
 
 export async function getClients() {
-	const response = await fetch('/api/clients', {credentials: 'include'})
-	if (!response.ok) {
-		throw new Error('Failed to fetch Clients')
-	}
-	return v.parse(Clients, await response.json())
+  const r = await fetch(`${API}/clients`, { credentials: 'include' });
+  if (!r.ok) throw new Error('Failed to fetch clients');
+  return v.parse(Clients, await r.json());
+}
+
+export async function getClient(id: number) {
+  const r = await fetch(`${API}/clients/${id}`, { credentials: 'include' });
+  if (!r.ok) throw new Error(`Client ${id} not found`);
+  return v.parse(Client, await r.json());
+}
+
+export async function createClient(input: ClientUpsert) {
+  // optional client-side shape check
+  v.parse(ClientUpsert, input);
+
+  const r = await fetch(`${API}/clients`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input)
+  });
+  if (r.status === 409) throw new Error('Email already exists');
+  if (!r.ok) throw new Error('Create failed');
+  return v.parse(Client, await r.json());
 }
+
+export async function updateClient(id: number, input: ClientUpsert) {
+  v.parse(ClientUpsert, input);
+
+  const r = await fetch(`${API}/clients/${id}`, {
+    method: 'PUT',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input)
+  });
+  if (r.status === 409) throw new Error('Email already exists');
+  if (!r.ok) throw new Error('Update failed');
+  return v.parse(Client, await r.json());
+}
+
+export async function deleteClient(id: number) {
+  const r = await fetch(`${API}/clients/${id}`, {
+    method: 'DELETE',
+    credentials: 'include'
+  });
+  if (!(r.ok || r.status === 204)) throw new Error('Delete failed');
+}

frontend/src/api/clients.ts

@@ -1,4 +1,4 @@
-import {Link} from 'react-router'
+import {Link} from 'react-router-dom'
 import type {Client as ClientType} from '@/api/clients'
 
 interface Properties {

frontend/src/components/Clients.tsx

@@ -1,8 +1,35 @@
-// src/components/ClientTable.tsx
-import { Link } from 'react-router';
-import type {Client as ClientType} from '@/api/clients'
+// src/components/ClientsTable.tsx
+import { Link } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteClient, type Client as ClientType } from '@/api/clients';
 
 export function ClientsTable({ clients }: { clients: ClientType[] }) {
+  const qc = useQueryClient();
+
+  const del = useMutation({
+    mutationFn: (id: number) => deleteClient(id),
+    onMutate: async (id) => {
+      await qc.cancelQueries({ queryKey: ['clients'] });
+      const prevClients = qc.getQueryData<ClientType[]>(['clients']);
+      // optimistic remove
+      qc.setQueryData<ClientType[]>(['clients'], (old = []) => old.filter(c => c.id !== id));
+      // optimistic tenantInfo-- (optional, see next block)
+      const prevTenant = qc.getQueryData<any>(['tenantInfo']);
+      if (prevTenant) {
+        qc.setQueryData(['tenantInfo'], { ...prevTenant, clientCount: Math.max(0, (prevTenant.clientCount ?? 0) - 1) });
+      }
+      return { prevClients, prevTenant };
+    },
+    onError: (_err, _id, ctx) => {
+      if (ctx?.prevClients) qc.setQueryData(['clients'], ctx.prevClients);
+      if (ctx?.prevTenant) qc.setQueryData(['tenantInfo'], ctx.prevTenant);
+    },
+    onSettled: () => {
+      qc.invalidateQueries({ queryKey: ['clients'] });
+      qc.invalidateQueries({ queryKey: ['tenantInfo'] }); // <-- important
+    },
+  });
+
   return (
     <div className="overflow-x-auto rounded-lg border border-gray-300 bg-white shadow-sm">
       <table className="min-w-full border-collapse text-sm">
@@ -29,15 +56,23 @@ export function ClientsTable({ clients }: { clients: ClientType[] }) {
                   Edit
                 </Link>
                 <button
-                  disabled
-                  className="cursor-not-allowed text-gray-400"
-                  title="Delete (disabled for now)"
+                  className="text-red-600 hover:text-red-700 font-medium disabled:opacity-60"
+                  onClick={() => del.mutate(c.id)}
+                  disabled={del.isPending}
+                  title="Delete"
                 >
-                  Delete
+                  {del.isPending ? 'Deleting…' : 'Delete'}
                 </button>
               </td>
             </tr>
           ))}
+          {clients.length === 0 && (
+            <tr>
+              <td colSpan={3} className="px-6 py-6 text-gray-600">
+                No clients yet.
+              </td>
+            </tr>
+          )}
         </tbody>
       </table>
     </div>

frontend/src/components/ClientsTable.tsx

@@ -1,16 +1,16 @@
 import { getTenantInfo} from '@/api/tenantInfo'
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 
 export function TenantBadge() {
- const { data } = useSuspenseQuery({
+ const { data } = useQuery({
 		queryFn: getTenantInfo,
 		queryKey: ['tenantInfo']
 	})
   if (!data?.tenantDisplay) return null
   return (
     <span className="text-xs text-gray-500">
       Workspace: <span className="font-mono">{data.tenantDisplay}</span>
-      {typeof data.clientCount === 'number' && <> · {data.clientCount} clients</>}
+      {typeof data.clientCount === 'number' && <> · {data?.clientCount ?? 0} clients</>}
     </span>
   )
-}
+} 

frontend/src/components/TenantBadge.tsx

@@ -1,7 +1,7 @@
 import './global.css';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { HashRouter } from 'react-router';
+import { HashRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { App } from './App';

frontend/src/main.tsx

@@ -6,7 +6,7 @@
 	},
 	{
 		"id": 2,
-		"name": "Another one ",
+		"name": "Another one",
 		"email": "another©example.com"
 	},
 	{