Updates user only name,email

AnWhiteM · Jun 13, 2024 · 2320482 · 2320482
1 parent 647aa93
commit 2320482
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 18 deletions.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -62,7 +62,12 @@ export default function Header({ openSideBar, sideBarOpen }) {
               <div className={css.layout}>
                 <p className={css.text}>{user.name}</p>
                 <button className={css.button} onClick={() => openModal()}>
-                  <span className={`${css.avatarSmall} ${css.avatar}`} />
+                  <span
+                    className={`${css.avatarSmall} ${css.avatar}`}
+                    // style={{
+                    //   backgroundImage: `url(${user.avatarURL})`,
+                    // }}
+                  />
                 </button>
               </div>
               {isModalOpen && <UserEditModal onClose={closeModal} />}

diff --git a/src/components/UserEditModal/UserEditModal.jsx b/src/components/UserEditModal/UserEditModal.jsx
@@ -28,10 +28,20 @@ export default function UserEditModal({ onClose }) {
 
   const fileInputRef = useRef(null);
 
-  const handleSubmit = (values, actions) => {
-    // отправляем операцию aпдейтюзера и передаем ей обьект с данными имя мыло пароль
-    dispatch(updateUserInfo(values));
-    actions.resetForm();
+  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) => {
@@ -66,7 +76,12 @@ export default function UserEditModal({ onClose }) {
           </div>
           <p className={css.txt}>Edit Profile</p>
           <div className={css.avatarContainer}>
-            <span className={`${css.avatarBig} ${css.avatar}`} />
+            <span
+              className={`${css.avatarBig} ${css.avatar}`}
+              // style={{
+              //   backgroundImage: `url(${user.avatarURL})`,
+              // }}
+            />
 
             <button
               type="button"
@@ -87,6 +102,7 @@ export default function UserEditModal({ onClose }) {
           <div>
             <Formik
               initialValues={{
+                // avatarURL: user.avatarURL || null,
                 name: user.name || "",
                 email: user.email || "",
                 password: "",
@@ -95,6 +111,12 @@ 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
@@ -73,17 +73,17 @@ export const refreshUser = createAsyncThunk(
  * 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);
-    }
-  }
-);
+// 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 @ /
@@ -95,10 +95,20 @@ export const updateUserInfo = createAsyncThunk(
   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);
       return response.data;
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);
     }
+  },
+  {
+    condition: (_, { getState }) => {
+      const reduxState = getState();
+      const savedToken = reduxState.auth.token;
+      return savedToken !== null;
+    },
   }
 );
diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
@@ -88,8 +88,12 @@ const authSlice = createSlice({
         state.error = false;
       })
       .addCase(updateUserInfo.fulfilled, (state, action) => {
+        state.isLoggedIn = true;
         state.loading = false;
-        state.user = { ...state.user, ...action.payload }; // here we update userinfo
+        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.error = false;
       })
       .addCase(updateUserInfo.rejected, (state, action) => {
@@ -103,6 +107,8 @@ 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.isLoggedIn = true;
         state.isRefreshing = false;