Adding the ability to add and change avatar

ViktorSvertoka · Sep 30, 2023 · c0f4b63 · c0f4b63
1 parent c6b2ebc
commit c0f4b63
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git a/src/components/UserForm/UserForm.jsx b/src/components/UserForm/UserForm.jsx
@@ -17,7 +17,7 @@ import {
 } from './UserForm.styled';
 
 import { selectUser } from '../../redux/auth/selectors';
-import { updateUserParams } from '../../redux/auth/operations';
+import { getUserParams, updateUserParams } from '../../redux/auth/operations';
 
 const UserForm = () => {
   const dispatch = useDispatch();
@@ -96,7 +96,7 @@ const UserForm = () => {
       ...values,
     };
     dispatch(updateUserParams(sendData));
-    console.log(sendData);
+    dispatch(getUserParams());
   };
 
   return (

diff --git a/src/components/UserMenu/UserMenu.jsx b/src/components/UserMenu/UserMenu.jsx
@@ -11,24 +11,19 @@ import {
   UserData,
 } from './UserMenu.styled';
 import { useDispatch, useSelector } from 'react-redux';
-import { getUserParams, logOut } from '../../redux/auth/operations';
+import { logOut } from '../../redux/auth/operations';
 import { useState } from 'react';
 import { Photo } from '../UserProfile/UserProfile.styled';
 import { selectUser } from '../../redux/auth/selectors';
-import { useEffect } from 'react';
 
 export const UserMenu = () => {
   const dispatch = useDispatch();
   const [isActivePage, setIsActivePage] = useState('diary');
 
   const user = useSelector(selectUser);
 
-  useEffect(() => {
-    dispatch(getUserParams());
-  }, [dispatch]);
-
   const avatarUser = (
-    <Photo src={user.avatarUrl} width={46} height={46} alt="Avatar" />
+    <Photo src={user.avatarURL} width={46} height={46} alt="Avatar" />
   );
   const avatarLogo = (
     <SvgLogoUserHeader fill="var(--normal-color)">
@@ -84,7 +79,7 @@ export const UserMenu = () => {
             <use href={`${sprite}#icon-settings`}></use>
           </ProfileIcon>
         </NavLink>
-        <AvatarHeader>{user.avatarUrl ? avatarUser : avatarLogo}</AvatarHeader>
+        <AvatarHeader>{user.avatarURL ? avatarUser : avatarLogo}</AvatarHeader>
 
         <LogoutBtn type="button" onClick={handleLogOut}>
           <span>Logout</span>

diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx
@@ -19,7 +19,7 @@ import { updateAvatar } from '../../redux/auth/operations';
 const UserProfile = () => {
   const dispatch = useDispatch();
   const user = useSelector(selectUser);
-  const [avatar, setAvatar] = useState('');
+  const [avatar, setAvatar] = useState(user.avatarURL);
 
   const avatarUser = <Photo src={avatar} width="100%" alt="Avatar" />;
   const avatarLogo = (