Adds user info in modal

Author: NZAlona

src/components/UserEditModal/UserEditModal.jsx

@@ -1,5 +1,7 @@
 import { useRef } from "react";
 import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
+import { selectUser } from "../../redux/auth/selectror";
 import { Field, Form, Formik } from "formik";
 import { ErrorMessage } from "formik";
 import PasswordField from "../PasswordField/PasswordField";
@@ -21,6 +23,7 @@ const ValidationSchema = Yup.object().shape({
 });
 
 export default function UserEditModal({ onClose }) {
+  const user = useSelector(selectUser);
   const dispatch = useDispatch();
 
   const fileInputRef = useRef(null);
@@ -84,8 +87,8 @@ export default function UserEditModal({ onClose }) {
           <div>
             <Formik
               initialValues={{
-                name: "",
-                email: "",
+                name: user.name || "",
+                email: user.email || "",
                 password: "",
               }}
               onSubmit={handleSubmit}

src/redux/auth/operations.js

@@ -15,7 +15,6 @@ export const register = createAsyncThunk(
   "/auth/register",
   async (userInfo, thunkAPI) => {
     try {
-
       const response = await axios.post("/auth/register", userInfo);
       setAuthHeader(response.data.token);
       return response.data;
@@ -31,6 +30,7 @@ export const logIn = createAsyncThunk(
     try {
       const response = await axios.post("/auth/login", userInfo);
       setAuthHeader(response.data.token);
+      await thunkAPI.dispatch(getUserInfo());
       return response.data;
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);

src/redux/auth/slice.js

@@ -71,7 +71,11 @@ const authSlice = createSlice({
       })
       .addCase(getUserInfo.fulfilled, (state, action) => {
         state.loading = false;
-        state.user = action.payload;
+        // 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) => {