Merge pull request #125 from VasylievYurii/max-date

added
VasylievYurii · Nov 19, 2023 · d54ac19 · d54ac19
2 parents 109923d + de6fdab
commit d54ac19
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 25 deletions.
diff --git a/src/components/DaySwitch/DaySwitch.jsx b/src/components/DaySwitch/DaySwitch.jsx
@@ -1,6 +1,6 @@
 import { useState, forwardRef } from 'react';
 import DatePicker from 'react-datepicker';
-import { format, subDays, addDays } from 'date-fns';
+import { format, subDays, addDays, parseISO } from 'date-fns';
 import {
   CalendarGlobalStyles,
   TitleWrapper,
@@ -14,9 +14,11 @@ import {
 } from './DaySwitch.styled';
 import 'react-datepicker/dist/react-datepicker.css';
 import sprite from '../../assets/sprite.svg';
+// import { useSelector } from 'react-redux/es/hooks/useSelector';
 
 const DaySwitch = ({ onDateChange }) => {
   const [startDate, setStartDate] = useState(new Date());
+  // const { userData } = useSelector((state) => state.auth);
 
   const CustomInput = forwardRef(({ value, onClick }, ref) => {
     return (
@@ -37,6 +39,7 @@ const DaySwitch = ({ onDateChange }) => {
       </CalendarWrapper>
     );
   });
+
   const handleDateChange = (newDate) => {
     setStartDate(newDate);
     if (onDateChange) {
@@ -47,14 +50,14 @@ const DaySwitch = ({ onDateChange }) => {
   const CustomHeader = ({ date, decreaseMonth, increaseMonth }) => {
     return (
       <CustomHeaderWrapper>
-        <CircleWrapper>
-          <IconWrapperHeader onClick={decreaseMonth}>
+        <CircleWrapper onClick={decreaseMonth}>
+          <IconWrapperHeader>
             <use href={`${sprite}#icon-left`} />
           </IconWrapperHeader>
         </CircleWrapper>
         <HeaderData>{format(date, 'MMMM yyyy')}</HeaderData>
-        <CircleWrapper>
-          <IconWrapperHeader onClick={increaseMonth}>
+        <CircleWrapper onClick={increaseMonth}>
+          <IconWrapperHeader>
             <use href={`${sprite}#icon-right`} />
           </IconWrapperHeader>
         </CircleWrapper>
@@ -65,10 +68,11 @@ const DaySwitch = ({ onDateChange }) => {
   return (
     <>
       <DatePicker
-        // minDate={new Date()}
+        // minDate={userData.createdAt}
+        maxDate={new Date()}
         selected={startDate}
         onChange={(date) => {
-          // setStartDate(date);
+          setStartDate(date);
           onDateChange(date);
         }}
         customInput={<CustomInput />}

diff --git a/src/components/DaySwitch/DaySwitch.styled.js b/src/components/DaySwitch/DaySwitch.styled.js
@@ -280,12 +280,14 @@ export const HeaderData = styled.p`
   letter-spacing: -0.32px;
 `;
 
-export const CircleWrapper = styled.div`
+export const CircleWrapper = styled.button`
   width: 18px;
   height: 18px;
   background-color: transparent;
+  border: none;
   border-radius: 50%;
   transition: background-color 0.3s var(--timing-function);
+  cursor: pointer;
   &:hover {
     background-color: var(--color-main-one);
   }

diff --git a/src/components/UserCard/UserCard.jsx b/src/components/UserCard/UserCard.jsx
@@ -33,7 +33,7 @@ const UserCard = () => {
   const dispatch = useDispatch();
   const { userData } = useSelector((state) => state.auth);
   const { target } = useSelector((state) => state.profile);
-  const [imageURL, setImageURL] = useState();
+  const [imageURL, setImageURL] = useState(userData.avatarURL ?? null);
   const [user, setUser] = useState('Hello user!');
   const [loading, setLoading] = useState(false);
 
@@ -58,14 +58,17 @@ const UserCard = () => {
     const file = e.target.files[0];
     fileReader.readAsDataURL(file);
     setLoading(true);
+
     try {
-      dispatch(updateAvatar(file));
+      await dispatch(updateAvatar(file));
+      // setImageURL(fileReader.result);
     } catch (error) {
       if (error.response && error.response.status === 404) {
         setImageURL(null);
       }
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   const logout = () => {
@@ -77,24 +80,18 @@ const UserCard = () => {
       <Input id="file-loader" type="file" onChange={uploadPhoto} />
       <WrapperUserDiv>
         <WrapperUser>
-          {imageURL ? (
+          {imageURL && !loading ? (
             <Img
-              src={
-                imageURL ||
-                `https://powerpulse-t5-backend.onrender.com/${userData.avatarURL}`
-              }
+              src={`https://powerpulse-t5-backend.onrender.com/${imageURL}`}
               sizes="90px"
-              onError={() => {
-                setImageURL(null);
-                setLoading(false);
-              }}
               loading="lazy"
             />
-          ) : (
+          ) : null}
+          {imageURL && loading ? (
             <IconWrapperUser>
               <use href={`${sprite}#icon-user`} />
             </IconWrapperUser>
-          )}
+          ) : null}
         </WrapperUser>
         <ButtonUser htmlFor="file-loader">
           <IconPluse>

diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx
@@ -29,7 +29,6 @@ const UserForm = () => {
   const dispatch = useDispatch();
   const { userData } = useSelector((state) => state.auth);
   const { profile } = useSelector((state) => state.profile);
-  // const { birthday } = useSelector((state) => state.profile.birthday);
   const [birthdayState, setBirthdayState] = useState('2004-11-14');
 
   useEffect(() => {
@@ -89,8 +88,6 @@ const UserForm = () => {
           )}
           <InputUseForm onDateChange={onDateChange} />
           <RadioUseForm />
-
-          {/* <BirthdayCalendar onDateChange={onDateChange} /> */}
           <SubmitBtn type="submit">Save</SubmitBtn>
         </Form>
       )}