From 3308ce63b6efb922c0ef035cec59e54cd72e01ac Mon Sep 17 00:00:00 2001
From: NZAlona <amakoveychenko@gmail.com>
Date: Fri, 14 Jun 2024 04:27:58 +0300
Subject: [PATCH 1/5] Form

---
 src/components/App/App.jsx   |  7 -------
 src/redux/auth/operations.js | 18 ------------------
 src/redux/auth/slice.js      | 18 ------------------
 3 files changed, 43 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 9a213b4..bb7a144 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/selectror";
 
-
 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/redux/auth/operations.js b/src/redux/auth/operations.js
index f829884..b392c6d 100644
--- a/src/redux/auth/operations.js
+++ b/src/redux/auth/operations.js
@@ -72,24 +72,6 @@ export const refreshUser = createAsyncThunk(
 );
 
 /*
- * GET @ /
- * headers: Authorization: Bearer token
- */
-
-// export const getUserInfo = createAsyncThunk(
-//   "user/getUserInfo",
-//   async (_, thunkAPI) => {
-//     try {
-//       const response = await axios.get("/current");
-//       return response.data;
-//     } catch (error) {
-//       return thunkAPI.rejectWithValue(error.message);
-//     }
-//   }
-// );
-
-/*
- * Put @ /
  * headers: Authorization: Bearer token
  * body: {name, email, password }
  */
diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
index b98047a..ef109cf 100644
--- a/src/redux/auth/slice.js
+++ b/src/redux/auth/slice.js
@@ -4,7 +4,6 @@ import {
   logOut,
   register,
   updateUserInfo,
-  // getUserInfo,
   refreshUser,
 } from "./operations";
 
@@ -67,23 +66,6 @@ const authSlice = createSlice({
         state.loading = false;
         state.error = true;
       })
-      // .addCase(getUserInfo.pending, (state) => {
-      //   state.loading = true;
-      //   state.error = false;
-      // })
-      // .addCase(getUserInfo.fulfilled, (state, action) => {
-      //   state.loading = false;
-      //   // state.user = action.payload;
-      //   state.user.name = action.payload.name;
-      //   state.user.email = action.payload.email;
-      //   state.user.theme = action.payload.theme;
-      //   state.user.avatarURL = action.payload.avatarURL;
-      //   state.isLoggedIn = true;
-      // })
-      // .addCase(getUserInfo.rejected, (state, action) => {
-      //   state.loading = false;
-      //   state.error = action.payload;
-      // })
       .addCase(updateUserInfo.pending, (state) => {
         state.loading = true;
         state.error = false;

From 05aa3af00cae9000cac04485e44437cad44984c0 Mon Sep 17 00:00:00 2001
From: NZAlona <amakoveychenko@gmail.com>
Date: Sat, 15 Jun 2024 06:14:41 +0300
Subject: [PATCH 2/5] Adds upd

---
 src/components/App/App.jsx                    |  2 +-
 .../UserEditModal/UserEditModal.jsx           | 65 +++++++++++++------
 src/redux/auth/operations.js                  |  6 +-
 src/redux/auth/slice.js                       | 12 +++-
 4 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index bb7a144..fd37c92 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -3,7 +3,7 @@ import { Route, Routes } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshUser } from "../../redux/auth/operations";
-import { selectIsRefreshing } from "../../redux/auth/selectror";
+import { selectIsRefreshing } from "../../redux/auth/selectors";
 
 import RestrictedRoute from "../RestrictedRoute/RestrictedRoute";
 import PrivateRoute from "../PrivateRoute/PrivateRoute";
diff --git a/src/components/UserEditModal/UserEditModal.jsx b/src/components/UserEditModal/UserEditModal.jsx
index 126e5e4..bc02fad 100644
--- a/src/components/UserEditModal/UserEditModal.jsx
+++ b/src/components/UserEditModal/UserEditModal.jsx
@@ -2,10 +2,13 @@ import { useRef } from "react";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
 import { selectUser } from "../../redux/auth/selectors";
+// import { useState } from "react";
 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/operations.js";
+import axios from "axios";
 import * as Yup from "yup";
 import css from "../UserEditModal/UserEditModal.module.css";
 import svg from "../../img/icons.svg";
@@ -25,38 +28,60 @@ const ValidationSchema = Yup.object().shape({
 export default function UserEditModal({ onClose }) {
   const user = useSelector(selectUser);
   const dispatch = useDispatch();
+  // хранит текущ выбранный файл - по умолч null
+  // const [avatarFile, setAvatarFile] = useState("");
 
+  // ссылка к скрытому тнпуту тип файл
   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();
   };
 
   const handleButtonClick = () => {
     fileInputRef.current.click();
+    updAvatarURL("https://cdn.britannica.com/26/162626-050-3534626F/Koala.jpg");
   };
 
-  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("file", file);
+        const response = await axios.put(
+          "https://project06back.onrender.com/current/avatar",
+          formData,
+          {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          }
+        );
+        const { url } = response.data;
+        if (url) {
+          // Установим новый URL аватара в стейт пользователя
+          // setAvatarFile(url);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+
+  const handleSubmit = async (values) => {
+    try {
+      const sendInfo = {
+        // avatarURL: avatarFile, // Используем URL из состояния компонента - не нужно отправ беk сохраняет его у себя
+        name: values.name,
+        email: values.email,
+        password: values.password,
+      };
+      await dispatch(updateUserInfo(sendInfo)).unwrap();
+    } catch (error) {
+      console.log(error);
     }
   };
 
@@ -102,7 +127,7 @@ export default function UserEditModal({ onClose }) {
           <div>
             <Formik
               initialValues={{
-                // avatarURL: user.avatarURL || null,
+                avatarURL: user.avatarURL || "",
                 name: user.name || "",
                 email: user.email || "",
                 password: "",
diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js
index b392c6d..94aab32 100644
--- a/src/redux/auth/operations.js
+++ b/src/redux/auth/operations.js
@@ -83,7 +83,7 @@ export const updateUserInfo = createAsyncThunk(
       const reduxState = thunkAPI.getState();
       const savedToken = reduxState.auth.token;
       setAuthHeader(savedToken);
-      const response = await axios.put("/current", userData);
+      const response = await axios.patch("/current/update", userData);
       return response.data;
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);
@@ -97,3 +97,7 @@ export const updateUserInfo = createAsyncThunk(
     },
   }
 );
+
+// import { createAction } from "@reduxjs/toolkit";
+
+// export const updAvatarURL = createAction("updateAva");
diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
index ef109cf..743a63f 100644
--- a/src/redux/auth/slice.js
+++ b/src/redux/auth/slice.js
@@ -5,6 +5,7 @@ import {
   register,
   updateUserInfo,
   refreshUser,
+  // updAvatarURL,
 } from "./operations";
 
 const authSlice = createSlice({
@@ -22,6 +23,11 @@ const authSlice = createSlice({
     loading: false,
     error: false,
   },
+  // reducers: {
+  //   updAvatarURL(state, action) {
+  //     state.user.avatarURL = action.payload;
+  //   },
+  // },
   extraReducers: (builder) =>
     builder
       .addCase(register.pending, (state) => {
@@ -92,7 +98,11 @@ const authSlice = createSlice({
       .addCase(refreshUser.fulfilled, (state, action) => {
         // action.payload.avatarURL =
         //   "https://cdn.britannica.com/26/162626-050-3534626F/Koala.jpg";
-        state.user = action.payload;
+        // state.user = action.payload;
+        state.user.name = action.payload.name;
+        state.user.email = action.payload.email;
+        state.user.avatarURL = action.payload.avatarURL;
+        state.user.theme = action.payload.theme;
         state.isLoggedIn = true;
         state.isRefreshing = false;
       })

From 3a046762463e369c731065e37dc683e739e9f1c2 Mon Sep 17 00:00:00 2001
From: NZAlona <amakoveychenko@gmail.com>
Date: Sat, 15 Jun 2024 06:25:44 +0300
Subject: [PATCH 3/5] Fixes photo

---
 src/components/UserEditModal/UserEditModal.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UserEditModal/UserEditModal.module.css b/src/components/UserEditModal/UserEditModal.module.css
index f755c94..64f53c1 100644
--- a/src/components/UserEditModal/UserEditModal.module.css
+++ b/src/components/UserEditModal/UserEditModal.module.css
@@ -153,7 +153,7 @@
   display: block;
   cursor: pointer;
   border-radius: 5px;
-  background-image: url(/src/img/deftAvBlack.png);
+  background-image: url(https://res.cloudinary.com/dqwyuuuzd/image/upload/v1718235453/pojpj365oqqbots9321l.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;

From a7a6cc5ef9b9e46327cf1375df129a7135c31505 Mon Sep 17 00:00:00 2001
From: NZAlona <amakoveychenko@gmail.com>
Date: Sat, 15 Jun 2024 11:49:46 +0300
Subject: [PATCH 4/5] Adds functionality to upload photo

---
 src/components/Header/Header.jsx              |  6 ++---
 src/components/Header/Header.module.css       |  1 -
 .../UserEditModal/UserEditModal.jsx           | 27 ++++++-------------
 src/redux/auth/operations.js                  |  3 +--
 src/redux/auth/slice.js                       | 15 +++++------
 5 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index f76ddf5..90db8a1 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -64,9 +64,9 @@ export default function Header({ openSideBar, sideBarOpen }) {
                 <button className={css.button} onClick={() => openModal()}>
                   <span
                     className={`${css.avatarSmall} ${css.avatar}`}
-                    // style={{
-                    //   backgroundImage: `url(${user.avatarURL})`,
-                    // }}
+                    style={{
+                      backgroundImage: `url(${user.avatarURL})`,
+                    }}
                   />
                 </button>
               </div>
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 bc02fad..6ce41c0 100644
--- a/src/components/UserEditModal/UserEditModal.jsx
+++ b/src/components/UserEditModal/UserEditModal.jsx
@@ -2,12 +2,11 @@ import { useRef } from "react";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
 import { selectUser } from "../../redux/auth/selectors";
-// import { useState } from "react";
 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/operations.js";
+import { updAvatarURL } from "../../redux/auth/slice";
 import axios from "axios";
 import * as Yup from "yup";
 import css from "../UserEditModal/UserEditModal.module.css";
@@ -28,8 +27,6 @@ const ValidationSchema = Yup.object().shape({
 export default function UserEditModal({ onClose }) {
   const user = useSelector(selectUser);
   const dispatch = useDispatch();
-  // хранит текущ выбранный файл - по умолч null
-  // const [avatarFile, setAvatarFile] = useState("");
 
   // ссылка к скрытому тнпуту тип файл
   const fileInputRef = useRef(null);
@@ -40,7 +37,6 @@ export default function UserEditModal({ onClose }) {
 
   const handleButtonClick = () => {
     fileInputRef.current.click();
-    updAvatarURL("https://cdn.britannica.com/26/162626-050-3534626F/Koala.jpg");
   };
 
   const handleFileChange = async (event) => {
@@ -50,7 +46,7 @@ export default function UserEditModal({ onClose }) {
         //создаем новый объект FormData для отправки файла на сервер
         const formData = new FormData();
         //добавляем выбранный файл в объект FormData
-        formData.append("file", file);
+        formData.append("avatar", file);
         const response = await axios.put(
           "https://project06back.onrender.com/current/avatar",
           formData,
@@ -60,10 +56,10 @@ export default function UserEditModal({ onClose }) {
             },
           }
         );
-        const { url } = response.data;
+        const url = response.data.avatarURL;
         if (url) {
-          // Установим новый URL аватара в стейт пользователя
-          // setAvatarFile(url);
+          // Установ новый URL аватара в стейт пользователя
+          dispatch(updAvatarURL(url));
         }
       } catch (error) {
         console.log(error);
@@ -74,7 +70,6 @@ export default function UserEditModal({ onClose }) {
   const handleSubmit = async (values) => {
     try {
       const sendInfo = {
-        // avatarURL: avatarFile, // Используем URL из состояния компонента - не нужно отправ беk сохраняет его у себя
         name: values.name,
         email: values.email,
         password: values.password,
@@ -103,9 +98,9 @@ export default function UserEditModal({ onClose }) {
           <div className={css.avatarContainer}>
             <span
               className={`${css.avatarBig} ${css.avatar}`}
-              // style={{
-              //   backgroundImage: `url(${user.avatarURL})`,
-              // }}
+              style={{
+                backgroundImage: `url(${user.avatarURL})`,
+              }}
             />
 
             <button
@@ -136,12 +131,6 @@ export default function UserEditModal({ onClose }) {
               validationSchema={ValidationSchema}
             >
               <Form className={css.forma} autoComplete="off">
-                {/* <Field
-                  type="text"
-                  name="avatarURL"
-                  className={css.formInput}
-                  placeholder="avatar"
-                /> */}
                 <div className={css.formGroup}>
                   <label htmlFor="name" className={css.formLabel} />
                   <Field
diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js
index 94aab32..3b6a8d8 100644
--- a/src/redux/auth/operations.js
+++ b/src/redux/auth/operations.js
@@ -1,3 +1,4 @@
+// import { createAction } from "@reduxjs/toolkit";
 import axios from "axios";
 import { createAsyncThunk } from "@reduxjs/toolkit";
 
@@ -98,6 +99,4 @@ export const updateUserInfo = createAsyncThunk(
   }
 );
 
-// import { createAction } from "@reduxjs/toolkit";
-
 // export const updAvatarURL = createAction("updateAva");
diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
index 743a63f..ea68796 100644
--- a/src/redux/auth/slice.js
+++ b/src/redux/auth/slice.js
@@ -5,7 +5,6 @@ import {
   register,
   updateUserInfo,
   refreshUser,
-  // updAvatarURL,
 } from "./operations";
 
 const authSlice = createSlice({
@@ -23,11 +22,11 @@ const authSlice = createSlice({
     loading: false,
     error: false,
   },
-  // reducers: {
-  //   updAvatarURL(state, action) {
-  //     state.user.avatarURL = action.payload;
-  //   },
-  // },
+  reducers: {
+    updAvatarURL(state, action) {
+      state.user.avatarURL = action.payload;
+    },
+  },
   extraReducers: (builder) =>
     builder
       .addCase(register.pending, (state) => {
@@ -96,9 +95,6 @@ const authSlice = createSlice({
         state.error = true;
       })
       .addCase(refreshUser.fulfilled, (state, action) => {
-        // action.payload.avatarURL =
-        //   "https://cdn.britannica.com/26/162626-050-3534626F/Koala.jpg";
-        // state.user = action.payload;
         state.user.name = action.payload.name;
         state.user.email = action.payload.email;
         state.user.avatarURL = action.payload.avatarURL;
@@ -113,3 +109,4 @@ const authSlice = createSlice({
       }),
 });
 export const authReducer = authSlice.reducer;
+export const { updAvatarURL } = authSlice.actions;

From d81143376f227fc769fe67c08576124a391b7197 Mon Sep 17 00:00:00 2001
From: NZAlona <amakoveychenko@gmail.com>
Date: Sat, 15 Jun 2024 13:14:58 +0300
Subject: [PATCH 5/5] Sets default img and functionality to upload img

---
 src/components/Header/Header.jsx                      | 11 ++++++++---
 src/components/UserEditModal/UserEditModal.jsx        |  8 +++++---
 src/components/UserEditModal/UserEditModal.module.css |  2 +-
 src/redux/auth/operations.js                          |  7 -------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 90db8a1..fffc4f3 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -64,9 +64,14 @@ export default function Header({ openSideBar, sideBarOpen }) {
                 <button className={css.button} onClick={() => openModal()}>
                   <span
                     className={`${css.avatarSmall} ${css.avatar}`}
-                    style={{
-                      backgroundImage: `url(${user.avatarURL})`,
-                    }}
+                    // style={{
+                    //   backgroundImage: `url(${user.avatarURL})`,
+                    // }}
+                    style={
+                      user.avatarURL
+                        ? { backgroundImage: `url(${user.avatarURL})` }
+                        : {}
+                    }
                   />
                 </button>
               </div>
diff --git a/src/components/UserEditModal/UserEditModal.jsx b/src/components/UserEditModal/UserEditModal.jsx
index 6ce41c0..830b99e 100644
--- a/src/components/UserEditModal/UserEditModal.jsx
+++ b/src/components/UserEditModal/UserEditModal.jsx
@@ -98,9 +98,11 @@ export default function UserEditModal({ onClose }) {
           <div className={css.avatarContainer}>
             <span
               className={`${css.avatarBig} ${css.avatar}`}
-              style={{
-                backgroundImage: `url(${user.avatarURL})`,
-              }}
+              style={
+                user.avatarURL
+                  ? { backgroundImage: `url(${user.avatarURL})` }
+                  : {}
+              }
             />
 
             <button
diff --git a/src/components/UserEditModal/UserEditModal.module.css b/src/components/UserEditModal/UserEditModal.module.css
index 64f53c1..d2c5250 100644
--- a/src/components/UserEditModal/UserEditModal.module.css
+++ b/src/components/UserEditModal/UserEditModal.module.css
@@ -65,7 +65,7 @@
 
 .plusBtn {
   border: none;
-  background-color: #bedbb0;
+  background-color: var(--green);
   border-radius: 4px;
   width: 24px;
   height: 24px;
diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js
index 3b6a8d8..a9f8e28 100644
--- a/src/redux/auth/operations.js
+++ b/src/redux/auth/operations.js
@@ -72,15 +72,10 @@ export const refreshUser = createAsyncThunk(
   }
 );
 
-/*
- * headers: Authorization: Bearer token
- * body: {name, email, password }
- */
 export const updateUserInfo = createAsyncThunk(
   "user/updateUserInfo",
   async (userData, thunkAPI) => {
     try {
-      console.log(userData);
       const reduxState = thunkAPI.getState();
       const savedToken = reduxState.auth.token;
       setAuthHeader(savedToken);
@@ -98,5 +93,3 @@ export const updateUserInfo = createAsyncThunk(
     },
   }
 );
-
-// export const updAvatarURL = createAction("updateAva");