Merge pull request #54 from AnWhiteM/reload

reload
AnWhiteM · Jun 13, 2024 · e1f4a5e · e1f4a5e
2 parents 6cf1869 + a6500ad
commit e1f4a5e
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 46 deletions.
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -2,11 +2,9 @@ import { lazy, Suspense, useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import { useDispatch, useSelector } from "react-redux";
-import { refreshUser, getUserInfo } from "../../redux/auth/operations";
-import {
-  selectIsRefreshing,
-  selectIsLoggedIn,
-} from "../../redux/auth/selectors";
+import { refreshUser } from "../../redux/auth/operations";
+import { selectIsRefreshing } from "../../redux/auth/selectror";
+
 
 import RestrictedRoute from "../RestrictedRoute/RestrictedRoute";
 import PrivateRoute from "../PrivateRoute/PrivateRoute";
@@ -19,18 +17,18 @@ const NotFoundPage = lazy(() => import("../../pages/NotFoundPage"));
 
 export const App = () => {
   const isRefreshing = useSelector(selectIsRefreshing);
-  const isLoggedIn = useSelector(selectIsLoggedIn);
+  // const isLoggedIn = useSelector(selectIsLoggedIn);
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(refreshUser());
   }, [dispatch]);
 
-  useEffect(() => {
-    if (isLoggedIn) {
-      dispatch(getUserInfo());
-    }
-  }, [dispatch, isLoggedIn]);
+  // useEffect(() => {
+  //   if (isLoggedIn) {
+  //     dispatch(getUserInfo());
+  //   }
+  // }, [dispatch, isLoggedIn]);
   return (
     <>
       {isRefreshing ? (

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
@@ -76,17 +76,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 @ /
@@ -98,10 +98,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
@@ -4,7 +4,7 @@ import {
   logOut,
   register,
   updateUserInfo,
-  getUserInfo,
+  // getUserInfo,
   refreshUser,
 } from "./operations";
 
@@ -67,30 +67,34 @@ const authSlice = createSlice({
         state.loading = false;
         state.error = true;
       })
-      .addCase(getUserInfo.pending, (state) => {
+      // .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;
       })
-      .addCase(getUserInfo.fulfilled, (state, action) => {
+      .addCase(updateUserInfo.fulfilled, (state, action) => {
+        state.isLoggedIn = true;
         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;
-      })
-      .addCase(updateUserInfo.fulfilled, (state, action) => {
-        state.loading = false;
-        state.user = { ...state.user, ...action.payload }; // here we update userinfo
+        state.user.theme = action.payload.theme;
         state.error = false;
       })
       .addCase(updateUserInfo.rejected, (state, action) => {
@@ -104,6 +108,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;