Rewrite login and register related queries using React Query
Change-Id: Ifb462a30b3100043b29aaa3db7c321950937cad1
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index f865bb8..9cd2175 100644
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -27,29 +27,29 @@
useMediaQuery,
} from '@mui/material';
import { Theme, useTheme } from '@mui/material/styles';
-import { HttpStatusCode } from 'jami-web-common';
import { ChangeEvent, FormEvent, useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { Form, Link, useNavigate } from 'react-router-dom';
+import { Form, Link } from 'react-router-dom';
import { PasswordInput, UsernameInput } from '../components/Input';
import ProcessingRequest from '../components/ProcessingRequest';
import withAuthUI from '../components/WithAuthUI';
import { AlertSnackbarContext } from '../contexts/AlertSnackbarProvider';
-import { loginUser, setAccessToken } from '../utils/auth';
+import { useLoginMutation } from '../services/authQueries';
import { inputWidth } from '../utils/constants';
function LoginForm() {
const theme: Theme = useTheme();
- const navigate = useNavigate();
const { t } = useTranslation();
const [username, setUsername] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [isJams, setIsJams] = useState<boolean>(false);
- const [loading, setLoading] = useState<boolean>(false);
const { setAlertContent } = useContext(AlertSnackbarContext);
+ const loginMutation = useLoginMutation();
+ const { isLoading } = loginMutation;
+
const isMobile: boolean = useMediaQuery(theme.breakpoints.only('xs'));
const handleUsername = (event: ChangeEvent<HTMLInputElement>) => {
@@ -66,51 +66,21 @@
const login = (event: FormEvent) => {
event.preventDefault();
-
if (username === '') {
setAlertContent({ messageI18nKey: 'username_input_helper_text_empty', severity: 'error', alertOpen: true });
return;
}
-
if (password === '') {
setAlertContent({ messageI18nKey: 'password_input_helper_text_empty', severity: 'error', alertOpen: true });
return;
}
- setLoading(true);
-
- loginUser(username, password, isJams)
- .then((response) => {
- if (response.status === HttpStatusCode.Ok) {
- setAccessToken(response.data.accessToken);
- navigate('/conversation', { replace: true });
- }
- })
- .catch((e) => {
- console.log(e);
- const { status } = e.response;
- if (status === HttpStatusCode.BadRequest) {
- //TODO: the only bad request response defined in the server is missing credentials. add the response message to the locale.
- console.log(e.response.data);
- // setErrorAlertContent(t('unknown_error_alert'));
- } else if (status === HttpStatusCode.NotFound) {
- //TODO: there are two different not found responses that could be returned by the server, use message to differentiate them?
- console.log(e.response.data);
- // setErrorAlertContent(t('login_username_not_found'));
- } else if (status === HttpStatusCode.Unauthorized) {
- setAlertContent({ messageI18nKey: 'login_invalid_password', severity: 'error', alertOpen: true });
- } else {
- setAlertContent({ messageI18nKey: 'unknown_error_alert', severity: 'error', alertOpen: true });
- }
- })
- .finally(() => {
- setLoading(false);
- });
+ loginMutation.mutate({ username, password, isJams });
};
return (
<>
- <ProcessingRequest open={loading} />
+ <ProcessingRequest open={isLoading} />
<Stack
sx={{