#94 added modal windowSwithcUser

planner-front/src/components/Menus/ProfileBlock/ProfileBlock.js

@@ -2,7 +2,8 @@ import {Button, Menu, MenuItem} from "@mui/material";
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {NavLink, useNavigate} from "react-router-dom";
-import { logoutUser } from "../../../store/actions/usersActions";
+import { fetchUsersAllFields, logoutUser } from "../../../store/actions/usersActions";
+import SwitchUserModal from "../../SwitchUserModal/SwitchUserModal";
 
 const ProfileBlock = () => {
   const dispatch = useDispatch();
@@ -11,6 +12,10 @@ const ProfileBlock = () => {
     const open = Boolean(anchorEl);
     const user = useSelector(state => state.users.user)
     
+    const [openSwitchUser, setOpenSwitchUser] = useState(false);
+    const handleCloseSwitchUser = () => setOpenSwitchUser(false);
+
+ 
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
@@ -18,10 +23,18 @@ const ProfileBlock = () => {
         setAnchorEl(null);
     };
 
+    const handleOpenSwitchUser = () => setOpenSwitchUser(true);
+
     const logout = () => {
         dispatch(logoutUser(navigate));
         handleClose()
     }
+    const switchUser=()=>{
+        dispatch(fetchUsersAllFields());
+        handleClose()
+        handleOpenSwitchUser()
+    }
+
   return <>
       <Button
             color="inherit"
@@ -37,9 +50,13 @@ const ProfileBlock = () => {
 
         >
             <MenuItem component={NavLink} to="/profile/test" color="inherit" onClick={handleClose}>Profile</MenuItem>
-            <MenuItem onClick={()=>{logout()}}>Поменять юзера</MenuItem>
+            <MenuItem onClick={()=>{switchUser()}}>Поменять юзера</MenuItem>
             <MenuItem onClick={()=>{logout()}}>Logout</MenuItem>
         </Menu>
+        <SwitchUserModal 
+        open={openSwitchUser}
+        handleClose={handleCloseSwitchUser} 
+        />
   </>
 };
 

planner-front/src/components/SwitchUserModal/SwitchUserModal.js

+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+const SwitchUserModal= ({open, handleClose})=> {
+
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+export default SwitchUserModal;