chore: update to react query v5

frontend/src/components/auth/login-forn.tsx

@@ -4,12 +4,12 @@ import { LoginFormValues, loginSchema } from "../../schemas/login-schema";
 import { useTranslation } from "react-i18next";
 
 interface LoginFormProps {
-  isLoading: boolean;
+  isPending: boolean;
   onSubmit: (values: LoginFormValues) => void;
 }
 
 export const LoginForm = (props: LoginFormProps) => {
-  const { isLoading, onSubmit } = props;
+  const { isPending, onSubmit } = props;
   const { t } = useTranslation();
 
   const form = useForm({
@@ -27,7 +27,7 @@ export const LoginForm = (props: LoginFormProps) => {
         label={t("loginUsername")}
         placeholder="username"
         required
-        disabled={isLoading}
+        disabled={isPending}
         key={form.key("username")}
         {...form.getInputProps("username")}
       />
@@ -36,11 +36,11 @@ export const LoginForm = (props: LoginFormProps) => {
         placeholder="password"
         required
         mt="md"
-        disabled={isLoading}
+        disabled={isPending}
         key={form.key("password")}
         {...form.getInputProps("password")}
       />
-      <Button fullWidth mt="xl" type="submit" loading={isLoading}>
+      <Button fullWidth mt="xl" type="submit" loading={isPending}>
         {t("loginSubmit")}
       </Button>
     </form>

frontend/src/components/auth/oauth-buttons.tsx

@@ -5,13 +5,13 @@ import { OAuthIcon } from "../../icons/oauth";
 
 interface OAuthButtonsProps {
   oauthProviders: string[];
-  isLoading: boolean;
+  isPending: boolean;
   mutate: (provider: string) => void;
   genericName: string;
 }
 
 export const OAuthButtons = (props: OAuthButtonsProps) => {
-  const { oauthProviders, isLoading, genericName, mutate } = props;
+  const { oauthProviders, isPending, genericName, mutate } = props;
   return (
     <Grid mb="md" mt="md" align="center" justify="center">
       {oauthProviders.includes("google") && (
@@ -21,7 +21,7 @@ export const OAuthButtons = (props: OAuthButtonsProps) => {
             leftSection={<GoogleIcon style={{ width: 14, height: 14 }} />}
             variant="default"
             onClick={() => mutate("google")}
-            loading={isLoading}
+            loading={isPending}
           >
             Google
           </Button>
@@ -34,7 +34,7 @@ export const OAuthButtons = (props: OAuthButtonsProps) => {
             leftSection={<GithubIcon style={{ width: 14, height: 14 }} />}
             variant="default"
             onClick={() => mutate("github")}
-            loading={isLoading}
+            loading={isPending}
           >
             Github
           </Button>
@@ -47,7 +47,7 @@ export const OAuthButtons = (props: OAuthButtonsProps) => {
             leftSection={<OAuthIcon style={{ width: 14, height: 14 }} />}
             variant="default"
             onClick={() => mutate("generic")}
-            loading={isLoading}
+            loading={isPending}
           >
             {genericName}
           </Button>

frontend/src/components/auth/totp-form.tsx

@@ -10,11 +10,11 @@ type FormValues = z.infer<typeof schema>;
 
 interface TotpFormProps {
   onSubmit: (values: FormValues) => void;
-  isLoading: boolean;
+  isPending: boolean;
 }
 
 export const TotpForm = (props: TotpFormProps) => {
-  const { onSubmit, isLoading } = props;
+  const { onSubmit, isPending } = props;
 
   const form = useForm({
     mode: "uncontrolled",
@@ -32,7 +32,7 @@ export const TotpForm = (props: TotpFormProps) => {
         placeholder=""
         {...form.getInputProps("code")}
       />
-      <Button type="submit" mt="xl" loading={isLoading} fullWidth>
+      <Button type="submit" mt="xl" loading={isPending} fullWidth>
         Verify
       </Button>
     </form>