switch to tanstack

src/components/Common/UserColumns.tsx

@@ -3,7 +3,6 @@ import { UserBase } from "@/types/user/user";
 export type userChildProps = {
   userData: UserBase;
   username: string;
-  refetchUserData?: () => void;
 };
 
 export default function UserColumns({

src/components/Users/UserAvatar.tsx

@@ -1,5 +1,5 @@
 import careConfig from "@careConfig";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -15,9 +15,9 @@ import useAuthUser from "@/hooks/useAuthUser";
 
 import { showAvatarEdit } from "@/Utils/permissions";
 import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
 import uploadFile from "@/Utils/request/uploadFile";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import { getAuthorizationHeader } from "@/Utils/request/utils";
 import { formatDisplayName, sleep } from "@/Utils/utils";
 
@@ -27,14 +27,14 @@ export default function UserAvatar({ username }: { username: string }) {
   const authUser = useAuthUser();
   const queryClient = useQueryClient();
 
-  const { data: userData, loading: isLoading } = useTanStackQueryInstead(
-    routes.getUserDetails,
-    {
+  const { data: userData, isLoading } = useQuery({
+    queryKey: ["getUserDetails", username],
+    queryFn: query(routes.getUserDetails, {
       pathParams: {
         username: username,
       },
-    },
-  );
+    }),
+  });
 
   if (isLoading || !userData) {
     return <Loading />;

src/components/Users/UserHome.tsx

@@ -1,7 +1,8 @@
-import { Link, navigate } from "raviger";
-import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
+
+import { cn } from "@/lib/utils";
 
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
@@ -11,12 +12,12 @@ import UserAvailabilityTab from "@/components/Users/UserAvailabilityTab";
 import UserBanner from "@/components/Users/UserBanner";
 import UserSummaryTab from "@/components/Users/UserSummary";
 
+import useAppHistory from "@/hooks/useAppHistory";
 import useAuthUser from "@/hooks/useAuthUser";
 
 import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import { classNames, formatName, keysOf } from "@/Utils/utils";
-import { UserBase } from "@/types/user/user";
+import query from "@/Utils/request/query";
+import { formatName, keysOf } from "@/Utils/utils";
 
 export interface UserHomeProps {
   username?: string;
@@ -31,35 +32,32 @@ export interface TabChildProp {
 export default function UserHome(props: UserHomeProps) {
   const { tab } = props;
   let { username } = props;
-  const [userData, setUserData] = useState<UserBase>();
   const { t } = useTranslation();
   const authUser = useAuthUser();
+  const { goBack } = useAppHistory();
   if (!username) {
     username = authUser.username;
   }
   const loggedInUser = username === authUser.username;
 
-  const { loading, refetch: refetchUserDetails } = useTanStackQueryInstead(
-    routes.getUserDetails,
-    {
+  const {
+    data: userData,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["getUserDetails", username],
+    queryFn: query(routes.getUserDetails, {
       pathParams: {
         username: username,
       },
-      onResponse: ({ res, data, error }) => {
-        if (res?.status === 200 && data) {
-          setUserData(data);
-        } else if (res?.status === 400) {
-          navigate("/users");
-        } else if (error) {
-          toast.error(
-            t("error_fetching_user_details") + (error?.message || ""),
-          );
-        }
-      },
-    },
-  );
+    }),
+  });
+
+  if (isError) {
+    goBack("/");
+  }
 
-  if (loading || !userData) {
+  if (isLoading || !userData) {
     return <Loading />;
   }
 
@@ -124,7 +122,7 @@ export default function UserHome(props: UserHomeProps) {
                         return (
                           <Link
                             key={p}
-                            className={classNames(
+                            className={cn(
                               "min-w-max-content cursor-pointer whitespace-nowrap text-sm font-semibold capitalize",
                               currentTab === p
                                 ? "border-b-2 border-primary-500 text-primary-600 hover:border-secondary-300"
@@ -142,12 +140,7 @@ export default function UserHome(props: UserHomeProps) {
                 </div>
               </div>
             </div>
-            <SelectedTab
-              userData={userData}
-              username={username}
-              {...props}
-              refetchUserData={refetchUserDetails}
-            />
+            <SelectedTab userData={userData} username={username} {...props} />
           </>
         }
       </Page>

src/components/Users/UserSummary.tsx

@@ -1,3 +1,4 @@
+import { useMutation } from "@tanstack/react-query";
 import { navigate } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -31,42 +32,39 @@ import request from "@/Utils/request/request";
 import EditUserSheet from "@/pages/Organization/components/EditUserSheet";
 import { UserBase } from "@/types/user/user";
 
-export default function UserSummaryTab({
-  userData,
-  refetchUserData,
-}: {
-  userData?: UserBase;
-  refetchUserData?: () => void;
-}) {
+export default function UserSummaryTab({ userData }: { userData?: UserBase }) {
   const { t } = useTranslation();
   const [showDeleteDialog, setshowDeleteDialog] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
   const authUser = useAuthUser();
   const [showEditUserSheet, setShowEditUserSheet] = useState(false);
+
+  const { mutate: deleteUser, isPending: isDeleting } = useMutation({
+    mutationFn: async () => {
+      return await request(routes.deleteUser, {
+        pathParams: { username: userData?.username || "" },
+      });
+    },
+    onSuccess: () => {
+      toast.success(t("user_deleted_successfully"));
+      setshowDeleteDialog(false);
+      navigate("/users");
+    },
+    onError: () => {
+      setshowDeleteDialog(false);
+      toast.error(t("user_delete_error"));
+    },
+  });
   if (!userData) {
     return <></>;
   }
 
   const handleSubmit = async () => {
-    setIsDeleting(true);
-    const { res, error } = await request(routes.deleteUser, {
-      pathParams: { username: userData.username },
-    });
-    setIsDeleting(false);
-    if (res?.status === 204) {
-      toast.success(t("user_deleted_successfully"));
-      setshowDeleteDialog(!showDeleteDialog);
-      navigate("/users");
-    } else {
-      toast.error(t("user_delete_error") + ": " + (error || ""));
-      setshowDeleteDialog(!showDeleteDialog);
-    }
+    deleteUser();
   };
 
   const userColumnsData = {
     userData,
     username: userData.username,
-    refetchUserData,
   };
   const deletePermitted = showUserDelete(authUser, userData);
   const passwordResetPermitted = showUserPasswordReset(authUser, userData);