aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web/components/settings
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/components/settings')
-rw-r--r--apps/web/components/settings/AISettings.tsx44
-rw-r--r--apps/web/components/settings/AddApiKey.tsx30
-rw-r--r--apps/web/components/settings/BackupSettings.tsx47
-rw-r--r--apps/web/components/settings/ChangePassword.tsx41
-rw-r--r--apps/web/components/settings/DeleteApiKey.tsx18
-rw-r--r--apps/web/components/settings/FeedSettings.tsx85
-rw-r--r--apps/web/components/settings/RegenerateApiKey.tsx32
-rw-r--r--apps/web/components/settings/SubscriptionSettings.tsx31
-rw-r--r--apps/web/components/settings/WebhookSettings.tsx56
9 files changed, 224 insertions, 160 deletions
diff --git a/apps/web/components/settings/AISettings.tsx b/apps/web/components/settings/AISettings.tsx
index 78e3ef56..6d8565da 100644
--- a/apps/web/components/settings/AISettings.tsx
+++ b/apps/web/components/settings/AISettings.tsx
@@ -40,10 +40,11 @@ import { toast } from "@/components/ui/sonner";
import { Switch } from "@/components/ui/switch";
import { useClientConfig } from "@/lib/clientConfig";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
import { useUserSettings } from "@/lib/userSettings";
import { cn } from "@/lib/utils";
import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Info, Plus, Save, Trash2 } from "lucide-react";
import { Controller, useForm } from "react-hook-form";
import { z } from "zod";
@@ -340,8 +341,9 @@ export function TagStyleSelector() {
}
export function PromptEditor() {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
const form = useForm<z.infer<typeof zNewPromptSchema>>({
resolver: zodResolver(zNewPromptSchema),
@@ -351,15 +353,16 @@ export function PromptEditor() {
},
});
- const { mutateAsync: createPrompt, isPending: isCreating } =
- api.prompts.create.useMutation({
+ const { mutateAsync: createPrompt, isPending: isCreating } = useMutation(
+ api.prompts.create.mutationOptions({
onSuccess: () => {
toast({
description: "Prompt has been created!",
});
- apiUtils.prompts.list.invalidate();
+ queryClient.invalidateQueries(api.prompts.list.pathFilter());
},
- });
+ }),
+ );
return (
<Form {...form}>
@@ -441,26 +444,29 @@ export function PromptEditor() {
}
export function PromptRow({ prompt }: { prompt: ZPrompt }) {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
- const { mutateAsync: updatePrompt, isPending: isUpdating } =
- api.prompts.update.useMutation({
+ const queryClient = useQueryClient();
+ const { mutateAsync: updatePrompt, isPending: isUpdating } = useMutation(
+ api.prompts.update.mutationOptions({
onSuccess: () => {
toast({
description: "Prompt has been updated!",
});
- apiUtils.prompts.list.invalidate();
+ queryClient.invalidateQueries(api.prompts.list.pathFilter());
},
- });
- const { mutate: deletePrompt, isPending: isDeleting } =
- api.prompts.delete.useMutation({
+ }),
+ );
+ const { mutate: deletePrompt, isPending: isDeleting } = useMutation(
+ api.prompts.delete.mutationOptions({
onSuccess: () => {
toast({
description: "Prompt has been deleted!",
});
- apiUtils.prompts.list.invalidate();
+ queryClient.invalidateQueries(api.prompts.list.pathFilter());
},
- });
+ }),
+ );
const form = useForm<z.infer<typeof zUpdatePromptSchema>>({
resolver: zodResolver(zUpdatePromptSchema),
@@ -574,8 +580,11 @@ export function PromptRow({ prompt }: { prompt: ZPrompt }) {
}
export function TaggingRules() {
+ const api = useTRPC();
const { t } = useTranslation();
- const { data: prompts, isLoading } = api.prompts.list.useQuery();
+ const { data: prompts, isLoading } = useQuery(
+ api.prompts.list.queryOptions(),
+ );
return (
<SettingsSection
@@ -601,8 +610,9 @@ export function TaggingRules() {
}
export function PromptDemo() {
+ const api = useTRPC();
const { t } = useTranslation();
- const { data: prompts } = api.prompts.list.useQuery();
+ const { data: prompts } = useQuery(api.prompts.list.queryOptions());
const settings = useUserSettings();
const clientConfig = useClientConfig();
diff --git a/apps/web/components/settings/AddApiKey.tsx b/apps/web/components/settings/AddApiKey.tsx
index 9ef9047c..11107333 100644
--- a/apps/web/components/settings/AddApiKey.tsx
+++ b/apps/web/components/settings/AddApiKey.tsx
@@ -26,8 +26,9 @@ import {
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/sonner";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
import { PlusCircle } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
@@ -35,23 +36,26 @@ import { z } from "zod";
import ApiKeySuccess from "./ApiKeySuccess";
function AddApiKeyForm({ onSuccess }: { onSuccess: (key: string) => void }) {
+ const api = useTRPC();
const { t } = useTranslation();
const formSchema = z.object({
name: z.string(),
});
const router = useRouter();
- const mutator = api.apiKeys.create.useMutation({
- onSuccess: (resp) => {
- onSuccess(resp.key);
- router.refresh();
- },
- onError: () => {
- toast({
- description: t("common.something_went_wrong"),
- variant: "destructive",
- });
- },
- });
+ const mutator = useMutation(
+ api.apiKeys.create.mutationOptions({
+ onSuccess: (resp) => {
+ onSuccess(resp.key);
+ router.refresh();
+ },
+ onError: () => {
+ toast({
+ description: t("common.something_went_wrong"),
+ variant: "destructive",
+ });
+ },
+ }),
+ );
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
diff --git a/apps/web/components/settings/BackupSettings.tsx b/apps/web/components/settings/BackupSettings.tsx
index ad2b66c6..78418f6c 100644
--- a/apps/web/components/settings/BackupSettings.tsx
+++ b/apps/web/components/settings/BackupSettings.tsx
@@ -24,9 +24,10 @@ import {
import { toast } from "@/components/ui/sonner";
import { Switch } from "@/components/ui/switch";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
import { useUserSettings } from "@/lib/userSettings";
import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
CheckCircle,
Download,
@@ -207,16 +208,17 @@ function BackupConfigurationForm() {
}
function BackupRow({ backup }: { backup: z.infer<typeof zBackupSchema> }) {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
- const { mutate: deleteBackup, isPending: isDeleting } =
- api.backups.delete.useMutation({
+ const { mutate: deleteBackup, isPending: isDeleting } = useMutation(
+ api.backups.delete.mutationOptions({
onSuccess: () => {
toast({
description: t("settings.backups.toasts.backup_deleted"),
});
- apiUtils.backups.list.invalidate();
+ queryClient.invalidateQueries(api.backups.list.pathFilter());
},
onError: (error) => {
toast({
@@ -224,7 +226,8 @@ function BackupRow({ backup }: { backup: z.infer<typeof zBackupSchema> }) {
variant: "destructive",
});
},
- });
+ }),
+ );
const formatSize = (bytes: number) => {
if (bytes < 1024) return `${bytes} B`;
@@ -330,25 +333,28 @@ function BackupRow({ backup }: { backup: z.infer<typeof zBackupSchema> }) {
}
function BackupsList() {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
- const { data: backups, isLoading } = api.backups.list.useQuery(undefined, {
- refetchInterval: (query) => {
- const data = query.state.data;
- // Poll every 3 seconds if there's a pending backup, otherwise don't poll
- return data?.backups.some((backup) => backup.status === "pending")
- ? 3000
- : false;
- },
- });
+ const queryClient = useQueryClient();
+ const { data: backups, isLoading } = useQuery(
+ api.backups.list.queryOptions(undefined, {
+ refetchInterval: (query) => {
+ const data = query.state.data;
+ // Poll every 3 seconds if there's a pending backup, otherwise don't poll
+ return data?.backups.some((backup) => backup.status === "pending")
+ ? 3000
+ : false;
+ },
+ }),
+ );
- const { mutate: triggerBackup, isPending: isTriggering } =
- api.backups.triggerBackup.useMutation({
+ const { mutate: triggerBackup, isPending: isTriggering } = useMutation(
+ api.backups.triggerBackup.mutationOptions({
onSuccess: () => {
toast({
description: t("settings.backups.toasts.backup_queued"),
});
- apiUtils.backups.list.invalidate();
+ queryClient.invalidateQueries(api.backups.list.pathFilter());
},
onError: (error) => {
toast({
@@ -356,7 +362,8 @@ function BackupsList() {
variant: "destructive",
});
},
- });
+ }),
+ );
return (
<div className="rounded-md border bg-background p-4">
diff --git a/apps/web/components/settings/ChangePassword.tsx b/apps/web/components/settings/ChangePassword.tsx
index 1da92267..ae764dd3 100644
--- a/apps/web/components/settings/ChangePassword.tsx
+++ b/apps/web/components/settings/ChangePassword.tsx
@@ -14,8 +14,9 @@ import {
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/sonner";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
import { Eye, EyeOff, Lock } from "lucide-react";
import { useForm } from "react-hook-form";
@@ -25,6 +26,7 @@ import { Button } from "../ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
export function ChangePassword() {
+ const api = useTRPC();
const { t } = useTranslation();
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
const [showNewPassword, setShowNewPassword] = useState(false);
@@ -38,22 +40,27 @@ export function ChangePassword() {
},
});
- const mutator = api.users.changePassword.useMutation({
- onSuccess: () => {
- toast({ description: "Password changed successfully" });
- form.reset();
- },
- onError: (e) => {
- if (e.data?.code == "UNAUTHORIZED") {
- toast({
- description: "Your current password is incorrect",
- variant: "destructive",
- });
- } else {
- toast({ description: "Something went wrong", variant: "destructive" });
- }
- },
- });
+ const mutator = useMutation(
+ api.users.changePassword.mutationOptions({
+ onSuccess: () => {
+ toast({ description: "Password changed successfully" });
+ form.reset();
+ },
+ onError: (e) => {
+ if (e.data?.code == "UNAUTHORIZED") {
+ toast({
+ description: "Your current password is incorrect",
+ variant: "destructive",
+ });
+ } else {
+ toast({
+ description: "Something went wrong",
+ variant: "destructive",
+ });
+ }
+ },
+ }),
+ );
async function onSubmit(value: z.infer<typeof zChangePasswordSchema>) {
mutator.mutate({
diff --git a/apps/web/components/settings/DeleteApiKey.tsx b/apps/web/components/settings/DeleteApiKey.tsx
index b26b40e6..78a895ac 100644
--- a/apps/web/components/settings/DeleteApiKey.tsx
+++ b/apps/web/components/settings/DeleteApiKey.tsx
@@ -5,7 +5,8 @@ import { ActionButton } from "@/components/ui/action-button";
import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
import { Button } from "@/components/ui/button";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation } from "@tanstack/react-query";
import { Trash } from "lucide-react";
import { toast } from "sonner";
@@ -16,14 +17,17 @@ export default function DeleteApiKey({
name: string;
id: string;
}) {
+ const api = useTRPC();
const { t } = useTranslation();
const router = useRouter();
- const mutator = api.apiKeys.revoke.useMutation({
- onSuccess: () => {
- toast.success("Key was successfully deleted");
- router.refresh();
- },
- });
+ const mutator = useMutation(
+ api.apiKeys.revoke.mutationOptions({
+ onSuccess: () => {
+ toast.success("Key was successfully deleted");
+ router.refresh();
+ },
+ }),
+ );
return (
<ActionConfirmingDialog
diff --git a/apps/web/components/settings/FeedSettings.tsx b/apps/web/components/settings/FeedSettings.tsx
index a49bb0b2..acf947a3 100644
--- a/apps/web/components/settings/FeedSettings.tsx
+++ b/apps/web/components/settings/FeedSettings.tsx
@@ -16,9 +16,10 @@ import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/sonner";
import { Switch } from "@/components/ui/switch";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
import { cn } from "@/lib/utils";
import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
ArrowDownToLine,
CheckCircle,
@@ -61,9 +62,10 @@ import {
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
export function FeedsEditorDialog() {
+ const api = useTRPC();
const { t } = useTranslation();
const [open, setOpen] = React.useState(false);
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
const form = useForm<z.infer<typeof zNewFeedSchema>>({
resolver: zodResolver(zNewFeedSchema),
@@ -81,16 +83,17 @@ export function FeedsEditorDialog() {
}
}, [open]);
- const { mutateAsync: createFeed, isPending: isCreating } =
- api.feeds.create.useMutation({
+ const { mutateAsync: createFeed, isPending: isCreating } = useMutation(
+ api.feeds.create.mutationOptions({
onSuccess: () => {
toast({
description: "Feed has been created!",
});
- apiUtils.feeds.list.invalidate();
+ queryClient.invalidateQueries(api.feeds.list.pathFilter());
setOpen(false);
},
- });
+ }),
+ );
return (
<Dialog open={open} onOpenChange={setOpen}>
@@ -191,8 +194,9 @@ export function FeedsEditorDialog() {
}
export function EditFeedDialog({ feed }: { feed: ZFeed }) {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
if (open) {
@@ -204,16 +208,17 @@ export function EditFeedDialog({ feed }: { feed: ZFeed }) {
});
}
}, [open]);
- const { mutateAsync: updateFeed, isPending: isUpdating } =
- api.feeds.update.useMutation({
+ const { mutateAsync: updateFeed, isPending: isUpdating } = useMutation(
+ api.feeds.update.mutationOptions({
onSuccess: () => {
toast({
description: "Feed has been updated!",
});
setOpen(false);
- apiUtils.feeds.list.invalidate();
+ queryClient.invalidateQueries(api.feeds.list.pathFilter());
},
- });
+ }),
+ );
const form = useForm<z.infer<typeof zUpdateFeedSchema>>({
resolver: zodResolver(zUpdateFeedSchema),
defaultValues: {
@@ -339,44 +344,49 @@ export function EditFeedDialog({ feed }: { feed: ZFeed }) {
}
export function FeedRow({ feed }: { feed: ZFeed }) {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
- const { mutate: deleteFeed, isPending: isDeleting } =
- api.feeds.delete.useMutation({
+ const queryClient = useQueryClient();
+ const { mutate: deleteFeed, isPending: isDeleting } = useMutation(
+ api.feeds.delete.mutationOptions({
onSuccess: () => {
toast({
description: "Feed has been deleted!",
});
- apiUtils.feeds.list.invalidate();
+ queryClient.invalidateQueries(api.feeds.list.pathFilter());
},
- });
+ }),
+ );
- const { mutate: fetchNow, isPending: isFetching } =
- api.feeds.fetchNow.useMutation({
+ const { mutate: fetchNow, isPending: isFetching } = useMutation(
+ api.feeds.fetchNow.mutationOptions({
onSuccess: () => {
toast({
description: "Feed fetch has been enqueued!",
});
- apiUtils.feeds.list.invalidate();
+ queryClient.invalidateQueries(api.feeds.list.pathFilter());
},
- });
+ }),
+ );
- const { mutate: updateFeedEnabled } = api.feeds.update.useMutation({
- onSuccess: () => {
- toast({
- description: feed.enabled
- ? t("settings.feeds.feed_disabled")
- : t("settings.feeds.feed_enabled"),
- });
- apiUtils.feeds.list.invalidate();
- },
- onError: (error) => {
- toast({
- description: `Error: ${error.message}`,
- variant: "destructive",
- });
- },
- });
+ const { mutate: updateFeedEnabled } = useMutation(
+ api.feeds.update.mutationOptions({
+ onSuccess: () => {
+ toast({
+ description: feed.enabled
+ ? t("settings.feeds.feed_disabled")
+ : t("settings.feeds.feed_enabled"),
+ });
+ queryClient.invalidateQueries(api.feeds.list.pathFilter());
+ },
+ onError: (error) => {
+ toast({
+ description: `Error: ${error.message}`,
+ variant: "destructive",
+ });
+ },
+ }),
+ );
const handleToggle = (checked: boolean) => {
updateFeedEnabled({ feedId: feed.id, enabled: checked });
@@ -456,8 +466,9 @@ export function FeedRow({ feed }: { feed: ZFeed }) {
}
export default function FeedSettings() {
+ const api = useTRPC();
const { t } = useTranslation();
- const { data: feeds, isLoading } = api.feeds.list.useQuery();
+ const { data: feeds, isLoading } = useQuery(api.feeds.list.queryOptions());
return (
<>
<div className="rounded-md border bg-background p-4">
diff --git a/apps/web/components/settings/RegenerateApiKey.tsx b/apps/web/components/settings/RegenerateApiKey.tsx
index f4914598..9ee0e216 100644
--- a/apps/web/components/settings/RegenerateApiKey.tsx
+++ b/apps/web/components/settings/RegenerateApiKey.tsx
@@ -16,7 +16,8 @@ import {
} from "@/components/ui/dialog";
import { toast } from "@/components/ui/sonner";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation } from "@tanstack/react-query";
import { RefreshCcw } from "lucide-react";
import ApiKeySuccess from "./ApiKeySuccess";
@@ -28,25 +29,28 @@ export default function RegenerateApiKey({
id: string;
name: string;
}) {
+ const api = useTRPC();
const { t } = useTranslation();
const router = useRouter();
const [key, setKey] = useState<string | undefined>(undefined);
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
- const mutator = api.apiKeys.regenerate.useMutation({
- onSuccess: (resp) => {
- setKey(resp.key);
- router.refresh();
- },
- onError: () => {
- toast({
- description: t("common.something_went_wrong"),
- variant: "destructive",
- });
- setDialogOpen(false);
- },
- });
+ const mutator = useMutation(
+ api.apiKeys.regenerate.mutationOptions({
+ onSuccess: (resp) => {
+ setKey(resp.key);
+ router.refresh();
+ },
+ onError: () => {
+ toast({
+ description: t("common.something_went_wrong"),
+ variant: "destructive",
+ });
+ setDialogOpen(false);
+ },
+ }),
+ );
const handleRegenerate = () => {
mutator.mutate({ id });
diff --git a/apps/web/components/settings/SubscriptionSettings.tsx b/apps/web/components/settings/SubscriptionSettings.tsx
index 03337c1b..3799d08b 100644
--- a/apps/web/components/settings/SubscriptionSettings.tsx
+++ b/apps/web/components/settings/SubscriptionSettings.tsx
@@ -3,7 +3,8 @@
import { useEffect } from "react";
import { toast } from "@/components/ui/sonner";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
+import { useMutation, useQuery } from "@tanstack/react-query";
import { CreditCard, Loader2 } from "lucide-react";
import { Alert, AlertDescription } from "../ui/alert";
@@ -19,24 +20,27 @@ import {
import { Skeleton } from "../ui/skeleton";
export default function SubscriptionSettings() {
+ const api = useTRPC();
const { t } = useTranslation();
const {
data: subscriptionStatus,
refetch,
isLoading: isQueryLoading,
- } = api.subscriptions.getSubscriptionStatus.useQuery();
+ } = useQuery(api.subscriptions.getSubscriptionStatus.queryOptions());
- const { data: subscriptionPrice } =
- api.subscriptions.getSubscriptionPrice.useQuery();
+ const { data: subscriptionPrice } = useQuery(
+ api.subscriptions.getSubscriptionPrice.queryOptions(),
+ );
- const { mutate: syncStripeState } =
- api.subscriptions.syncWithStripe.useMutation({
+ const { mutate: syncStripeState } = useMutation(
+ api.subscriptions.syncWithStripe.mutationOptions({
onSuccess: () => {
refetch();
},
- });
- const createCheckoutSession =
- api.subscriptions.createCheckoutSession.useMutation({
+ }),
+ );
+ const createCheckoutSession = useMutation(
+ api.subscriptions.createCheckoutSession.mutationOptions({
onSuccess: (resp) => {
if (resp.url) {
window.location.href = resp.url;
@@ -48,9 +52,10 @@ export default function SubscriptionSettings() {
variant: "destructive",
});
},
- });
- const createPortalSession = api.subscriptions.createPortalSession.useMutation(
- {
+ }),
+ );
+ const createPortalSession = useMutation(
+ api.subscriptions.createPortalSession.mutationOptions({
onSuccess: (resp) => {
if (resp.url) {
window.location.href = resp.url;
@@ -62,7 +67,7 @@ export default function SubscriptionSettings() {
variant: "destructive",
});
},
- },
+ }),
);
const isLoading =
diff --git a/apps/web/components/settings/WebhookSettings.tsx b/apps/web/components/settings/WebhookSettings.tsx
index 73671787..89f11b66 100644
--- a/apps/web/components/settings/WebhookSettings.tsx
+++ b/apps/web/components/settings/WebhookSettings.tsx
@@ -14,8 +14,9 @@ import { FullPageSpinner } from "@/components/ui/full-page-spinner";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/sonner";
import { useTranslation } from "@/lib/i18n/client";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
Edit,
KeyRound,
@@ -56,9 +57,10 @@ import {
import { WebhookEventSelector } from "./WebhookEventSelector";
export function WebhooksEditorDialog() {
+ const api = useTRPC();
const { t } = useTranslation();
const [open, setOpen] = React.useState(false);
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
const form = useForm<z.infer<typeof zNewWebhookSchema>>({
resolver: zodResolver(zNewWebhookSchema),
@@ -75,16 +77,17 @@ export function WebhooksEditorDialog() {
}
}, [open]);
- const { mutateAsync: createWebhook, isPending: isCreating } =
- api.webhooks.create.useMutation({
+ const { mutateAsync: createWebhook, isPending: isCreating } = useMutation(
+ api.webhooks.create.mutationOptions({
onSuccess: () => {
toast({
description: "Webhook has been created!",
});
- apiUtils.webhooks.list.invalidate();
+ queryClient.invalidateQueries(api.webhooks.list.pathFilter());
setOpen(false);
},
- });
+ }),
+ );
return (
<Dialog open={open} onOpenChange={setOpen}>
@@ -179,8 +182,9 @@ export function WebhooksEditorDialog() {
}
export function EditWebhookDialog({ webhook }: { webhook: ZWebhook }) {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
if (open) {
@@ -191,16 +195,17 @@ export function EditWebhookDialog({ webhook }: { webhook: ZWebhook }) {
});
}
}, [open]);
- const { mutateAsync: updateWebhook, isPending: isUpdating } =
- api.webhooks.update.useMutation({
+ const { mutateAsync: updateWebhook, isPending: isUpdating } = useMutation(
+ api.webhooks.update.mutationOptions({
onSuccess: () => {
toast({
description: "Webhook has been updated!",
});
setOpen(false);
- apiUtils.webhooks.list.invalidate();
+ queryClient.invalidateQueries(api.webhooks.list.pathFilter());
},
- });
+ }),
+ );
const updateSchema = zUpdateWebhookSchema.required({
events: true,
url: true,
@@ -302,8 +307,9 @@ export function EditWebhookDialog({ webhook }: { webhook: ZWebhook }) {
}
export function EditTokenDialog({ webhook }: { webhook: ZWebhook }) {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
+ const queryClient = useQueryClient();
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
if (open) {
@@ -331,16 +337,17 @@ export function EditTokenDialog({ webhook }: { webhook: ZWebhook }) {
},
});
- const { mutateAsync: updateWebhook, isPending: isUpdating } =
- api.webhooks.update.useMutation({
+ const { mutateAsync: updateWebhook, isPending: isUpdating } = useMutation(
+ api.webhooks.update.mutationOptions({
onSuccess: () => {
toast({
description: "Webhook token has been updated!",
});
setOpen(false);
- apiUtils.webhooks.list.invalidate();
+ queryClient.invalidateQueries(api.webhooks.list.pathFilter());
},
- });
+ }),
+ );
return (
<Dialog open={open} onOpenChange={setOpen}>
@@ -432,17 +439,19 @@ export function EditTokenDialog({ webhook }: { webhook: ZWebhook }) {
}
export function WebhookRow({ webhook }: { webhook: ZWebhook }) {
+ const api = useTRPC();
const { t } = useTranslation();
- const apiUtils = api.useUtils();
- const { mutate: deleteWebhook, isPending: isDeleting } =
- api.webhooks.delete.useMutation({
+ const queryClient = useQueryClient();
+ const { mutate: deleteWebhook, isPending: isDeleting } = useMutation(
+ api.webhooks.delete.mutationOptions({
onSuccess: () => {
toast({
description: "Webhook has been deleted!",
});
- apiUtils.webhooks.list.invalidate();
+ queryClient.invalidateQueries(api.webhooks.list.pathFilter());
},
- });
+ }),
+ );
return (
<TableRow>
@@ -479,8 +488,11 @@ export function WebhookRow({ webhook }: { webhook: ZWebhook }) {
}
export default function WebhookSettings() {
+ const api = useTRPC();
const { t } = useTranslation();
- const { data: webhooks, isLoading } = api.webhooks.list.useQuery();
+ const { data: webhooks, isLoading } = useQuery(
+ api.webhooks.list.queryOptions(),
+ );
return (
<div className="rounded-md border bg-background p-4">
<div className="flex flex-col gap-2">
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-11 16:29:13 +0000