From a4f8ab6ad91cbdce6bc79444bdee94df5bc130b5 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 3 Dec 2023 21:35:20 -0800
Subject: [PATCH] Fixed mutate queries.

---
 src/app/(main)/reports/[id]/ReportHeader.tsx         | 12 ++++++------
 src/app/(main)/settings/profile/PasswordEditForm.tsx |  6 ++++--
 src/app/(main)/settings/teams/[id]/TeamEditForm.tsx  |  8 +++++---
 .../settings/teams/[id]/TeamWebsiteRemoveButton.tsx  |  8 +++++---
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/app/(main)/reports/[id]/ReportHeader.tsx b/src/app/(main)/reports/[id]/ReportHeader.tsx
index 6d226344..d69cd0cd 100644
--- a/src/app/(main)/reports/[id]/ReportHeader.tsx
+++ b/src/app/(main)/reports/[id]/ReportHeader.tsx
@@ -12,12 +12,12 @@ export function ReportHeader({ icon }) {
   const { showToast } = useToasts();
   const { post, useMutation } = useApi();
   const router = useRouter();
-  const { mutate: create, isLoading: isCreating } = useMutation((data: any) =>
-    post(`/reports`, data),
-  );
-  const { mutate: update, isLoading: isUpdating } = useMutation((data: any) =>
-    post(`/reports/${data.id}`, data),
-  );
+  const { mutate: create, isPending: isCreating } = useMutation({
+    mutationFn: (data: any) => post(`/reports`, data),
+  });
+  const { mutate: update, isPending: isUpdating } = useMutation({
+    mutationFn: (data: any) => post(`/reports/${data.id}`, data),
+  });
 
   const { name, description, parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
diff --git a/src/app/(main)/settings/profile/PasswordEditForm.tsx b/src/app/(main)/settings/profile/PasswordEditForm.tsx
index 7062ea59..1384a919 100644
--- a/src/app/(main)/settings/profile/PasswordEditForm.tsx
+++ b/src/app/(main)/settings/profile/PasswordEditForm.tsx
@@ -6,7 +6,9 @@ import useMessages from 'components/hooks/useMessages';
 export function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation((data: any) => post('/me/password', data));
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post('/me/password', data),
+  });
   const ref = useRef(null);
 
   const handleSubmit = async (data: any) => {
@@ -56,7 +58,7 @@ export function PasswordEditForm({ onSave, onClose }) {
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <Button type="submit" variant="primary" disabled={isLoading}>
+        <Button type="submit" variant="primary" disabled={isPending}>
           {formatMessage(labels.save)}
         </Button>
         <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
diff --git a/src/app/(main)/settings/teams/[id]/TeamEditForm.tsx b/src/app/(main)/settings/teams/[id]/TeamEditForm.tsx
index b1dc5854..420afe9b 100644
--- a/src/app/(main)/settings/teams/[id]/TeamEditForm.tsx
+++ b/src/app/(main)/settings/teams/[id]/TeamEditForm.tsx
@@ -18,15 +18,17 @@ const generateId = () => getRandomChars(16);
 export function TeamEditForm({ teamId, data, onSave, readOnly }) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/teams/${teamId}`, data),
+  });
   const ref = useRef(null);
   const [accessCode, setAccessCode] = useState(data.accessCode);
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         ref.current.reset(data);
-        onSave(data);
+        onSave?.(data);
       },
     });
   };
diff --git a/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx b/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx
index 59e393e1..0c039d4e 100644
--- a/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx
+++ b/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx
@@ -5,10 +5,12 @@ import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   const { formatMessage, labels } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/websites/${websiteId}`));
+  const { mutate, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/websites/${websiteId}`),
+  });
 
   const handleRemoveTeamMember = async () => {
-    await mutate(null, {
+    mutate(null, {
       onSuccess: () => {
         onSave();
       },
@@ -16,7 +18,7 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   };
 
   return (
-    <LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
+    <LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isPending}>
       <Icon>
         <Icons.Close />
       </Icon>