Add notification panel to demo

Author: rvsia

packages/react-renderer-demo/src/app/src/components/layout.js

@@ -5,6 +5,8 @@ import makeStyles from '@material-ui/core/styles/makeStyles';
 import Drawer from '@material-ui/core/Drawer';
 import Toolbar from '@material-ui/core/Toolbar';
 import Divider from '@material-ui/core/Divider';
+import Badge from '@material-ui/core/Badge';
+import NotificationsIcon from '@material-ui/icons/Notifications';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import SvgIcon from '@material-ui/core/SvgIcon';
@@ -19,6 +21,7 @@ import ConnectedLinks from './common/connected-links';
 import Footer from './footer';
 
 import dynamic from 'next/dynamic';
+import NotificationPanel, { lastMessageId } from './notification-panel';
 const DocSearch = dynamic(import('./docsearch'), {
   ssr: false
 });
@@ -121,11 +124,18 @@ const Layout = ({ children }) => {
   const [open, setOpen] = useState(router.pathname !== '/');
   const [links, setLinks] = useState({});
   const searchRef = useRef(null);
+  const anchorRef = useRef(null);
+  const [openNotification, setOpenNotifiation] = useState(false);
+  const [lastCheck, setLastCheck] = useState('');
 
   useEffect(() => {
     setLinks(findConnectedLinks(router.asPath, flatSchema) || {});
   }, [router.asPath]);
 
+  useEffect(() => {
+    setLastCheck(localStorage.getItem('data-driven-forms-last-checked') || '');
+  }, []);
+
   const handleDrawerOpen = () => {
     setOpen(true);
     setTimeout(() => searchRef.current.focus(), 500);
@@ -135,6 +145,12 @@ const Layout = ({ children }) => {
     setOpen(false);
   }
 
+  const handleToggle = () => {
+    localStorage.setItem('data-driven-forms-last-checked', lastMessageId);
+    setLastCheck(lastMessageId);
+    setOpenNotifiation(!openNotification);
+  };
+
   return (
     <MenuContext.Provider value={links}>
       <div className={classes.root}>
@@ -172,6 +188,12 @@ const Layout = ({ children }) => {
           })}
         >
           <DocSearch />
+          <IconButton aria-label="show new notifications" onClick={handleToggle} color="inherit" ref={anchorRef} className={clsx(classes.menuButton)}>
+            <Badge badgeContent={lastMessageId - lastCheck} color="secondary">
+              <NotificationsIcon className={classes.menuIcons} />
+            </Badge>
+          </IconButton>
+          <NotificationPanel isOpen={openNotification} anchorRef={anchorRef} onClose={() => setOpenNotifiation(false)} />
           <a href="https://github.com/data-driven-forms/react-forms" rel="noopener noreferrer" target="_blank">
             <IconButton color="inherit" aria-label="gh repository" edge="start" className={clsx(classes.menuButton)}>
               <SvgIcon>
@@ -180,7 +202,6 @@ const Layout = ({ children }) => {
             </IconButton>
           </a>
         </div>
-
         <main
           className={clsx(classes.content, {
             [classes.contentShift]: open,

packages/react-renderer-demo/src/app/src/components/notification-panel.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Popper from '@material-ui/core/Popper';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+import Markdown from 'markdown-to-jsx';
+import { makeStyles } from '@material-ui/core/styles';
+
+import MdxComponents from './mdx/mdx-components';
+
+const options = {
+  overrides: {
+    a: {
+      component: MdxComponents.a
+    }
+  }
+};
+
+const messageList = [
+  {
+    id: '1',
+    date: 'April 8 2020',
+    title: 'Version 2 released',
+    text: `Version 2 of Data Driven Forms has been released.<br /><br />
+    Check what is new in [migration guide](/migration-guide)!<br /><br />
+    If you need documenation for version 1, please use v1 [branch on GitHub](https://github.com/data-driven-forms/react-forms/tree/v1/packages/react-renderer-demo/src/app/pages)
+    or visit our [backup link](https://pokus-next.firebaseapp.com/)!
+    `
+  }
+];
+
+export const lastMessageId = messageList[0].id;
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    transformOrigin: 'top right'
+  },
+  list: {
+    maxWidth: theme.spacing(40),
+    maxHeight: theme.spacing(40),
+    overflow: 'auto'
+  },
+  listItem: {
+    display: 'flex',
+    flexDirection: 'column'
+  }
+}));
+
+const NotificationPanel = ({ isOpen, onClose, anchorRef }) => {
+  const classes = useStyles();
+
+  return (
+    <Popper id="notifications-popup" open={isOpen} anchorEl={anchorRef.current} placement="bottom-end" transition disablePortal role={undefined}>
+      {({ TransitionProps }) => (
+        <ClickAwayListener onClickAway={onClose}>
+          <Grow in={isOpen} {...TransitionProps}>
+            <Paper className={classes.paper}>
+              <List className={classes.list}>
+                {messageList.map((message, index) => (
+                  <React.Fragment key={message.id}>
+                    <ListItem alignItems="flex-start" className={classes.listItem}>
+                      {message.date && <ListItemText secondary={message.date} />}
+                      <ListItemText
+                        primary={message.title}
+                        secondary={<Markdown options={options}>{message.text}</Markdown>}
+                        secondaryTypographyProps={{ color: 'textPrimary', component: 'div' }}
+                      />
+                    </ListItem>
+                    {index < messageList.length - 1 ? <Divider variant="middle" /> : null}
+                  </React.Fragment>
+                ))}
+              </List>
+            </Paper>
+          </Grow>
+        </ClickAwayListener>
+      )}
+    </Popper>
+  );
+};
+
+NotificationPanel.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  anchorRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).isRequired
+};
+
+export default NotificationPanel;