From fd9957adbe990265d353f2837b4d0158b77400a7 Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Thu, 27 Aug 2020 23:37:09 +0200
Subject: [PATCH] MaterialUI profile modal
---
src/core/components/ContextTest.tsx | 11 -----
src/core/components/MainRouting.tsx | 5 +-
src/core/components/ProfileButton.tsx | 22 +++++++++
src/core/components/ProfileModal.tsx | 69 +++++++++++++++++++++++++++
src/index.css | 1 +
5 files changed, 94 insertions(+), 14 deletions(-)
delete mode 100644 src/core/components/ContextTest.tsx
create mode 100644 src/core/components/ProfileButton.tsx
create mode 100644 src/core/components/ProfileModal.tsx
diff --git a/src/core/components/ContextTest.tsx b/src/core/components/ContextTest.tsx
deleted file mode 100644
index 9251166..0000000
--- a/src/core/components/ContextTest.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-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;
diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
index 61215ed..a0d9961 100644
--- a/src/core/components/MainRouting.tsx
+++ b/src/core/components/MainRouting.tsx
@@ -1,12 +1,11 @@
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>
diff --git a/src/core/components/ProfileButton.tsx b/src/core/components/ProfileButton.tsx
new file mode 100644
index 0000000..65ac9a3
--- /dev/null
+++ b/src/core/components/ProfileButton.tsx
@@ -0,0 +1,22 @@
+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;
diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx
new file mode 100644
index 0000000..3353bd1
--- /dev/null
+++ b/src/core/components/ProfileModal.tsx
@@ -0,0 +1,69 @@
+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;
diff --git a/src/index.css b/src/index.css
index 06f062d..a58f3f1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,4 +2,5 @@ html,
body,
#root {
height: 100%;
+ margin: 0;
}
--
GitLab