From ba0d46c6cd78d91128266ba5756fd3789f041eb0 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 11 Sep 2024 13:06:56 +0000
Subject: [PATCH] feat(web): use REST API endpoint to register user

---
 .../src/components/SignUpForm/index.ee.jsx    | 19 ++++++++-----------
 packages/web/src/hooks/useRegisterUser.js     | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 11 deletions(-)
 create mode 100644 packages/web/src/hooks/useRegisterUser.js

diff --git a/packages/web/src/components/SignUpForm/index.ee.jsx b/packages/web/src/components/SignUpForm/index.ee.jsx
index 3ae6d2bc..a9f140c2 100644
--- a/packages/web/src/components/SignUpForm/index.ee.jsx
+++ b/packages/web/src/components/SignUpForm/index.ee.jsx
@@ -6,14 +6,15 @@ import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
+
 import useAuthentication from 'hooks/useAuthentication';
 import * as URLS from 'config/urls';
-import { REGISTER_USER } from 'graphql/mutations/register-user.ee';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import useRegisterUser from 'hooks/useRegisterUser';
 
 const validationSchema = yup.object().shape({
   fullName: yup.string().trim().required('signupForm.mandatoryInput'),
@@ -41,8 +42,8 @@ function SignUpForm() {
   const authentication = useAuthentication();
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
-  const [registerUser, { loading: registerUserLoading }] =
-    useMutation(REGISTER_USER);
+  const { mutateAsync: registerUser, isPending: isRegisterUserPending } =
+    useRegisterUser();
   const { mutateAsync: createAccessToken, isPending: loginLoading } =
     useCreateAccessToken();
 
@@ -56,13 +57,9 @@ function SignUpForm() {
     const { fullName, email, password } = values;
 
     await registerUser({
-      variables: {
-        input: {
-          fullName,
-          email,
-          password,
-        },
-      },
+      fullName,
+      email,
+      password,
     });
 
     try {
@@ -176,7 +173,7 @@ function SignUpForm() {
               variant="contained"
               color="primary"
               sx={{ boxShadow: 2, mt: 3 }}
-              loading={registerUserLoading || loginLoading}
+              loading={isRegisterUserPending || loginLoading}
               fullWidth
               data-test="signUp-button"
             >
diff --git a/packages/web/src/hooks/useRegisterUser.js b/packages/web/src/hooks/useRegisterUser.js
new file mode 100644
index 00000000..5b0eeccd
--- /dev/null
+++ b/packages/web/src/hooks/useRegisterUser.js
@@ -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;
+}