Merge pull request #95 from DZaporozhan/feature/user-form-update

Feature/user-form-inputs-buttons-ui

Author: DZaporozhan

src/components/Logout/Logout.styled.jsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ReactComponent as SvgLogout } from './img/logout-icon.svg';
+import { ReactComponent as SvgLogout } from 'icons/logout-icon.svg';
 
 export const Button = styled.button`
   display: inline-flex;

src/components/UserData/UserData.jsx

@@ -20,10 +20,13 @@ import {
   UserAvatar,
   UserInfoWrap,
   IconWraper,
+  CheckIcon,
 } from './UserData.styled';
 
-import avatar from './img/temp-avatar.jpg';
+import avatar from 'icons/temp-avatar.jpg';
 import Logout from 'components/Logout';
+import { useState } from 'react';
+// import { useRef } from 'react';
 // import { ReactComponent as SvgCross } from './img/svgCross.svg';
 
 const nameRegExp = /^[a-zA-Zа-яА-Я]+(([' -][a-zA-Zа-яА-Я ])?[a-zA-Zа-яА-Я]*)*$/;
@@ -47,7 +50,7 @@ let schema = yup.object().shape({
     .required(),
 });
 
-const initialValues = {
+let initialValues = {
   name: '',
   email: '',
   birthday: '',
@@ -56,22 +59,92 @@ const initialValues = {
 };
 
 const UserData = () => {
+  const [nameDisabled, setNameDisabled] = useState(true);
+  const [emailDisabled, setEmailDisabled] = useState(true);
+  const [birthdayDisabled, setBirthdayDisabled] = useState(true);
+  const [phoneDisabled, setPhoneDisabled] = useState(true);
+  const [cityDisabled, setCityDisabled] = useState(true);
+
+  const [iconColor, setIconColor] = useState('#f59256');
+
+  const [typeBtn, setTypeBtn] = useState('button');
+  const [inputValue, setInputValue] = useState();
+
+  // const ref = useRef(null);
+
   // const dispatch = useDispatch();
 
-  // const { imageURL, name, email, birthday, phone, city } =
+  // const { imageURL, name, email, birthday, phone, city } = useSelector(selectUser);
   const { name, email, birthday, phone, city } = useSelector(selectUser);
 
-  // const user = useSelector(getUserInfo);
-  // console.log(user);
+  initialValues = {
+    name,
+    email,
+    birthday,
+    phone,
+    city,
+  };
+
+  // const handleChange = e => dispatch(setInputValue(e.currentTarget.value));
+  const handleChange = e => {
+    console.log(e.currentTarget.value);
+    console.log(e.currentTarget);
+    setInputValue(e.currentTarget.value);
+    console.log(inputValue);
+  };
+
+  // const handleSubmit = value => {
+  //   console.log(value);
+  //   // console.log(actions);
+  // };
+
+  const handleClick = (e, disabled, setDisabled, fieldValue) => {
+    const { type } = e.currentTarget;
+
+    if (disabled) {
+      setDisabled(false);
+      setIconColor('rgba(17, 17, 17, 0.6)');
+    } else {
+      setDisabled(false);
+      setIconColor('#f59256');
+    }
+    // if (type === 'button') {
+
+    // }
+    // console.log(name);
+
+    // const handleSubmit = fieldValue => {
+    //   console.log(fieldValue);
+    //   // console.log(actions);
+    // };
 
+    setDisabled(!disabled);
+    // if (disabled) {
+
+    // }
+
+    // setIsDisabled(!isDisabled);
+    // console.log(e.currentTarget.id);
+    // console.log(name);
+
+    // setTypeBtn(prevState => (prevState === 'submit' ? 'button' : 'submit'));
+    // console.log(typeBtn);
+
+    // if (!isDisabled || e.currentTarget.id) {
+    // }
+  };
+
+  ////////////////////////////
   // Червона консоль не працює
+  // const user = useSelector(getUserInfo);
+  // console.log(user);
+  //
   // const {
-  //   imageURL,
   //   userInfo: { name, email, birthday, phone, city },
   // } = useSelector(getUserInfo);
   ////////////////////////////
 
-  // const handleSubmit = value => {
+  // const handleSubmit = value => {`
   //   dispatch(updateUser(value));
   // };
 
@@ -101,48 +174,118 @@ const UserData = () => {
           </AddPhoto>
         </Thumb>
       </EditPhotoContainer>
+
       <InfoContainer>
         <Formik
           initialValues={initialValues}
           validationSchema={schema}
-          //   onSubmit={handleSubmit}
+          // onSubmit={handleSubmit}
         >
-          <InfoForm autoComplete="off">
-            <Label htmlFor="name">Name:</Label>
-            <Input type="text" name="name" value={name} />
-            <Button type="button">
-              <EditIcon />
-            </Button>
-            {/* <ErrorText name="name" component="div" /> */}
-
-            <Label htmlFor="email">Email:</Label>
-            <Input type="text" name="email" value={email} />
-            <Button type="button">
-              <EditIcon />
-            </Button>
-            {/* <ErrorText name="email" component="div" /> */}
-
-            <Label htmlFor="birthday">Birthday:</Label>
-            <Input type="text" name="birthday" value={birthday} />
-            <Button type="button">
-              <EditIcon />
-            </Button>
-            {/* <ErrorText name="birthday" component="div" /> */}
-
-            <Label htmlFor="phone">Phone:</Label>
-            <Input type="tel" name="phone" value={phone} />
-            <Button type="button">
-              <EditIcon />
-            </Button>
-            {/* <ErrorText name="phone" component="div" /> */}
-
-            <Label htmlFor="city">City:</Label>
-            <Input type="text" name="city" value={city} />
-            <Button type="button">
-              <EditIcon />
-            </Button>
-            {/* <ErrorText name="city" component="div" /> */}
-          </InfoForm>
+          {({ values }) => (
+            <InfoForm autoComplete="off">
+              <Label htmlFor="name">Name:</Label>
+              <Input
+                // id="name"
+                type="text"
+                name="name"
+                // value={inputValue}
+                // onChange={handleChange}
+                disabled={nameDisabled}
+                // touched="true"
+              />
+              <Button
+                name="name"
+                type={typeBtn}
+                onClick={e =>
+                  handleClick(e, nameDisabled, setNameDisabled, values.name)
+                }
+              >
+                {nameDisabled ? <EditIcon fill={iconColor} /> : <CheckIcon />}
+              </Button>
+              {/* <ErrorText name="name" component="div" /> */}
+
+              <Label htmlFor="email">Email:</Label>
+              <Input
+                type="text"
+                name="email"
+                // value={email}
+                disabled={emailDisabled}
+              />
+              <Button
+                name="email"
+                type={typeBtn}
+                onClick={e =>
+                  handleClick(e, emailDisabled, setEmailDisabled, values.email)
+                }
+              >
+                {emailDisabled ? <EditIcon fill={iconColor} /> : <CheckIcon />}
+              </Button>
+              {/* <ErrorText name="email" component="div" /> */}
+
+              <Label htmlFor="birthday">Birthday:</Label>
+              <Input
+                type="text"
+                name="birthday"
+                // value={birthday}
+                disabled={birthdayDisabled}
+              />
+              <Button
+                name="birthday"
+                type={typeBtn}
+                onClick={e =>
+                  handleClick(
+                    e,
+                    birthdayDisabled,
+                    setBirthdayDisabled,
+                    values.birthday
+                  )
+                }
+              >
+                {birthdayDisabled ? (
+                  <EditIcon fill={iconColor} />
+                ) : (
+                  <CheckIcon />
+                )}
+              </Button>
+              {/* <ErrorText name="birthday" component="div" /> */}
+
+              <Label htmlFor="phone">Phone:</Label>
+              <Input
+                type="tel"
+                name="phone"
+                // value={phone}
+                disabled={phoneDisabled}
+              />
+              <Button
+                name="phone"
+                type={typeBtn}
+                onClick={e =>
+                  handleClick(e, phoneDisabled, setPhoneDisabled, values.phone)
+                }
+              >
+                {phoneDisabled ? <EditIcon fill={iconColor} /> : <CheckIcon />}
+              </Button>
+              {/* <ErrorText name="phone" component="div" /> */}
+
+              <Label htmlFor="city">City:</Label>
+              <Input
+                type="text"
+                name="city"
+                // value={city}
+                disabled={cityDisabled}
+              />
+              <Button
+                name="city"
+                type={typeBtn}
+                onClick={e =>
+                  handleClick(e, cityDisabled, setCityDisabled, values.city)
+                }
+              >
+                {cityDisabled ? <EditIcon fill={iconColor} /> : <CheckIcon />}
+              </Button>
+              {/* <ErrorText name="city" component="div" /> */}
+            </InfoForm>
+          )}
         </Formik>
         <Logout />
       </InfoContainer>

src/components/UserData/UserData.styled.jsx

@@ -1,6 +1,7 @@
 import { Field, ErrorMessage, Form } from 'formik';
-import { ReactComponent as EditSvg } from './img/edit-icon.svg';
-import { ReactComponent as CameraSvg } from './img/camera-icon.svg';
+import { ReactComponent as EditSvg } from 'icons/edit-icon.svg';
+import { ReactComponent as CameraSvg } from 'icons/camera-icon.svg';
+import { ReactComponent as CheckSvg } from 'icons/check-icon.svg';
 
 import styled from 'styled-components';
 
@@ -109,8 +110,7 @@ export const IconWraper = styled.div`
 `;
 
 export const CameraIcon = styled(CameraSvg)`
-  fill: ${p => p.theme.colors.accent};  
-
+  fill: ${p => p.theme.colors.accent};
 `;
 
 export const InfoContainer = styled.div`
@@ -178,19 +178,26 @@ export const Input = styled(Field)`
   padding-bottom: 3px;
 
   padding-left: 18px;
-  border: 1px solid #ffffff;
+  border: 1px solid rgba(245, 146, 86, 0.5);
+
+  background-color: #fdf7f2;
   border-radius: 40px;
   outline: none;
   color: #111111;
 
   transition: background-color 250ms linear;
   transition: border 250ms linear;
 
+  &:disabled {
+    background-color: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  /* 
   &:hover,
   &:focus {
     background-color: #fdf7f2;
     border: 1px solid rgba(245, 146, 86, 0.5);
-  }
+  } */
 
   @media ${p => p.theme.device.tablet} {
     font-size: 18px;
@@ -237,7 +244,23 @@ export const EditIcon = styled(EditSvg)`
   width: 12.5px;
   height: 12.5px;
 
-  fill: rgba(17, 17, 17, 0.6);
+  /* fill: rgba(17, 17, 17, 0.6); */
+
+  @media ${p => p.theme.device.tablet} {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+export const CheckIcon = styled(CheckSvg)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background-repeat: no-repeat; */
+  width: 12.5px;
+  height: 12.5px;
+
+  fill: #f59256;
 
   @media ${p => p.theme.device.tablet} {
     width: 20px;