MaterialUI profile modal

src/core/components/ContextTest.tsx

-import React, { useContext } from 'react';
-import { userContext } from '../context/UserContext';
-
-const ContextTest = () => {
-  const { state: user } = useContext(userContext);
-  // eslint-disable-next-line no-console
-  console.log(user.name);
-  return <div>{user ? user.name : 'Not logged in!'}</div>;
-};
-
-export default ContextTest;

src/core/components/MainRouting.tsx

 import React from 'react';
 import { Route, Switch } from 'react-router';
-import ContextTest from './ContextTest';
+import { ProfileButton } from './ProfileButton';
 
 const Main = () => (
   <Switch>
     <Route path="/" exact>
-      Hello
-      <ContextTest />
+      <ProfileButton />
     </Route>
     <Route path="/news">News</Route>
   </Switch>

src/core/components/ProfileButton.tsx

+import { Button } from '@material-ui/core';
+import React, { useState } from 'react';
+import { ProfileModal } from './ProfileModal';
+
+export const ProfileButton = () => {
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
+
+  const handleProfileModalOpen = () => {
+    setIsProfileModalOpen(true);
+  };
+
+  return (
+    <div>
+      <Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
+        Open Profile
+      </Button>
+      <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
+    </div>
+  );
+};
+
+export default ProfileButton;

src/core/components/ProfileModal.tsx

+import { Modal } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { Dispatch, SetStateAction, useState } from 'react';
+
+function rand() {
+  return Math.round(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+  const top = 50 + rand();
+  const left = 50 + rand();
+
+  return {
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${top}%, -${left}%)`,
+  };
+}
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    position: 'absolute',
+    width: 400,
+    backgroundColor: theme.palette.background.paper,
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+}));
+
+type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+
+interface IProfileModalProps {
+  isOpen: boolean;
+  setIsOpen: Dispatcher<boolean>;
+}
+
+export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
+  const classes = useStyles();
+  const [modalStyle] = useState(getModalStyle);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const body = (
+    <div style={modalStyle} className={classes.paper}>
+      <h2 id="simple-modal-title">Text in a modal</h2>
+      <p id="simple-modal-description">
+        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+      </p>
+    </div>
+  );
+
+  return (
+    <div>
+      <Modal
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby="profile-modal"
+        aria-describedby="profile-modal"
+      >
+        {body}
+      </Modal>
+    </div>
+  );
+};
+
+export default ProfileModal;

src/index.css

@@ -2,4 +2,5 @@ html,
 body,
 #root {
   height: 100%;
+  margin: 0;
 }