Skip to content

Commit

Permalink
Merge pull request #452 from dgidb/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@katiestahl
katiestahl authored Nov 14, 2023
2 parents af9ffda + 35fb817 commit 70561eb
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 66 deletions.
10 changes: 9 additions & 1 deletion client/src/components/Layout/MainLayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ body {
}

header {
display: flex;
background: -webkit-linear-gradient(
var(--header-gradient-1),
var(--header-gradient-2)
Expand Down Expand Up @@ -62,6 +61,15 @@ header {
color: var(--background);
}

.header-banner {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
background-color: #f0e7c0;
padding: 10px;
}

nav {
flex-grow: 1;
display: flex;
Expand Down
212 changes: 147 additions & 65 deletions client/src/components/Layout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,24 @@ import { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';

// client state
import { ActionTypes } from 'stores/Global/reducers';
import { GlobalClientContext } from 'stores/Global/GlobalClient';

// style
import './MainLayout.scss';
import { Box, Button, IconButton, Menu, MenuItem } from '@mui/material';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Link,
Menu,
MenuItem,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import ReleaseInformation from 'components/Shared/ReleaseInformation/ReleaseInformation';

type MainLayoutProps = {
Expand All @@ -18,6 +29,9 @@ type MainLayoutProps = {

const Header: React.FC = () => {
const [anchorEl, setAnchorEl] = useState(null);
const [hideBanner, setHideBanner] = useState(
window.localStorage.getItem('banner-closed')
);

const handleOpen = (event: any) => {
setAnchorEl(event.currentTarget);
Expand All @@ -27,87 +41,154 @@ const Header: React.FC = () => {
setAnchorEl(null);
};

const handleCloseNotificationBanner = () => {
setHideBanner('true');
window.localStorage.setItem('banner-closed', 'true');
};

const navigate = useNavigate();

return (
<header>
<div className="header-logo" onClick={() => navigate('/')}>
DGIdb
</div>
<nav>
<ul>
<li>
<Button className="browse-button" onClick={handleOpen}>
Browse
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<MenuItem
onClick={() => {
handleClose();
navigate('/browse/categories');
<Box display="flex">
<div className="header-logo" onClick={() => navigate('/')}>
DGIdb
</div>
<nav>
<ul>
<li>
<Button className="browse-button" onClick={handleOpen}>
Browse
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
>
Categories
</MenuItem>
<MenuItem
onClick={() => {
handleClose();
navigate('/browse/sources');
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
Sources
</MenuItem>
</Menu>
</li>
<li onClick={() => navigate('/about')}>About</li>
<li onClick={() => navigate('/downloads')}>Downloads</li>
</ul>
</nav>
<MenuItem
onClick={() => {
handleClose();
navigate('/browse/categories');
}}
>
Categories
</MenuItem>
<MenuItem
onClick={() => {
handleClose();
navigate('/browse/sources');
}}
>
Sources
</MenuItem>
</Menu>
</li>
<li onClick={() => navigate('/about')}>About</li>
<li onClick={() => navigate('/downloads')}>Downloads</li>
</ul>
</nav>
</Box>
{!hideBanner ? (
<Box className="header-banner">
<Box>
The previous version of DGIdb can be found at{' '}
<Link href="https://old.dgidb.org" color="inherit">
old.dgidb.org
</Link>{' '}
until June 1st, 2024.
</Box>
<IconButton
aria-label="close"
size="small"
onClick={handleCloseNotificationBanner}
>
<CloseIcon fontSize="inherit" />
</IconButton>
</Box>
) : (
''
)}
</header>
);
};

const Footer: React.FC = () => {
const { state, dispatch } = useContext(GlobalClientContext);

return (
<footer>
{state.themeSettings.showDisclaimer && (
<div>
Disclaimer: This resource is intended for purely research purposes. It
should not be used for emergencies or medical or professional advice.
<IconButton
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
marginLeft: '10px',
fontSize: '25px',
}}
onClick={() => dispatch({ type: ActionTypes.HideDisclaimer })}
>
<HighlightOffIcon />
</IconButton>
</div>
)}
<ReleaseInformation />
</footer>
);
};

const DisclaimerPopup: React.FC = () => {
const [hideDisclaimer, setHideDisclaimer] = useState(
window.localStorage.getItem('disclaimer-closed')
);

const handleClose = () => {
setHideDisclaimer('true');
window.localStorage.setItem('disclaimer-closed', 'true');
};

return (
<>
<Dialog
open={!(hideDisclaimer === 'true')}
onClose={handleClose}
aria-labelledby="disclaimer-dialog-title"
aria-describedby="disclaimer-dialog-description"
>
<DialogTitle id="disclaimer-dialog-title">
<b>Disclaimer:</b> This resource is intended for purely research
purposes. It should not be used for emergencies or medical or
professional advice.
</DialogTitle>
<IconButton
aria-label="close"
size="small"
onClick={handleClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
}}
>
<CloseIcon fontSize="inherit" />
</IconButton>
<hr />
<DialogContent>
<DialogContentText id="disclaimer-dialog-description">
<Box mb={2}>
{
'A finding of a drug-gene interaction or potentially druggable category does not necessarily indicate effectiveness (or lack thereof) of any drug or treatment regimen. A finding of no interaction or no potentially druggable category does not necessarily indicate lack of effectiveness of any drug or treatment regimen. Drug-gene interactions or potentially druggable categories are not presented in ranked order of potential or predicted efficacy.'
}
</Box>
<Box>
{
"The dgidb.org website does not provide any medical or healthcare products, services or advice, and is not for medical emergencies or urgent situations. IF YOU THINK YOU MAY HAVE A MEDICAL EMERGENCY, CALL YOUR DOCTOR OR 911 IMMEDIATELY. Information contained on this website is not a substitute for a doctor's medical judgment or advice. We recommend that you discuss your specific, individual health concerns with your doctor or health care professional."
}
</Box>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary">
Close
</Button>
</DialogActions>
</Dialog>
</>
);
};

export const MainLayout = ({ children }: MainLayoutProps) => {
const { state } = useContext(GlobalClientContext);

Expand All @@ -129,6 +210,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {

return (
<div className={'layout-container'} data-theme={theme}>
<DisclaimerPopup />
<Header />
<div className="content-container">
<Box className="content">{children}</Box>
Expand Down

0 comments on commit 70561eb

Please sign in to comment.