Merge pull request #54 from MargoMarm/profilePage

Profile page

src/components/Calendar/Calendar.jsx

@@ -1,50 +1,59 @@
 import PropTypes from 'prop-types';
-import { forwardRef, useState } from 'react';
+import { forwardRef} from 'react';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 import uk from 'date-fns/locale/uk';
-import sub from 'date-fns/sub';
+import { format } from 'date-fns';
 import { Icon, Ipt, Label, GlobalStyles } from './Calendar.styled';
 import sprite from '../../assets/sprite.svg';
 import { Global } from '@emotion/react';
 registerLocale('uk', uk);
 
-export default function Calendar({ name }) {
-  const maxDate = sub(new Date(), { years: 18 });
-  const minDate = sub(new Date(), { years: 70 });
-  const [date, setDate] = useState(maxDate);
-
-  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
-    <Label>
-      <Ipt onClick={onClick} ref={ref} value={value} name={name} readOnly />
-      <Icon>
-        <use href={`${sprite}#calendar`}></use>
-      </Icon>
-    </Label>
-  ));
+export default function Calendar({ name, value, onChange, maxDate, minDate, showYearDropdown, dateFormat, withoutВorder }) {
+  const ExampleCustomInput = forwardRef((dd, ref) => {
+    const { onClick } = dd;
+    return(
+      <Label onClick={onClick} ref={ref}>
+        <Ipt value={value ? format(value, dateFormat || "dd.MM.yyyy") : ''} name="name" readOnly withoutВorder={withoutВorder} />
+        <Icon>
+          <use href={`${sprite}#calendar`}></use>
+        </Icon>
+      </Label>
+    )
+  });
 
   ExampleCustomInput.displayName = 'Label';
 
   return (
     <>
       <DatePicker
+        name={name}
         locale="uk"
-        selected={date}
-        onChange={date => setDate(date)}
+        selected={value}
+        onChange={date => { onChange(name, date) }}
         maxDate={maxDate}
         minDate={minDate}
-        dateFormat="yyyy-MM-dd"
         yearDropdownItemNumber={40}
         customInput={<ExampleCustomInput />}
         scrollableYearDropdown
-        showYearDropdown
+        showYearDropdown={showYearDropdown}
       />
       <Global styles={GlobalStyles} />
     </>
   );
 }
 
 Calendar.propTypes = {
+  onClick: PropTypes.func,
   name: PropTypes.string.isRequired,
-  onClick:PropTypes.func,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.instanceOf(Date)
+  ]).isRequired,
+  onChange: PropTypes.func.isRequired,
+  maxDate: PropTypes.instanceOf(Date),
+  minDate: PropTypes.instanceOf(Date),
+  showYearDropdown: PropTypes.bool,
+  dateFormat: PropTypes.string,
+  withoutВorder: PropTypes.bool,
 };

src/components/Calendar/Calendar.styled.js

@@ -142,20 +142,14 @@ export const GlobalStyles = css`
     color: inherit !important;
   }
 
-  /*
-
-
-
-
-  */
   .react-datepicker__header__dropdown {
     width: 13px;
     position: absolute;
     top: 16px;
     right: 40px;
   }
 
-  /*.react-datepicker__month-read-view--selected-month*/
+  .react-datepicker__month-read-view--selected-month,
   .react-datepicker__year-read-view--selected-year {
     display: none;
   }
@@ -247,6 +241,8 @@ export const Label = styled.label`
 
 export const Ipt = styled(Input)`
   padding-right: 34px;
+  ${props => props.withoutВorder && 'border: none;'}
+
   &:focus + svg {
     stroke: ${colors.orange};
   }

src/components/Checkbox/Checkbox.jsx

@@ -3,16 +3,17 @@ import {
   InputHidden,
   Chkbx,
   CheckboxText,
-} from './Checkbox.styled';
-import PropTypes from 'prop-types';
+} from "./Checkbox.styled";
+import PropTypes from "prop-types";
 
 export default function Checkbox({
   styleWrapper,
+  styleCheckbox,
+  styleText,
   name,
   value,
   checked,
-  styleCheckbox,
-  styleText,
+  onChange,
   children,
 }) {
   return (
@@ -21,20 +22,24 @@ export default function Checkbox({
         type="radio"
         name={name}
         value={value}
-        defaultChecked={checked ? true : false}
+        checked={checked || false}
+        onChange={onChange || null}
       />
+
       <Chkbx style={styleCheckbox || null}></Chkbx>
+
       <CheckboxText style={styleText || null}>{children}</CheckboxText>
     </CheckboxWrap>
   );
 }
 
 Checkbox.propTypes = {
-  name: PropTypes.string,
-  value: PropTypes.string,
-  children: PropTypes.string,
   styleWrapper: PropTypes.object,
   styleCheckbox: PropTypes.object,
   styleText: PropTypes.object,
-  checked: PropTypes.oneOf([true,  false]),
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  checked: PropTypes.oneOf([true, false]),
+  onChange: PropTypes.func,
+  children: PropTypes.string,
 };

src/components/UserCard/UserCard.jsx

@@ -1,6 +1,5 @@
 import { useDispatch } from 'react-redux';
 import { handleLogout } from '../../utils';
-
 import DailyStatsCards from '../DailyStatsCards/DailyStatsCards';
 import {
   AddUserBtn,
@@ -13,43 +12,55 @@ import {
   Container,
   UserSVG,
   Button,
-} from './UserCard.styled';
-import sprite from '../../assets/sprite.svg';
-import img from '../../assets/11.png';
-import DescriptionText from '../DescriptionText/DescriptionText';
+} from "./UserCard.styled";
+import sprite from "../../assets/sprite.svg";
+import DescriptionText from "../DescriptionText/DescriptionText";
+import PropTypes from "prop-types";
 
-import { mgForDiary } from '../../utils/descriptionTextMargin';
+import { mgForDiary } from "../../utils/descriptionTextMargin";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { selectUser } from "../../redux/auth/selectors";
 
-export default function UserCard() {
+export default function UserCard({ setAvatar }) {
+  const { name, avatarURL, dailyСalories, dailyTime } = useSelector(selectUser);
+  const [imgURL, setImgUrl] = useState(avatarURL || null);
   const dispatch = useDispatch();
 
+  const handleChange = (e) => {
+    setImgUrl(URL.createObjectURL(e.target.files[0]));
+    setAvatar(e.target.files[0]);
+    URL.revokeObjectURL(imgURL);
+  };
+
   return (
     <Container>
       <AvatarWrapper>
-        {true ? (
+        {imgURL ? (
+          <ImgWrap>
+            <Avatar src={imgURL} />
+          </ImgWrap>
+        ) : (
           <UserSVG>
             <use href={`${sprite}#icon-gridicons_user`}></use>
           </UserSVG>
-        ) : (
-          <ImgWrap>
-            <Avatar src={img} />
-          </ImgWrap>
         )}
+
         <AddUserBtn>
-          <input type="file" />
+          <input type="file" onChange={handleChange} />
           <svg>
             <use href={`${sprite}#icon-check-mark`}></use>
           </svg>
         </AddUserBtn>
       </AvatarWrapper>
 
-      <H3>Anna Rybachok</H3>
+      <H3>{name ? name : "user"}</H3>
 
       <CardsWrap>
         <DailyStatsWrap>
           <DailyStatsCards
             icon="fork-and-knife"
-            keyValue="2200"
+            keyValue={dailyСalories || "0"}
             label="Daily calorie intake"
             fill="true"
           />
@@ -58,7 +69,7 @@ export default function UserCard() {
         <DailyStatsWrap>
           <DailyStatsCards
             icon="dumbbell"
-            keyValue="110 min"
+            keyValue={dailyTime || 0 + " min"}
             label="Daily norm of sports"
             fill="true"
           />
@@ -85,3 +96,7 @@ export default function UserCard() {
     </Container>
   );
 }
+
+UserCard.propTypes = {
+  setAvatar: PropTypes.func.isRequired,
+};

src/components/UserCard/UserCard.styled.js

@@ -54,6 +54,9 @@ export const ImgWrap = styled.div`
 
 export const Avatar = styled.img`
   width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
 `;
 
 export const AddUserBtn = styled.label`