feat(web): use REST API endpoint to register user
This commit is contained in:
@@ -6,14 +6,15 @@ import Typography from '@mui/material/Typography';
|
|||||||
import LoadingButton from '@mui/lab/LoadingButton';
|
import LoadingButton from '@mui/lab/LoadingButton';
|
||||||
import * as yup from 'yup';
|
import * as yup from 'yup';
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
|
||||||
import useAuthentication from 'hooks/useAuthentication';
|
import useAuthentication from 'hooks/useAuthentication';
|
||||||
import * as URLS from 'config/urls';
|
import * as URLS from 'config/urls';
|
||||||
import { REGISTER_USER } from 'graphql/mutations/register-user.ee';
|
|
||||||
import Form from 'components/Form';
|
import Form from 'components/Form';
|
||||||
import TextField from 'components/TextField';
|
import TextField from 'components/TextField';
|
||||||
import useFormatMessage from 'hooks/useFormatMessage';
|
import useFormatMessage from 'hooks/useFormatMessage';
|
||||||
import useCreateAccessToken from 'hooks/useCreateAccessToken';
|
import useCreateAccessToken from 'hooks/useCreateAccessToken';
|
||||||
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
|
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
|
||||||
|
import useRegisterUser from 'hooks/useRegisterUser';
|
||||||
|
|
||||||
const validationSchema = yup.object().shape({
|
const validationSchema = yup.object().shape({
|
||||||
fullName: yup.string().trim().required('signupForm.mandatoryInput'),
|
fullName: yup.string().trim().required('signupForm.mandatoryInput'),
|
||||||
@@ -41,8 +42,8 @@ function SignUpForm() {
|
|||||||
const authentication = useAuthentication();
|
const authentication = useAuthentication();
|
||||||
const formatMessage = useFormatMessage();
|
const formatMessage = useFormatMessage();
|
||||||
const enqueueSnackbar = useEnqueueSnackbar();
|
const enqueueSnackbar = useEnqueueSnackbar();
|
||||||
const [registerUser, { loading: registerUserLoading }] =
|
const { mutateAsync: registerUser, isPending: isRegisterUserPending } =
|
||||||
useMutation(REGISTER_USER);
|
useRegisterUser();
|
||||||
const { mutateAsync: createAccessToken, isPending: loginLoading } =
|
const { mutateAsync: createAccessToken, isPending: loginLoading } =
|
||||||
useCreateAccessToken();
|
useCreateAccessToken();
|
||||||
|
|
||||||
@@ -56,13 +57,9 @@ function SignUpForm() {
|
|||||||
const { fullName, email, password } = values;
|
const { fullName, email, password } = values;
|
||||||
|
|
||||||
await registerUser({
|
await registerUser({
|
||||||
variables: {
|
fullName,
|
||||||
input: {
|
email,
|
||||||
fullName,
|
password,
|
||||||
email,
|
|
||||||
password,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -176,7 +173,7 @@ function SignUpForm() {
|
|||||||
variant="contained"
|
variant="contained"
|
||||||
color="primary"
|
color="primary"
|
||||||
sx={{ boxShadow: 2, mt: 3 }}
|
sx={{ boxShadow: 2, mt: 3 }}
|
||||||
loading={registerUserLoading || loginLoading}
|
loading={isRegisterUserPending || loginLoading}
|
||||||
fullWidth
|
fullWidth
|
||||||
data-test="signUp-button"
|
data-test="signUp-button"
|
||||||
>
|
>
|
||||||
|
19
packages/web/src/hooks/useRegisterUser.js
Normal file
19
packages/web/src/hooks/useRegisterUser.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import api from 'helpers/api';
|
||||||
|
|
||||||
|
export default function useRegisterUser() {
|
||||||
|
const query = useMutation({
|
||||||
|
mutationFn: async ({ fullName, email, password }) => {
|
||||||
|
const { data } = await api.post(`/v1/users/register`, {
|
||||||
|
fullName,
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
});
|
||||||
|
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return query;
|
||||||
|
}
|
Reference in New Issue
Block a user