Merge pull request #50 from Sokilskill/fix/profilePage

Fix/profile page
Sokilskill · Jan 19, 2024 · 460e1cb · 460e1cb
2 parents 44aab36 + 9132015
commit 460e1cb
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 72 deletions.
diff --git a/src/components/UserCard/UserCard.jsx b/src/components/UserCard/UserCard.jsx
@@ -1,12 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 import { updatedUserAvatar } from '../../redux/profileSettings/operations';
 
 import sprite from '../../assets/sprite.svg';
-import { selectCurrentUser, selectUserProfile } from '../../redux/profileSettings/selectors';
+import {
+  selectCurrentUser,
+  selectUserProfile,
+} from '../../redux/profileSettings/selectors';
 import {
   ActivityShower,
   AvatarContainer,
@@ -24,7 +27,6 @@ import {
   ParamsSvg,
   ProfileContainer,
   Span,
-  SpanIntake,
   Text,
   TextCalorie,
   UserName,
@@ -37,7 +39,6 @@ import {
 } from './UserCard.styled';
 import { LogOutBtn } from '../../helperComponents/LogOutBtn/LogOutBtn';
 
-
 export const UserCard = ({ time }) => {
   const dispatch = useDispatch();
   const userProfile = useSelector(selectUserProfile);
@@ -48,8 +49,7 @@ export const UserCard = ({ time }) => {
   const [previewStyle, setPreviewStyle] = useState({});
   const [avatarStyle, setAvatarStyle] = useState({});
   const [loading, setLoading] = useState(false);
-  const user  = useSelector(selectCurrentUser);
-
+  const user = useSelector(selectCurrentUser);
 
   const handleAvatarChange = async (e) => {
     const newAvatarFile = e.target.files[0];
@@ -61,13 +61,15 @@ export const UserCard = ({ time }) => {
         setAvatarPreviewURL(objectURL);
 
         const data = await dispatch(updatedUserAvatar(newAvatarFile));
-        console.log(newAvatarFile);
+        console.log('newAvatar ProfilePage', newAvatarFile);
+        console.log('data', data);
       } catch (error) {
         console.error('Failed to create object URL:', error);
         toast.error('Failed to update avatar');
       } finally {
-        setLoading(false); 
-        e.target.form.reset();
+        setLoading(false);
+        // e.target.form.reset();
+        // ===================== Переглянути чи є тут метод reset =============================
       }
     }
   };
@@ -85,8 +87,6 @@ export const UserCard = ({ time }) => {
     }
   }, [showPreview]);
 
-
-
   return (
     <ProfileContainer>
       <WrapperAvatar>
@@ -100,7 +100,7 @@ export const UserCard = ({ time }) => {
         </AvatarContainer>
         <Label htmlFor="file-input">
           <AvatarPickerSvg>
-            <use href={sprite + '#icon-check-mark-1'} />
+            <use href={`${sprite}#icon-check-mark-1`} />
           </AvatarPickerSvg>
         </Label>
         <div>
@@ -174,10 +174,8 @@ export const UserCard = ({ time }) => {
         </Desc>
       </DescWrapper>
       <WrapperLogOut>
-<LogOutBtn/>        
+        <LogOutBtn />
       </WrapperLogOut>
-
-
     </ProfileContainer>
   );
 };
diff --git a/src/components/UserCard/UserCard.styled.jsx b/src/components/UserCard/UserCard.styled.jsx
@@ -1,8 +1,5 @@
 import styled from '@emotion/styled';
 
-
-
-
 export const ProfileContainer = styled.div`
   width: 100%;
   display: flex;
@@ -12,14 +9,11 @@ export const ProfileContainer = styled.div`
   @media (min-width: 768px) {
     width: 439px;
     margin: 0 auto;
-
-    
   }
 
   @media (min-width: 1440px) {
     width: 439px;
-    // margin: 0 auto;
-    
+    margin: 0;
   }
 `;
 
@@ -284,17 +278,16 @@ export const Desc = styled.p`
 `;
 
 export const WrapperLogOut = styled.div`
-width: 100%;
-display: inline-flex;
-justify-content: flex-end;
-margin: 41px 40px 0 0;
-
-@media (min-width: 768px) {
-  margin: 32px 0 0 0;
-}
-
-@media (min-width: 1440px) {
-  margin: 32px 0 0 0;
-}
-`;
+  width: 100%;
+  display: inline-flex;
+  justify-content: flex-end;
+  margin: 41px 40px 0 0;
+
+  @media (min-width: 768px) {
+    margin: 32px 0 0 0;
+  }
 
+  @media (min-width: 1440px) {
+    margin: 32px 0 0 0;
+  }
+`;
diff --git a/src/components/UserForm/UserForm.styled.jsx b/src/components/UserForm/UserForm.styled.jsx
@@ -11,7 +11,7 @@ export const ErrorMessageStyled = styled.div`
 export const MainContainer = styled.div`
   display: flex;
   justify-content: center;
-  width: 100%;
+  // width: 100%;
 `;
 
 export const UserContainer = styled.div`
@@ -104,10 +104,10 @@ export const ProfileCalendarWrapper = styled.div`
 `;
 
 export const DesiredWeight = styled.div`
-width: 160px;
-@media (min-width: 768px){
-  width: 140px;
-}
+  width: 160px;
+  @media (min-width: 768px) {
+    width: 140px;
+  }
 `;
 export const HeightInput = styled.input`
   width: 160px;
@@ -158,27 +158,27 @@ export const CurrentWeightInput = styled.input`
 `;
 
 export const DesiredWeightInput = styled.input`
-width: 160px;
-height: 52px;
-border-radius: 12px;
-margin: 4px 0 0 0 ;
-padding: 14px;
-display: inline-flex;
-background: transparent;
-outline: none;
-border: 1px solid var( --input-border, rgba(239, 237, 232, 0.30));
-font-family: Roboto;
-font-size: 14px;
-font-style: normal;
-font-weight: 400;
-line-height: 1.3;
-color: var( --white, #efede8);
-
-@media (min-width: 768px){
-  width: 140px;
-
-  margin: 8px 0 0 0;
-}
+  width: 160px;
+  height: 52px;
+  border-radius: 12px;
+  margin: 4px 0 0 0;
+  padding: 14px;
+  display: inline-flex;
+  background: transparent;
+  outline: none;
+  border: 1px solid var(--input-border, rgba(239, 237, 232, 0.3));
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--white, #efede8);
+
+  @media (min-width: 768px) {
+    width: 140px;
+
+    margin: 8px 0 0 0;
+  }
 `;
 
 export const CalendarField = styled(Field)`

diff --git a/src/pages/ProfilePage/ProfilePage.jsx b/src/pages/ProfilePage/ProfilePage.jsx
@@ -17,13 +17,9 @@ const ProfilePage = () => {
       </TitleContainer>
 
       <ReversDiv>
-//         <UserCardContainer>
-          <UserCard />
-//         </UserCardContainer>
+        <UserCard />
 
-//         <UserFormContainer>
-          <UserForm />
-//         </UserFormContainer>
+        <UserForm />
       </ReversDiv>
     </ProfileContainer>
   );

diff --git a/src/pages/ProfilePage/ProfilePage.styled.jsx b/src/pages/ProfilePage/ProfilePage.styled.jsx
@@ -28,11 +28,11 @@ export const ReversDiv = styled.div`
   //   display: flex;
   // justify-content: center;
   // width: 100%;
- 
+
   //   flex-direction: row-reverse;
   //   justify-content: space-between;
   //   max-width: 100%;
-    
+
   // }
 
   display: flex;
@@ -63,12 +63,10 @@ export const ReversDiv = styled.div`
   }
 
   @media (max-width: 1439px) {
-    flex-direction: column-reverse;
-
+    flex-direction: column;
   }
 `;
 
-
 export const UserCardContainer = styled.div`
   @media (min-width: 1440px) {
     // width: 704px;