Skip to content

Commit 567ac85

Browse files
sbansal1999sbansal1999
authored
refactor: migrate database connection handling to custom hooks (#137)
1 parent 758798b commit 567ac85

File tree

9 files changed

+88
-188
lines changed

9 files changed

+88
-188
lines changed

‎apps/dashboard/app/(main)/observability/database/[id]/page.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { use } from 'react';
1313
import { DataTable } from '@/components/analytics/data-table';
1414
import { Badge } from '@/components/ui/badge';
1515
import { Card, CardContent } from '@/components/ui/card';
16+
import { useDbConnection } from '@/hooks/use-db-connections';
1617
import { trpc } from '@/lib/trpc';
1718

1819
interface DatabasePageProps {
@@ -306,14 +307,12 @@ export default function DatabasePage({ params }: DatabasePageProps) {
306307
const resolvedParams = use(params);
307308
const connectionId = resolvedParams.id;
308309

309-
// Get connection details
310310
const {
311311
data: connection,
312312
isLoading: isLoadingConnection,
313313
error: connectionError,
314-
} = trpc.dbConnections.getById.useQuery({ id: connectionId });
314+
} = useDbConnection(connectionId);
315315

316-
// Get database stats
317316
const {
318317
data: databaseStats,
319318
isLoading: isLoadingStats,
@@ -323,7 +322,6 @@ export default function DatabasePage({ params }: DatabasePageProps) {
323322
{ enabled: !!connection }
324323
);
325324

326-
// Get table stats
327325
const {
328326
data: tableStats,
329327
isLoading: isLoadingTables,
@@ -333,7 +331,6 @@ export default function DatabasePage({ params }: DatabasePageProps) {
333331
{ enabled: !!connection }
334332
);
335333

336-
// Show loading state while connection is loading
337334
if (isLoadingConnection) {
338335
return (
339336
<Card className="rounded">

‎apps/dashboard/app/(main)/observability/database/[id]/plugins/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
SelectValue,
3131
} from '@/components/ui/select';
3232
import { Skeleton } from '@/components/ui/skeleton';
33+
import { useDbConnection } from '@/hooks/use-db-connections';
3334
import { trpc } from '@/lib/trpc';
3435
import {
3536
ExtensionSearch,
@@ -458,10 +459,7 @@ export default function ExtensionsPage({ params }: ExtensionsPageProps) {
458459

459460
const utils = trpc.useUtils();
460461

461-
// Queries
462-
const { data: connection } = trpc.dbConnections.getById.useQuery({
463-
id: connectionId,
464-
});
462+
const { data: connection } = useDbConnection(connectionId);
465463
const { data: extensions } = trpc.dbConnections.getExtensions.useQuery({
466464
id: connectionId,
467465
});

‎apps/dashboard/app/(main)/observability/database/[id]/settings/page.tsx‎

Lines changed: 18 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@ import {
3030
import { Input } from '@/components/ui/input';
3131
import { Label } from '@/components/ui/label';
3232
import { Separator } from '@/components/ui/separator';
33+
import {
34+
useDbConnection,
35+
useDeleteDbConnection,
36+
useUpdateDbConnection,
37+
} from '@/hooks/use-db-connections';
3338
import { trpc } from '@/lib/trpc';
39+
import { EditConnectionDialog } from '../../_components/edit-connection-dialog';
3440

3541
interface ConnectionSettingsPageProps {
3642
params: Promise<{ id: string }>;
@@ -63,80 +69,6 @@ function LoadingState() {
6369
);
6470
}
6571

66-
function EditConnectionDialog({
67-
open,
68-
onOpenChange,
69-
connection,
70-
onSuccess,
71-
}: {
72-
open: boolean;
73-
onOpenChange: (open: boolean) => void;
74-
connection: { id: string; name: string } | null;
75-
onSuccess: () => void;
76-
}) {
77-
const [name, setName] = useState(connection?.name || '');
78-
79-
const updateMutation = trpc.dbConnections.update.useMutation({
80-
onSuccess: () => {
81-
onSuccess();
82-
onOpenChange(false);
83-
},
84-
});
85-
86-
const handleSave = () => {
87-
if (!(connection && name.trim())) {
88-
return;
89-
}
90-
updateMutation.mutate({
91-
id: connection.id,
92-
name: name.trim(),
93-
});
94-
};
95-
96-
return (
97-
<Dialog onOpenChange={onOpenChange} open={open}>
98-
<DialogContent>
99-
<DialogHeader>
100-
<DialogTitle>Edit Connection</DialogTitle>
101-
<DialogDescription>
102-
Update the name and basic settings for this database connection.
103-
</DialogDescription>
104-
</DialogHeader>
105-
<div className="space-y-4">
106-
<div>
107-
<Label htmlFor="connection-name">Connection Name</Label>
108-
<Input
109-
id="connection-name"
110-
onChange={(e) => setName(e.target.value)}
111-
placeholder="Enter connection name"
112-
value={name}
113-
/>
114-
</div>
115-
{updateMutation.error && (
116-
<Alert className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
117-
<WarningIcon className="h-4 w-4 text-red-600" />
118-
<AlertDescription className="text-red-800 dark:text-red-200">
119-
{updateMutation.error.message}
120-
</AlertDescription>
121-
</Alert>
122-
)}
123-
</div>
124-
<DialogFooter>
125-
<Button onClick={() => onOpenChange(false)} variant="outline">
126-
Cancel
127-
</Button>
128-
<Button
129-
disabled={!name.trim() || updateMutation.isPending}
130-
onClick={handleSave}
131-
>
132-
{updateMutation.isPending ? 'Saving...' : 'Save Changes'}
133-
</Button>
134-
</DialogFooter>
135-
</DialogContent>
136-
</Dialog>
137-
);
138-
}
139-
14072
function DeleteConnectionDialog({
14173
open,
14274
onOpenChange,
@@ -150,7 +82,7 @@ function DeleteConnectionDialog({
15082
}) {
15183
const [confirmName, setConfirmName] = useState('');
15284

153-
const deleteMutation = trpc.dbConnections.delete.useMutation({
85+
const deleteMutation = useDeleteDbConnection({
15486
onSuccess: () => {
15587
onSuccess();
15688
onOpenChange(false);
@@ -235,8 +167,13 @@ export default function ConnectionSettingsPage({
235167

236168
const utils = trpc.useUtils();
237169

238-
const { data: connection, isLoading } = trpc.dbConnections.getById.useQuery({
239-
id: connectionId,
170+
const { data: connection, isLoading } = useDbConnection(connectionId);
171+
172+
const updateMutation = useUpdateDbConnection({
173+
onSuccess: () => {
174+
handleSuccess('Connection updated successfully');
175+
setEditDialog(false);
176+
},
240177
});
241178

242179
const handleSuccess = (message: string) => {
@@ -494,8 +431,11 @@ export default function ConnectionSettingsPage({
494431
{/* Dialogs */}
495432
<EditConnectionDialog
496433
connection={connection}
434+
isLoading={updateMutation.isPending}
497435
onOpenChange={setEditDialog}
498-
onSuccess={() => handleSuccess('Connection updated successfully')}
436+
onSubmit={(data) => {
437+
updateMutation.mutate(data);
438+
}}
499439
open={editDialog}
500440
/>
501441

‎apps/dashboard/app/(main)/observability/database/_components/connection-card.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,10 @@ import {
1515
DropdownMenuItem,
1616
DropdownMenuTrigger,
1717
} from '@/components/ui/dropdown-menu';
18-
19-
interface DatabaseConnection {
20-
id: string;
21-
name: string;
22-
type: string;
23-
userId: string;
24-
organizationId?: string;
25-
createdAt: string;
26-
updatedAt: string;
27-
}
18+
import type { DbConnection } from '@/hooks/use-db-connections';
2819

2920
interface ConnectionCardProps {
30-
connection: DatabaseConnection;
21+
connection: DbConnection;
3122
onEdit: () => void;
3223
onDelete: () => void;
3324
}
@@ -113,7 +104,7 @@ export function ConnectionCard({
113104
onDelete();
114105
}}
115106
>
116-
<TrashIcon className="mr-2 h-4 w-4" />
107+
<TrashIcon className="mr-2 h-4 w-4" color="red" />
117108
Delete
118109
</DropdownMenuItem>
119110
</DropdownMenuContent>

‎apps/dashboard/app/(main)/observability/database/_components/connections-list.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
11
'use client';
22

3+
import type { DbConnection } from '@/hooks/use-db-connections';
34
import { ConnectionCard } from './connection-card';
45
import { EmptyState } from './empty-state';
56

6-
interface DatabaseConnection {
7-
id: string;
8-
name: string;
9-
type: string;
10-
userId: string;
11-
createdAt: string;
12-
updatedAt: string;
13-
}
14-
157
interface ConnectionsListProps {
16-
connections: DatabaseConnection[];
8+
connections: DbConnection[];
179
isLoading: boolean;
18-
onEdit: (connection: DatabaseConnection) => void;
19-
onDelete: (connection: DatabaseConnection) => void;
10+
onEdit: (connection: DbConnection) => void;
11+
onDelete: (connection: DbConnection) => void;
2012
onCreate: () => void;
2113
}
2214

‎apps/dashboard/app/(main)/observability/database/_components/edit-connection-dialog.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,10 @@ import {
1313
} from '@/components/ui/dialog';
1414
import { Input } from '@/components/ui/input';
1515
import { Label } from '@/components/ui/label';
16-
17-
interface DatabaseConnection {
18-
id: string;
19-
name: string;
20-
type: string;
21-
userId: string;
22-
organizationId?: string;
23-
createdAt: string;
24-
updatedAt: string;
25-
}
16+
import type { DbConnection } from '@/hooks/use-db-connections';
2617

2718
interface EditConnectionDialogProps {
28-
connection: DatabaseConnection | null;
19+
connection: DbConnection;
2920
open: boolean;
3021
onOpenChange: (open: boolean) => void;
3122
onSubmit: (data: { id: string; name: string }) => void;

0 commit comments

Comments
 (0)