updated react query and other dependencies

ohcnetwork · Jan 30, 2024 · 8ff0b16 · 8ff0b16
1 parent cccefd9
commit 8ff0b16
Show file tree

Hide file tree

Showing 33 changed files with 1,255 additions and 1,148 deletions.
diff --git a/package.json b/package.json
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@sentry/nextjs": "^7.88.0",
-    "@tanstack/react-query": "^4.29.3",
-    "@tanstack/react-query-devtools": "^4.29.3",
+    "@sentry/nextjs": "^7.98.0",
+    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query-devtools": "^5.17.21",
     "audio-recorder-polyfill": "^0.4.1",
     "jotai": "^2.0.4",
     "json2csv": "^6.0.0-alpha.2",
@@ -33,10 +33,10 @@
     "react-google-recaptcha": "^3.1.0",
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroller": "^1.2.6",
-    "react-markdown": "^8.0.7",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "^3.0.1",
-    "tailwind-merge": "^1.12.0"
+    "react-markdown": "^9.0.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/eslint": "^8",
@@ -49,7 +49,7 @@
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
-    "husky": "^8.0.3",
+    "husky": "^9.0.7",
     "postcss": "^8.4.33",
     "postcss-prefixer": "^3.0.0",
     "prettier": "^3.1.1",

diff --git a/src/app/(auth)/forgot-password/page.tsx b/src/app/(auth)/forgot-password/page.tsx
@@ -1,9 +1,7 @@
 "use client";
 import { Button, Errors, Input } from "@/components/ui/interactive";
-import { storageAtom } from "@/store";
 import { API } from "@/utils/api";
 import { useMutation } from "@tanstack/react-query";
-import { useAtom } from "jotai";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -14,11 +12,13 @@ export default function ForgotPassword() {
   });
   const router = useRouter();
 
-  const forgotMutation = useMutation(() => API.user.forgot(creds.email), {
-    onSuccess: (data) => {
-      router.push("/reset-password?email=" + creds.email);
-    },
-  });
+  const forgotMutation = useMutation(
+    {
+      mutationFn: () => API.user.forgot(creds.email),
+      onSuccess: (data) => {
+        router.push("/reset-password?email=" + creds.email);
+      },
+    });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -43,7 +43,7 @@ export default function ForgotPassword() {
         <Errors
           errors={(forgotMutation.error as any)?.error?.non_field_errors}
         />
-        <Button loading={forgotMutation.isLoading}>Send OTP</Button>
+        <Button loading={forgotMutation.isPending}>Send OTP</Button>
         <p>
           <Link href="/login" className="text-green-500 hover:text-green-600">
             Go back

diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -19,8 +19,8 @@ export default function Login() {
   const resetSuccess = sp?.get("reset_success");
 
   const loginMutation = useMutation(
-    () => API.user.login(creds.email, creds.password),
     {
+      mutationFn: () => API.user.login(creds.email, creds.password),
       onSuccess: (data) => {
         setStorage({
           ...storage,
@@ -68,7 +68,7 @@ export default function Login() {
         <Errors
           errors={(loginMutation.error as any)?.error?.non_field_errors}
         />
-        <Button loading={loginMutation.isLoading}>Login</Button>
+        <Button loading={loginMutation.isPending}>Login</Button>
         <p>
           Don&apos;t have an account?{" "}
           <Link

diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx
@@ -20,11 +20,13 @@ export default function Register() {
   });
   const router = useRouter();
 
-  const registerMutation = useMutation(() => API.user.register(creds), {
-    onSuccess: (data) => {
-      router.push("/login");
-    },
-  });
+  const registerMutation = useMutation(
+    {
+      mutationFn: () => API.user.register(creds),
+      onSuccess: (data) => {
+        router.push("/login");
+      },
+    });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -81,7 +83,7 @@ export default function Register() {
         <Errors
           errors={(registerMutation.error as any)?.error?.non_field_errors}
         />
-        <Button loading={registerMutation.isLoading}>Register</Button>
+        <Button loading={registerMutation.isPending}>Register</Button>
         <p>
           Already have an account?{" "}
           <Link href="/login" className="text-green-500 hover:text-green-600">

diff --git a/src/app/(auth)/reset-password/page.tsx b/src/app/(auth)/reset-password/page.tsx
@@ -20,11 +20,13 @@ export default function ForgotPassword() {
 
   const router = useRouter();
 
-  const verifyMutation = useMutation(() => API.user.verify(otp, email || ""), {
-    onSuccess: (data) => {
-      setVerified(true);
-    },
-  });
+  const verifyMutation = useMutation(
+    {
+      mutationFn: () => API.user.verify(otp, email || ""),
+      onSuccess: (data) => {
+        setVerified(true);
+      },
+    });
 
   useEffect(() => {
     if (token && email) {
@@ -38,8 +40,8 @@ export default function ForgotPassword() {
   };
 
   const resetMutation = useMutation(
-    () => API.user.reset(otp, email || "", password.password),
     {
+      mutationFn: () => API.user.reset(otp, email || "", password.password),
       onSuccess: (data) => {
         router.push("/login?reset_success=true");
       },
@@ -93,7 +95,7 @@ export default function ForgotPassword() {
               })
             }
           />
-          <Button loading={resetMutation.isLoading}>Reset</Button>
+          <Button loading={resetMutation.isPending}>Reset</Button>
           <p>
             <Link href="/login" className="text-green-500 hover:text-green-600">
               Cancel
@@ -119,7 +121,7 @@ export default function ForgotPassword() {
         <Errors
           errors={(verifyMutation.error as any)?.error?.non_field_errors}
         />
-        <Button loading={verifyMutation.isLoading}>Verify</Button>
+        <Button loading={verifyMutation.isPending}>Verify</Button>
         <p>
           <Link href="/login" className="text-green-500 hover:text-green-600">
             Go back

diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
@@ -1,12 +1,15 @@
 "use client";
 import { Project } from "@/types/project";
-import { API } from "@/utils/api";
+import { API, paginatedResponse } from "@/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export default function Page() {
-  const projectsQuery = useQuery(["projects"], () => API.projects.list());
+  const projectsQuery = useQuery<paginatedResponse<Project>>({
+    queryKey: ["projects"],
+    queryFn: () => API.projects.list()
+  });
   const router = useRouter();
 
   useEffect(() => {

diff --git a/src/app/(main)/profile/page.tsx b/src/app/(main)/profile/page.tsx
@@ -14,7 +14,10 @@ export default function Page() {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
-  const userQuery = useQuery<User, Error>(["userDetails"], API.user.me);
+  const userQuery = useQuery<User, Error>({
+    queryKey: ["userDetails"],
+    queryFn: API.user.me
+  });
   const userData: User | undefined = userQuery.data || undefined;
 
   const [formData, setFormData] = useState({
@@ -34,8 +37,8 @@ export default function Page() {
   };
 
   const updateProfileMutation = useMutation(
-    (params: { userDetails: UserUpdate }) => API.user.save(params.userDetails),
     {
+      mutationFn: (params: { userDetails: UserUpdate }) => API.user.save(params.userDetails),
       retry: false,
       onSuccess: async (data, vars) => {
         toast.success("Profile updated successfully");

diff --git a/src/app/(main)/project/[project_id]/chat/[chat_id]/page.tsx b/src/app/(main)/project/[project_id]/chat/[chat_id]/page.tsx
@@ -25,17 +25,17 @@ export default function Chat(params: {
   const [isTyping, setIsTyping] = useState<boolean>(false);
 
   const chatQuery = useQuery(
-    ["chat", chat_id],
-    () => API.chat.get(project_id, chat_id),
     {
+      queryKey: ["chat", chat_id],
+      queryFn: () => API.chat.get(project_id, chat_id),
       refetchOnWindowFocus: false,
     },
   );
 
   const projectQuery = useQuery(
-    ["chat", project_id],
-    () => API.projects.get(project_id),
     {
+      queryKey: ["chat", project_id],
+      queryFn: () => API.projects.get(project_id),
       refetchOnWindowFocus: false,
     },
   );
@@ -92,17 +92,17 @@ export default function Chat(params: {
   };
 
   const converseMutation = useMutation(
-    (params: { formdata: FormData }) =>
-      API.chat.converse(
-        project_id,
-        chat_id,
-        params.formdata,
-        openai_key,
-        streamChatMessage,
-        20,
-        !project?.assistant_id,
-      ),
     {
+      mutationFn: (params: { formdata: FormData }) =>
+        API.chat.converse(
+          project_id,
+          chat_id,
+          params.formdata,
+          openai_key,
+          streamChatMessage,
+          20,
+          !project?.assistant_id,
+        ),
       retry: false,
       onSuccess: async (data, vars) => {
         setAutoPlayIndex((chat?.chats?.length || 0) + 1);
@@ -194,7 +194,7 @@ export default function Chat(params: {
           onSubmit={handleSubmit}
           onAudio={handleAudio}
           errors={[(converseMutation.error as any)?.error?.error]}
-          loading={converseMutation.isLoading || isTyping}
+          loading={converseMutation.isPending || isTyping}
           projectId={project_id}
         />
         <p className="text-xs pl-0.5 text-center text-gray-500">

diff --git a/src/app/(main)/project/[project_id]/page.tsx b/src/app/(main)/project/[project_id]/page.tsx
@@ -32,9 +32,9 @@ export default function Chat(params: { params: { project_id: string } }) {
   }, [chatID, isTyping, project_id, router]);
 
   const projectQuery = useQuery(
-    ["chat", project_id],
-    () => API.projects.get(project_id),
     {
+      queryKey: ["chat", project_id],
+      queryFn: () => API.projects.get(project_id),
       refetchOnWindowFocus: false,
     },
   );
@@ -53,13 +53,13 @@ export default function Chat(params: { params: { project_id: string } }) {
   };
 
   const newChatMutation = useMutation(
-    (params: { formdata: FormData }) =>
-      API.chat.create(
-        project_id,
-        chat !== "" ? chat.slice(0, 50) : "new chat",
-        storage.openai_api_key,
-      ),
     {
+      mutationFn: (params: { formdata: FormData }) =>
+        API.chat.create(
+          project_id,
+          chat !== "" ? chat.slice(0, 50) : "new chat",
+          storage.openai_api_key,
+        ),
       retry: false,
       onSuccess: async (data, vars) => {
         await converseMutation.mutateAsync({
@@ -72,22 +72,22 @@ export default function Chat(params: { params: { project_id: string } }) {
   );
 
   const converseMutation = useMutation(
-    (params: { external_id: string; formdata: FormData }) =>
-      API.chat.converse(
-        project_id,
-        params.external_id,
-        params.formdata,
-        openai_key,
-        streamChatMessage,
-        20,
-        !project?.assistant_id,
-      ),
     {
+      mutationFn: (params: { external_id: string; formdata: FormData }) =>
+        API.chat.converse(
+          project_id,
+          params.external_id,
+          params.formdata,
+          openai_key,
+          streamChatMessage,
+          20,
+          !project?.assistant_id,
+        ),
       retry: false,
       onSuccess: async (data, vars) => {
         if (!data) return;
         setChatID(data.external_id);
-        await queryClient.invalidateQueries(["chats"]);
+        await queryClient.invalidateQueries({ queryKey: ["chats"] });
         setIsTyping(false);
       },
     },
@@ -145,7 +145,7 @@ export default function Chat(params: { params: { project_id: string } }) {
                           const fd = await getFormData(undefined, prompt);
                           newChatMutation.mutate({ formdata: fd });
                         }}
-                        disabled={newChatMutation.isLoading}
+                        disabled={newChatMutation.isPending}
                         className="bg-white hover:shadow-lg hover:bg-gray-100 hover:text-indigo-500 text-left border border-gray-200 rounded-lg p-4 transition disabled:opacity-50 disabled:hover:text-gray-400"
                         key={i}
                       >
@@ -204,7 +204,7 @@ export default function Chat(params: { params: { project_id: string } }) {
             (newChatMutation.error as any)?.error?.non_field_errors,
           ]}
           loading={
-            newChatMutation.isLoading || converseMutation.isLoading || isTyping
+            newChatMutation.isPending || converseMutation.isPending || isTyping
           }
           projectId={project_id}
         />