Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add notice for v4 dgidb access and medical disclaimer #450

Merged
merged 6 commits into from
Nov 14, 2023
Merged

feat: add notice for v4 dgidb access and medical disclaimer #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e6ce3ef
October 2023 release (#445)
katiestahl Oct 11, 2023
f2fa4fa
Automated frontend build
katiestahl Oct 11, 2023
c96e796
Merge branch 'main' into staging
katiestahl Oct 19, 2023
af9ffda
Automated frontend build
katiestahl Oct 19, 2023
88fa605
feat: add notice for v4 dgidb access and medical disclaimer
katiestahl Nov 13, 2023
ce5014a
style: removing comment
katiestahl Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion client/src/components/Layout/MainLayout.scss
View file
Open in desktop
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
Open in desktop
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
Loading