diff --git a/src/core/components/ContextTest.tsx b/src/core/components/ContextTest.tsx deleted file mode 100644 index 92511663fb8f514eab29d073fa122dc26400ef1d..0000000000000000000000000000000000000000 --- 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 61215ed6d4722bebb9e2dfae9705cafe1b05caa2..a0d9961a47602cc02116b78fc21e066d50e60b21 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 0000000000000000000000000000000000000000..65ac9a39482c289982a18a2e30ff17ca959dd397 --- /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 0000000000000000000000000000000000000000..3353bd1ca328c40a24b1c3625d880bd07fbaa043 --- /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 06f062d46be0e706e86ea5a8f8db1430a661d57f..a58f3f11c4eaa26a84ec74c55006b5bb0c0c5c35 100644 --- a/src/index.css +++ b/src/index.css @@ -2,4 +2,5 @@ html, body, #root { height: 100%; + margin: 0; }