From c935fc27ef887e84f5c67f4fb2cb8476a32a7a54 Mon Sep 17 00:00:00 2001
From: Dmytro Muzyka <47075277+Mich47@users.noreply.github.com>
Date: Thu, 4 May 2023 21:53:32 +0300
Subject: [PATCH] Update RegisterForm.jsx
---
src/components/RegisterForm/RegisterForm.jsx | 337 ++++++++++---------
1 file changed, 176 insertions(+), 161 deletions(-)
diff --git a/src/components/RegisterForm/RegisterForm.jsx b/src/components/RegisterForm/RegisterForm.jsx
index ce1c962..b7ea1e9 100644
--- a/src/components/RegisterForm/RegisterForm.jsx
+++ b/src/components/RegisterForm/RegisterForm.jsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'react-toastify';
import * as Yup from 'yup';
import { signupUser } from '../../redux/auth/auth.operations';
@@ -13,6 +13,8 @@ import { AuthNavigate } from 'components/AuthNavigate/AuthNavigate';
import { NAME_REGEX, PASSWORD_REGEX } from '../../constants/joiRegex';
import { useState } from 'react';
import icon from '../../images/sprite.svg';
+import { selectIsLoading } from 'redux/auth/auth.selectors';
+import { Loader } from 'components/Loader/Loader';
const RegisterValidationSchema = Yup.object().shape({
name: Yup.string()
@@ -39,176 +41,189 @@ export const RegisterForm = () => {
const [passwordValidationCompleted, setPasswordValidationCompleted] =
useState(false);
+ const isLoading = useSelector(selectIsLoading);
+
return (
<>
- {
- try {
- await dispatch(
- signupUser({
- name: values.name,
- email: values.email,
- password: values.password,
- })
- ).unwrap();
- setSubmitting(false);
- resetForm();
- } catch (error) {
- setSubmitting(false);
- toast.error(
- error || "It seems like your goose didn't fly. Please try again."
- );
- }
- }}
- >
- {({
- values,
- errors,
- touched,
- handleChange,
- handleBlur,
- handleSubmit,
- }) => (
-
-
-
- Sign Up
-
-
- Name
-
- {
- handleBlur(event);
- setNameValidationCompleted(true);
- }}
- value={values.name}
- onChange={handleChange}
- placeholder="Enter your name"
- error={errors.name}
- touched={touched.name}
- />
-
- {nameValidationCompleted &&
- (errors.name && touched.name ? (
- {errors.name}
- ) : (
- This is an CORRECT name
- ))}
-
-
+ {isLoading && }
+ {!isLoading && (
+ {
+ try {
+ await dispatch(
+ signupUser({
+ name: values.name,
+ email: values.email,
+ password: values.password,
+ })
+ ).unwrap();
+ setSubmitting(false);
+ resetForm();
+ } catch (error) {
+ setSubmitting(false);
+ toast.error(
+ error ||
+ "It seems like your goose didn't fly. Please try again."
+ );
+ }
+ }}
+ >
+ {({
+ values,
+ errors,
+ touched,
+ handleChange,
+ handleBlur,
+ handleSubmit,
+ isSubmitting,
+ }) => (
+
+
+
+ Sign Up
+
+
+ Name
+
+ {
+ handleBlur(event);
+ setNameValidationCompleted(true);
+ }}
+ value={values.name}
+ onChange={handleChange}
+ placeholder="Enter your name"
+ error={errors.name}
+ touched={touched.name}
+ />
+
+ {nameValidationCompleted &&
+ (errors.name && touched.name ? (
+ {errors.name}
+ ) : (
+ This is an CORRECT name
+ ))}
+
+
-
-
- Email
-
- {
- handleBlur(event);
- setEmailValidationCompleted(true);
- }}
- onChange={handleChange}
- placeholder="Enter email"
- error={errors.email}
- touched={touched.email}
- />
-
- {emailValidationCompleted &&
- (errors.email && touched.email ? (
- {errors.email}
- ) : (
- This is an CORRECT email
- ))}
-
-
+
+
+ Email
+
+ {
+ handleBlur(event);
+ setEmailValidationCompleted(true);
+ }}
+ onChange={handleChange}
+ placeholder="Enter email"
+ error={errors.email}
+ touched={touched.email}
+ />
+
+ {emailValidationCompleted &&
+ (errors.email && touched.email ? (
+ {errors.email}
+ ) : (
+ This is an CORRECT email
+ ))}
+
+
-
-
- Password
-
- {
- handleBlur(event);
- setPasswordValidationCompleted(true);
- }}
+
-
- {passwordValidationCompleted &&
- (errors.password && touched.password ? (
- {errors.password}
+ >
+
+ Password
+
+ {
+ handleBlur(event);
+ setPasswordValidationCompleted(true);
+ }}
+ // error={errors.password && touched.password}
+ error={errors.password}
+ touched={touched.password}
+ />
+
+ {passwordValidationCompleted &&
+ (errors.password && touched.password ? (
+ {errors.password}
+ ) : (
+ This is an CORRECT password
+ ))}
+
+
+ {
+ isPass ? setIsPass(false) : setIsPass(true);
+ }}
+ >
+ {isPass ? (
+
+
+
) : (
- This is an CORRECT password
- ))}
-
+
+
+
+ )}
+
+
- {
- isPass ? setIsPass(false) : setIsPass(true);
- }}
+
- {isPass ? (
-
-
-
- ) : (
-
-
-
- )}
-
-
-
-
- Sign Up
-
-
-
-
-
+ Sign Up
+
+
+
+
+
-
+
-
-
-
-
-
- Quickly register and familiarize yourself with the
- application!
-
-
-
- )}
-
+
+
+
+
+
+ Quickly register and familiarize yourself with
+ the application!
+
+
+
+ )}
+
+ )}
);
};