From b7be53c172869679cdfa65a44591c7bd9c5b9302 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 28 Aug 2020 18:46:47 +0300
Subject: separate validation state into 2 states and remove CheckCircle icon

---
 src/containers/Registration/Registration.tsx | 27 ++++++---------------------
 1 file changed, 6 insertions(+), 21 deletions(-)

(limited to 'src/containers/Registration')

diff --git a/src/containers/Registration/Registration.tsx b/src/containers/Registration/Registration.tsx
index 20bc283..0746deb 100644
--- a/src/containers/Registration/Registration.tsx
+++ b/src/containers/Registration/Registration.tsx
@@ -38,20 +38,19 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-interface ValidationStates {
+interface errors {
   validUsername: boolean | undefined;
   validEmail: boolean | undefined;
   validPassword: boolean | undefined;
-  showPassword: boolean;
 }
 
 const Registration: React.FC = () => {
-  const [values, setValues] = useState<ValidationStates>({
+  const [values, setValues] = useState<errors>({
     validUsername: undefined,
     validEmail: undefined,
     validPassword: undefined,
-    showPassword: false
   });
+  const [showPassword, setShowPassword] = useState<boolean>(false);
 
   const classes = useStyles();
   const usernameRef = useRef<HTMLInputElement>();
@@ -82,7 +81,7 @@ const Registration: React.FC = () => {
   };
 
   const handleClickShowPassword = () => {
-    setValues({ ...values, showPassword: !values.showPassword });
+    setShowPassword(prevState => !prevState);
   };
   const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
@@ -108,13 +107,6 @@ const Registration: React.FC = () => {
           helperText={!values.validUsername && 'This field is required'}
           required
           onChange={handleUsernameChange}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                {values.validUsername && values.validUsername !== undefined && <CheckCircle color="primary" />}
-              </InputAdornment>
-            )
-          }}
         />
         <TextField
           inputRef={emailRef}
@@ -122,13 +114,6 @@ const Registration: React.FC = () => {
           error={!values.validEmail}
           helperText={!values.validEmail && 'Invalid email address'}
           onChange={handleEmailChange}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                {values.validEmail && values.validEmail !== undefined && <CheckCircle color="primary" />}
-              </InputAdornment>
-            )
-          }}
         />
         <TextField
           inputRef={passwordRef}
@@ -136,7 +121,7 @@ const Registration: React.FC = () => {
           required
           error={!values.validPassword}
           helperText={!values.validPassword && 'Should be at least 6 characters'}
-          type={values.showPassword ? 'text' : 'password'}
+          type={showPassword ? 'text' : 'password'}
           onChange={handlePasswordChange}
           InputProps={{
             endAdornment: (
@@ -147,7 +132,7 @@ const Registration: React.FC = () => {
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
                 >
-                  {values.showPassword ? <Visibility /> : <VisibilityOff />}
+                  {showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
                 {values.validPassword && values.validPassword !== undefined && <CheckCircle color="primary" />}
               </InputAdornment>
-- 
cgit v1.2.3