Merge pull request #69 from AnWhiteM/bee

Adds functionality to upload photo
AnWhiteM · Jun 15, 2024 · f675477 · f675477
2 parents 26d0557 + d811433
commit f675477
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 84 deletions.
diff --git 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
@@ -67,6 +67,11 @@ export default function Header({ openSideBar, sideBarOpen }) {
                     // style={{
                     //   backgroundImage: `url(${user.avatarURL})`,
                     // }}
+                    style={
+                      user.avatarURL
+                        ? { backgroundImage: `url(${user.avatarURL})` }
+                        : {}
+                    }
                   />
                 </button>
               </div>

diff --git 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
@@ -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 }) {
           <div className={css.avatarContainer}>
             <span
               className={`${css.avatarBig} ${css.avatar}`}
-              // style={{
-              //   backgroundImage: `url(${user.avatarURL})`,
-              // }}
+              style={
+                user.avatarURL
+                  ? { backgroundImage: `url(${user.avatarURL})` }
+                  : {}
+              }
             />
 
             <button
@@ -102,7 +124,7 @@ export default function UserEditModal({ onClose }) {
           <div>
             <Formik
               initialValues={{
-                // avatarURL: user.avatarURL || null,
+                avatarURL: user.avatarURL || "",
                 name: user.name || "",
                 email: user.email || "",
                 password: "",
@@ -111,12 +133,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/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;
@@ -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;

diff --git 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";
 
@@ -71,37 +72,14 @@ 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 }
- */
 export const updateUserInfo = createAsyncThunk(
   "user/updateUserInfo",
   async (userData, thunkAPI) => {
     try {
-      console.log(userData);
       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);

diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
@@ -4,7 +4,6 @@ import {
   logOut,
   register,
   updateUserInfo,
-  // getUserInfo,
   refreshUser,
 } from "./operations";
 
@@ -23,6 +22,11 @@ const authSlice = createSlice({
     loading: false,
     error: false,
   },
+  reducers: {
+    updAvatarURL(state, action) {
+      state.user.avatarURL = action.payload;
+    },
+  },
   extraReducers: (builder) =>
     builder
       .addCase(register.pending, (state) => {
@@ -67,23 +71,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;
@@ -108,9 +95,10 @@ 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;
+        state.user.theme = action.payload.theme;
         state.isLoggedIn = true;
         state.isRefreshing = false;
       })
@@ -121,3 +109,4 @@ const authSlice = createSlice({
       }),
 });
 export const authReducer = authSlice.reducer;
+export const { updAvatarURL } = authSlice.actions;