diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index 30655f9..fd37c92 100644 --- a/src/components/App/App.jsx +++ b/src/components/App/App.jsx @@ -5,7 +5,6 @@ import { useDispatch, useSelector } from "react-redux"; import { refreshUser } from "../../redux/auth/operations"; import { selectIsRefreshing } from "../../redux/auth/selectors"; - import RestrictedRoute from "../RestrictedRoute/RestrictedRoute"; import PrivateRoute from "../PrivateRoute/PrivateRoute"; @@ -17,18 +16,12 @@ const NotFoundPage = lazy(() => import("../../pages/NotFoundPage")); export const App = () => { const isRefreshing = useSelector(selectIsRefreshing); - // const isLoggedIn = useSelector(selectIsLoggedIn); const dispatch = useDispatch(); useEffect(() => { dispatch(refreshUser()); }, [dispatch]); - // useEffect(() => { - // if (isLoggedIn) { - // dispatch(getUserInfo()); - // } - // }, [dispatch, isLoggedIn]); return ( <> {isRefreshing ? ( diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index f76ddf5..fffc4f3 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -67,6 +67,11 @@ export default function Header({ openSideBar, sideBarOpen }) { // style={{ // backgroundImage: `url(${user.avatarURL})`, // }} + style={ + user.avatarURL + ? { backgroundImage: `url(${user.avatarURL})` } + : {} + } /> diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index 665054e..6313aa1 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -97,7 +97,6 @@ @media screen and (min-width: 1440px) { .container { - /* min-width: 1440px; */ margin-right: 0; } .headerLayout { diff --git a/src/components/UserEditModal/UserEditModal.jsx b/src/components/UserEditModal/UserEditModal.jsx index 126e5e4..830b99e 100644 --- a/src/components/UserEditModal/UserEditModal.jsx +++ b/src/components/UserEditModal/UserEditModal.jsx @@ -6,6 +6,8 @@ import { Field, Form, Formik } from "formik"; import { ErrorMessage } from "formik"; import PasswordField from "../PasswordField/PasswordField"; import { updateUserInfo } from "../../redux/auth/operations"; +import { updAvatarURL } from "../../redux/auth/slice"; +import axios from "axios"; import * as Yup from "yup"; import css from "../UserEditModal/UserEditModal.module.css"; import svg from "../../img/icons.svg"; @@ -26,24 +28,9 @@ export default function UserEditModal({ onClose }) { const user = useSelector(selectUser); const dispatch = useDispatch(); + // ссылка к скрытому тнпуту тип файл const fileInputRef = useRef(null); - const handleSubmit = async (values) => { - console.log(values); - try { - const sendInfo = { - avatarURL: values.avatarURL, - name: values.name, - email: values.email, - password: values.password, - }; - await dispatch(updateUserInfo(sendInfo)).unwrap(); - // отправляем операцию aпдейтюзера и передаем ей обьект с данными имя мыло пароль - } catch (error) { - console.log(error); - } - }; - const handleMenuClick = (ev) => { ev.stopPropagation(); }; @@ -52,11 +39,44 @@ export default function UserEditModal({ onClose }) { fileInputRef.current.click(); }; - const handleFileChange = (event) => { + const handleFileChange = async (event) => { const file = event.target.files[0]; if (file) { - console.log("Selected file:", file.name); - // добавить логику для загрузки файла на сервер или обновления аватара + try { + //создаем новый объект FormData для отправки файла на сервер + const formData = new FormData(); + //добавляем выбранный файл в объект FormData + formData.append("avatar", file); + const response = await axios.put( + "https://project06back.onrender.com/current/avatar", + formData, + { + headers: { + "Content-Type": "multipart/form-data", + }, + } + ); + const url = response.data.avatarURL; + if (url) { + // Установ новый URL аватара в стейт пользователя + dispatch(updAvatarURL(url)); + } + } catch (error) { + console.log(error); + } + } + }; + + const handleSubmit = async (values) => { + try { + const sendInfo = { + name: values.name, + email: values.email, + password: values.password, + }; + await dispatch(updateUserInfo(sendInfo)).unwrap(); + } catch (error) { + console.log(error); } }; @@ -78,9 +98,11 @@ export default function UserEditModal({ onClose }) {