[CLUST-203] Refactor get user setting query

src/components/setting/BindLoginForm.tsx

@@ -16,13 +16,12 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useTranslation } from "react-i18next";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getSettings } from "@/lib/request/getSettings";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { SETTINGS_QUERY_KEY, useGetSettings } from "@/hooks/useGetSettings";
 import { bindLoginMethods } from "@/lib/request/bindLoginMethods";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LoginMethodIcon } from "@/components/setting/LoginMethodIcon";
 import { toast } from "sonner";
-const PROFILE_QUERY_KEY = ["connectedAccounts"];
 
 export default function BindLoginForm() {
   const [isDialogOpen, setDialogOpen] = useState(false);
@@ -35,9 +34,7 @@ export default function BindLoginForm() {
     isLoading,
     isError,
     error: settingsError,
-  } = useQuery({
-    queryKey: PROFILE_QUERY_KEY,
-    queryFn: getSettings,
+  } = useGetSettings({
     retry: 1,
   });
 
@@ -82,7 +79,9 @@ export default function BindLoginForm() {
         toast.success(t("bindLoginForm.bindSuccessToast"), {
           id: "bind-success",
         });
-        queryClient.invalidateQueries({ queryKey: PROFILE_QUERY_KEY });
+        queryClient.invalidateQueries({
+          queryKey: SETTINGS_QUERY_KEY,
+        });
       } else if (event.data?.type === "BIND_CONFLICT") {
         toast.error(t("bindLoginForm.bindConflictToast"), {
           id: "bind-conflict",

src/components/setting/SettingFullNameForm.tsx

@@ -16,8 +16,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Input } from "@/components/ui/input";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getSettings } from "@/lib/request/getSettings";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { SETTINGS_QUERY_KEY, useGetSettings } from "@/hooks/useGetSettings";
 import { saveSettings } from "@/lib/request/saveSettings";
 import { Separator } from "@/components/ui/separator";
 import { toast } from "sonner";
@@ -33,17 +33,15 @@ export default function SettingFullNameForm({
   const [linuxUsername, setLinuxUsername] = useState("");
   const { t } = useTranslation();
   const queryClient = useQueryClient();
-  const PROFILE_QUERY_KEY = ["username"];
 
-  const { data, isSuccess, isLoading, isError } = useQuery({
-    queryKey: PROFILE_QUERY_KEY,
-    queryFn: getSettings,
-  });
+  const { data, isSuccess, isLoading, isError } = useGetSettings();
 
   const addMutation = useMutation({
     mutationFn: (payload: Settings) => saveSettings(payload),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: PROFILE_QUERY_KEY });
+      queryClient.invalidateQueries({
+        queryKey: SETTINGS_QUERY_KEY,
+      });
       toast.success(t("settingFullNameForm.successToast"));
     },
     onError: (error: Error) => {

src/components/setting/SettingLinuxUsernameForm.tsx

@@ -7,20 +7,14 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { useQuery } from "@tanstack/react-query";
-import { getSettings } from "@/lib/request/getSettings";
+import { useGetSettings } from "@/hooks/useGetSettings";
 import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function SettingLinuxUsernameForm() {
   const [linuxUsername, setLinuxUsername] = useState("");
   const { t } = useTranslation();
-  const PROFILE_QUERY_KEY = ["username"];
-
-  const { data, isSuccess, isLoading, isError } = useQuery({
-    queryKey: PROFILE_QUERY_KEY,
-    queryFn: getSettings,
-  });
+  const { data, isSuccess, isLoading, isError } = useGetSettings();
 
   useEffect(() => {
     if (isSuccess) {

src/hooks/useGetSettings.ts

@@ -0,0 +1,19 @@
+import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
+import { getSettings } from "@/lib/request/getSettings";
+
+type SettingsData = Awaited<ReturnType<typeof getSettings>>;
+
+type UseGetSettingsOptions = Omit<
+  UseQueryOptions<SettingsData, Error>,
+  "queryKey" | "queryFn"
+>;
+
+export const SETTINGS_QUERY_KEY = ["settings"] as const;
+
+export function useGetSettings(options?: UseGetSettingsOptions) {
+  return useQuery({
+    queryKey: SETTINGS_QUERY_KEY,
+    queryFn: getSettings,
+    ...options,
+  });
+}