react-async-hook library provides useAsyncCallback that does the same thing as useMutation

commafeed-client/src/pages/auth/LoginPage.tsx

@@ -7,8 +7,8 @@ import { useAppDispatch, useAppSelector } from "app/store"
 import { LoginRequest } from "app/types"
 import { Alert } from "components/Alert"
 import { Logo } from "components/Logo"
+import { useAsyncCallback } from "react-async-hook"
 import { Link } from "react-router-dom"
-import useMutation from "use-mutation"
 
 export function LoginPage() {
     const serverInfos = useAppSelector(state => state.server.serverInfos)
@@ -21,12 +21,11 @@ export function LoginPage() {
         },
     })
 
-    const [login, loginResult] = useMutation(client.user.login, {
+    const login = useAsyncCallback(client.user.login, {
         onSuccess: () => {
             dispatch(redirectToRootCategory())
         },
     })
-    const errors = errorToStrings(loginResult.error)
 
     return (
         <Container size="xs">
@@ -40,12 +39,12 @@ export function LoginPage() {
                 <Title order={2} mb="md">
                     <Trans>Log in</Trans>
                 </Title>
-                {errors.length > 0 && (
+                {login.error && (
                     <Box mb="md">
-                        <Alert messages={errors} />
+                        <Alert messages={errorToStrings(login.error)} />
                     </Box>
                 )}
-                <form onSubmit={form.onSubmit(login)}>
+                <form onSubmit={form.onSubmit(login.execute)}>
                     <Stack>
                         <TextInput
                             label={t`User Name or E-mail`}
@@ -69,7 +68,7 @@ export function LoginPage() {
                             </Anchor>
                         )}
 
-                        <Button type="submit" loading={loginResult.status === "running"}>
+                        <Button type="submit" loading={login.loading}>
                             <Trans>Log in</Trans>
                         </Button>
                         {serverInfos?.allowRegistrations && (

commafeed-client/src/pages/auth/PasswordRecoveryPage.tsx

@@ -6,8 +6,8 @@ import { PasswordResetRequest } from "app/types"
 import { Alert } from "components/Alert"
 import { Logo } from "components/Logo"
 import { useState } from "react"
+import { useAsyncCallback } from "react-async-hook"
 import { Link } from "react-router-dom"
-import useMutation from "use-mutation"
 
 export function PasswordRecoveryPage() {
     const [message, setMessage] = useState("")
@@ -18,15 +18,11 @@ export function PasswordRecoveryPage() {
         },
     })
 
-    const [recoverPassword, recoverPasswordResult] = useMutation(client.user.passwordReset, {
-        onMutate: () => {
-            setMessage("")
-        },
+    const recoverPassword = useAsyncCallback(client.user.passwordReset, {
         onSuccess: () => {
             setMessage(t`An email has been sent if this address was registered. Check your inbox.`)
         },
     })
-    const errors = errorToStrings(recoverPasswordResult.error)
 
     return (
         <Container size="xs">
@@ -40,17 +36,25 @@ export function PasswordRecoveryPage() {
                 <Title order={2} mb="md">
                     <Trans>Password Recovery</Trans>
                 </Title>
-                {errors.length > 0 && (
+
+                {recoverPassword.error && (
                     <Box mb="md">
-                        <Alert messages={errors} />
+                        <Alert messages={errorToStrings(recoverPassword.error)} />
                     </Box>
                 )}
+
                 {message && (
                     <Box mb="md">
                         <Alert level="success" messages={[message]} />
                     </Box>
                 )}
-                <form onSubmit={form.onSubmit(recoverPassword)}>
+
+                <form
+                    onSubmit={form.onSubmit(req => {
+                        setMessage("")
+                        recoverPassword.execute(req)
+                    })}
+                >
                     <Stack>
                         <TextInput
                             type="email"
@@ -61,7 +65,7 @@ export function PasswordRecoveryPage() {
                             required
                         />
 
-                        <Button type="submit" loading={recoverPasswordResult.status === "running"}>
+                        <Button type="submit" loading={recoverPassword.loading}>
                             <Trans>Recover password</Trans>
                         </Button>
 

commafeed-client/src/pages/auth/RegistrationPage.tsx

@@ -7,8 +7,8 @@ import { useAppDispatch, useAppSelector } from "app/store"
 import { RegistrationRequest } from "app/types"
 import { Alert } from "components/Alert"
 import { Logo } from "components/Logo"
+import { useAsyncCallback } from "react-async-hook"
 import { Link } from "react-router-dom"
-import useMutation from "use-mutation"
 
 export function RegistrationPage() {
     const serverInfos = useAppSelector(state => state.server.serverInfos)
@@ -22,12 +22,11 @@ export function RegistrationPage() {
         },
     })
 
-    const [register, registerResult] = useMutation(client.user.register, {
+    const register = useAsyncCallback(client.user.register, {
         onSuccess: () => {
             dispatch(redirectToRootCategory())
         },
     })
-    const errors = errorToStrings(registerResult.error)
 
     return (
         <Container size="xs">
@@ -48,13 +47,13 @@ export function RegistrationPage() {
                 )}
                 {serverInfos?.allowRegistrations && (
                     <>
-                        {errors.length > 0 && (
+                        {register.error && (
                             <Box mb="md">
-                                <Alert messages={errors} />
+                                <Alert messages={errorToStrings(register.error)} />
                             </Box>
                         )}
 
-                        <form onSubmit={form.onSubmit(register)}>
+                        <form onSubmit={form.onSubmit(register.execute)}>
                             <Stack>
                                 <TextInput label="User Name" placeholder="User Name" {...form.getInputProps("name")} size="md" required />
                                 <TextInput
@@ -72,7 +71,7 @@ export function RegistrationPage() {
                                     size="md"
                                     required
                                 />
-                                <Button type="submit" loading={registerResult.status === "running"}>
+                                <Button type="submit" loading={register.loading}>
                                     <Trans>Sign up</Trans>
                                 </Button>
                                 <Center>