Merge pull request #39 from AnWhiteM/nz

User info display

src/components/Header/Header.jsx

@@ -1,10 +1,14 @@
-import css from "../Header/Header.module.css";
 import { useState } from "react";
 import UserEditModal from "../UserEditModal/UserEditModal";
 import ThemeModal from "../ThemeModal/ThemeModal";
 import svg from "../../img/icons.svg";
+import css from "../Header/Header.module.css";
+import { useSelector } from "react-redux";
+import { selectUser } from "../../redux/auth/selectror";
 
 export default function Header({ openSideBar, sideBarOpen }) {
+  const user = useSelector(selectUser);
+
   const [showModal, setShowModal] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -56,7 +60,7 @@ export default function Header({ openSideBar, sideBarOpen }) {
               </div>
               {showModal && <ThemeModal closeMenuModal={closeMenuModal} />}
               <div className={css.layout}>
-                <p className={css.text}>UserName</p>
+                <p className={css.text}>{user.name}</p>
                 <button className={css.button} onClick={() => openModal()}>
                   <span className={`${css.avatarSmall} ${css.avatar}`} />
                 </button>

src/components/MainDashboard/MainDashboard.jsx

@@ -1,7 +1,7 @@
 import { AddColumnBtn } from "../AddColumnBtn/AddColumnBtn";
 import { DashboardMessage } from "../DashboardMessage/DashboardMessage";
 import { TaskColumn } from "../TaskColumn/TaskColumn";
-import css from "./MainDashboard.module.css"
+import css from "./MainDashboard.module.css";
 
 export const MainDashboard = () => {
   return (

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) => {