letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(compiler): migrate 6 list pages to useQuery (set-state-in-effect)

Browse Source 
Replaces the useState + useEffect + apiFetch pattern with TanStack
Query in six admin list pages — same pattern, mechanical refactor:

- admin/tags/tag-list
- admin/ports/port-list
- admin/roles/role-list
- admin/users/user-list
- admin/document-templates/template-list
- admin/webhooks/page
- dashboard/timezone-drift-banner (also: detected-tz reads via
  useSyncExternalStore so render stays pure)

Side benefits: list refetches now share a query cache across tabs
(via @tanstack/query-broadcast-client-experimental that was wired
up earlier this branch), so when admin A edits a role in one tab,
admin B's tab sees the updated row without a manual reload.

set-state-in-effect warnings: 51 → 45.

Verified: tsc clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-12 23:34:24 +02:00
parent d1c9469fa7
commit 6ca94ee3f1
7 changed files with 126 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/admin/document-templates/template-list.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { Plus, Pencil, Trash2, History, FileText } from 'lucide-react';
import { type ColumnDef } from '@tanstack/react-table';
@@ -41,27 +42,22 @@ const TYPE_LABELS: Record<string, string> = {
custom: 'Custom',
};
const TEMPLATES_QUERY_KEY = ['admin', 'document-templates'] as const;
export function TemplateList() {
const [templates, setTemplates] = useState<AdminTemplate[]>([]);
const [loading, setLoading] = useState(true);
const queryClient = useQueryClient();
const [formOpen, setFormOpen] = useState(false);
const [editingTemplate, setEditingTemplate] = useState<AdminTemplate | null>(null);
const [historyTemplate, setHistoryTemplate] = useState<AdminTemplate | null>(null);
const [historyOpen, setHistoryOpen] = useState(false);
const fetchTemplates = useCallback(async () => {
setLoading(true);
try {
const res = await apiFetch<{ data: AdminTemplate[] }>('/api/v1/admin/templates');
setTemplates(res.data);
} finally {
setLoading(false);
}
}, []);
const { data: templates = [], isLoading: loading } = useQuery<AdminTemplate[]>({
queryKey: TEMPLATES_QUERY_KEY,
queryFn: () =>
apiFetch<{ data: AdminTemplate[] }>('/api/v1/admin/templates').then((r) => r.data),
});
useEffect(() => {
void fetchTemplates();
}, [fetchTemplates]);
const fetchTemplates = () => queryClient.invalidateQueries({ queryKey: TEMPLATES_QUERY_KEY });
function handleNewTemplate() {
setEditingTemplate(null);

25
src/components/admin/ports/port-list.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { type ColumnDef } from '@tanstack/react-table';
import { Pencil, Plus } from 'lucide-react';
@@ -24,25 +25,19 @@ interface PortRow {
createdAt: string;
}
const PORTS_QUERY_KEY = ['admin', 'ports'] as const;
export function PortList() {
const [ports, setPorts] = useState<PortRow[]>([]);
const [loading, setLoading] = useState(true);
const queryClient = useQueryClient();
const [formOpen, setFormOpen] = useState(false);
const [editingPort, setEditingPort] = useState<PortRow | null>(null);
const fetchPorts = useCallback(async () => {
setLoading(true);
try {
const res = await apiFetch<{ data: PortRow[] }>('/api/v1/admin/ports');
setPorts(res.data);
} finally {
setLoading(false);
}
}, []);
const { data: ports = [], isLoading: loading } = useQuery<PortRow[]>({
queryKey: PORTS_QUERY_KEY,
queryFn: () => apiFetch<{ data: PortRow[] }>('/api/v1/admin/ports').then((r) => r.data),
});
useEffect(() => {
void fetchPorts();
}, [fetchPorts]);
const fetchPorts = () => queryClient.invalidateQueries({ queryKey: PORTS_QUERY_KEY });
function handleNewPort() {
setEditingPort(null);

45
src/components/admin/roles/role-list.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { type ColumnDef } from '@tanstack/react-table';
import { Pencil, Trash2, Plus, Lock } from 'lucide-react';
@@ -31,27 +32,25 @@ interface Role {
createdAt: string;
}
const ROLES_QUERY_KEY = ['admin', 'roles'] as const;
export function RoleList() {
const [roles, setRoles] = useState<Role[]>([]);
const [loading, setLoading] = useState(true);
const queryClient = useQueryClient();
const [formOpen, setFormOpen] = useState(false);
const [editingRole, setEditingRole] = useState<Role | null>(null);
const [deletingId, setDeletingId] = useState<string | null>(null);
const [viewingPermissions, setViewingPermissions] = useState<Role | null>(null);
const fetchRoles = useCallback(async () => {
setLoading(true);
try {
const res = await apiFetch<{ data: Role[] }>('/api/v1/admin/roles');
setRoles(res.data);
} finally {
setLoading(false);
}
}, []);
const { data: roles = [], isLoading: loading } = useQuery<Role[]>({
queryKey: ROLES_QUERY_KEY,
queryFn: () => apiFetch<{ data: Role[] }>('/api/v1/admin/roles').then((r) => r.data),
});
useEffect(() => {
void fetchRoles();
}, [fetchRoles]);
const deleteMutation = useMutation({
mutationFn: (id: string) => apiFetch(`/api/v1/admin/roles/${id}`, { method: 'DELETE' }),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ROLES_QUERY_KEY }),
});
const fetchRoles = () => queryClient.invalidateQueries({ queryKey: ROLES_QUERY_KEY });
function handleNewRole() {
setEditingRole(null);
@@ -63,16 +62,6 @@ export function RoleList() {
setFormOpen(true);
}
async function handleDeleteRole(id: string) {
setDeletingId(id);
try {
await apiFetch(`/api/v1/admin/roles/${id}`, { method: 'DELETE' });
await fetchRoles();
} finally {
setDeletingId(null);
}
}
function countPermissions(perms: Record<string, Record<string, boolean>>): string {
let granted = 0;
let total = 0;
@@ -155,8 +144,8 @@ export function RoleList() {
title="Delete Role"
description={`Delete "${row.original.name}"? Users assigned to this role must be reassigned first.`}
confirmLabel="Delete"
onConfirm={() => handleDeleteRole(row.original.id)}
loading={deletingId === row.original.id}
onConfirm={() => deleteMutation.mutate(row.original.id)}
loading={deleteMutation.isPending && deleteMutation.variables === row.original.id}
/>
)}
</div>

45
src/components/admin/tags/tag-list.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { type ColumnDef } from '@tanstack/react-table';
import { Pencil, Trash2, Plus } from 'lucide-react';
@@ -19,26 +20,24 @@ interface Tag {
createdAt: string;
}
const TAGS_QUERY_KEY = ['admin', 'tags'] as const;
export function TagList() {
const [tags, setTags] = useState<Tag[]>([]);
const [loading, setLoading] = useState(true);
const queryClient = useQueryClient();
const [formOpen, setFormOpen] = useState(false);
const [editingTag, setEditingTag] = useState<Tag | null>(null);
const [deletingId, setDeletingId] = useState<string | null>(null);
const fetchTags = useCallback(async () => {
setLoading(true);
try {
const res = await apiFetch<{ data: Tag[] }>('/api/v1/tags');
setTags(res.data);
} finally {
setLoading(false);
}
}, []);
const { data: tags = [], isLoading: loading } = useQuery<Tag[]>({
queryKey: TAGS_QUERY_KEY,
queryFn: () => apiFetch<{ data: Tag[] }>('/api/v1/tags').then((r) => r.data),
});
useEffect(() => {
void fetchTags();
}, [fetchTags]);
const deleteMutation = useMutation({
mutationFn: (id: string) => apiFetch(`/api/v1/tags/${id}`, { method: 'DELETE' }),
onSuccess: () => queryClient.invalidateQueries({ queryKey: TAGS_QUERY_KEY }),
});
const fetchTags = () => queryClient.invalidateQueries({ queryKey: TAGS_QUERY_KEY });
function handleNewTag() {
setEditingTag(null);
@@ -50,16 +49,6 @@ export function TagList() {
setFormOpen(true);
}
async function handleDeleteTag(id: string) {
setDeletingId(id);
try {
await apiFetch(`/api/v1/tags/${id}`, { method: 'DELETE' });
await fetchTags();
} finally {
setDeletingId(null);
}
}
const columns: ColumnDef<Tag, unknown>[] = [
{
accessorKey: 'name',
@@ -111,8 +100,8 @@ export function TagList() {
title="Delete Tag"
description={`Are you sure you want to delete "${row.original.name}"? This action cannot be undone.`}
confirmLabel="Delete"
onConfirm={() => handleDeleteTag(row.original.id)}
loading={deletingId === row.original.id}
onConfirm={() => deleteMutation.mutate(row.original.id)}
loading={deleteMutation.isPending && deleteMutation.variables === row.original.id}
/>
</div>
),

67
src/components/admin/users/user-list.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { type ColumnDef } from '@tanstack/react-table';
import { Pencil, Trash2, Plus, ShieldCheck, ShieldOff, Power, PowerOff } from 'lucide-react';
@@ -27,27 +28,36 @@ interface UserRow {
assignedAt: string;
}
const USERS_QUERY_KEY = ['admin', 'users'] as const;
export function UserList() {
const [users, setUsers] = useState<UserRow[]>([]);
const [loading, setLoading] = useState(true);
const queryClient = useQueryClient();
const [formOpen, setFormOpen] = useState(false);
const [editingUser, setEditingUser] = useState<UserRow | null>(null);
const [deletingId, setDeletingId] = useState<string | null>(null);
const [togglingId, setTogglingId] = useState<string | null>(null);
const fetchUsers = useCallback(async () => {
setLoading(true);
try {
const res = await apiFetch<{ data: UserRow[] }>('/api/v1/admin/users');
setUsers(res.data);
} finally {
setLoading(false);
}
}, []);
const { data: users = [], isLoading: loading } = useQuery<UserRow[]>({
queryKey: USERS_QUERY_KEY,
queryFn: () => apiFetch<{ data: UserRow[] }>('/api/v1/admin/users').then((r) => r.data),
});
useEffect(() => {
void fetchUsers();
}, [fetchUsers]);
const fetchUsers = () => queryClient.invalidateQueries({ queryKey: USERS_QUERY_KEY });
const removeMutation = useMutation({
mutationFn: (userId: string) => apiFetch(`/api/v1/admin/users/${userId}`, { method: 'DELETE' }),
onSuccess: () => fetchUsers(),
});
const toggleMutation = useMutation({
mutationFn: (user: UserRow) =>
apiFetch(`/api/v1/admin/users/${user.userId}`, {
method: 'PATCH',
body: { isActive: !user.isActive },
}),
onSuccess: () => fetchUsers(),
});
const deletingId = removeMutation.isPending ? removeMutation.variables : null;
const togglingId = toggleMutation.isPending ? (toggleMutation.variables?.userId ?? null) : null;
function handleNewUser() {
setEditingUser(null);
@@ -59,27 +69,12 @@ export function UserList() {
setFormOpen(true);
}
async function handleRemoveUser(userId: string) {
setDeletingId(userId);
try {
await apiFetch(`/api/v1/admin/users/${userId}`, { method: 'DELETE' });
await fetchUsers();
} finally {
setDeletingId(null);
}
function handleRemoveUser(userId: string) {
removeMutation.mutate(userId);
}
async function handleToggleActive(user: UserRow) {
setTogglingId(user.userId);
try {
await apiFetch(`/api/v1/admin/users/${user.userId}`, {
method: 'PATCH',
body: { isActive: !user.isActive },
});
await fetchUsers();
} finally {
setTogglingId(null);
}
function handleToggleActive(user: UserRow) {
toggleMutation.mutate(user);
}
const columns: ColumnDef<UserRow, unknown>[] = [