src/views-components/main-app-bar/notifications-menu.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { Dispatch } from "redux";
   7 import { connect } from "react-redux";
   8 import { Badge, MenuItem } from "@material-ui/core";
   9 import { DropdownMenu } from "components/dropdown-menu/dropdown-menu";
  10 import { NotificationIcon } from "components/icon/icon";
  11 import bannerActions from "store/banner/banner-action";
  12 import { BANNER_LOCAL_STORAGE_KEY } from "views-components/baner/banner";
  13 import { RootState } from "store/store";
  14
  15 const mapStateToProps = (state: RootState): NotificationsMenuProps => ({
  16     isOpen: state.banner.isOpen,
  17     bannerUUID: state.auth.config.clusterConfig.Workbench.BannerUUID,
  18 });
  19
  20 const mapDispatchToProps = (dispatch: Dispatch) => ({
  21     openBanner: () => dispatch<any>(bannerActions.openBanner()),
  22 });
  23
  24 type NotificationsMenuProps = {
  25     isOpen: boolean;
  26     bannerUUID?: string;
  27 }
  28
  29 type NotificationsMenuComponentProps = NotificationsMenuProps & {
  30     openBanner: any;
  31 }
  32
  33 export const NotificationsMenuComponent = (props: NotificationsMenuComponentProps) => {
  34     const { isOpen, openBanner } = props;
  35     const result = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
  36     const menuItems: any[] = [];
  37
  38     if (!isOpen && result) {
  39         menuItems.push(<MenuItem><span onClick={openBanner}>Restore Banner</span></MenuItem>);
  40     }
  41
  42     if (menuItems.length === 0) {
  43         menuItems.push(<MenuItem>You are up to date</MenuItem>);
  44     }
  45
  46     return (<DropdownMenu
  47         icon={
  48             <Badge
  49                 badgeContent={0}
  50                 color="primary">
  51                 <NotificationIcon />
  52             </Badge>}
  53         id="account-menu"
  54         title="Notifications">
  55         {
  56             menuItems.map(item => item)
  57         }
  58     </DropdownMenu>);
  59 }
  60
  61 export const NotificationsMenu = connect(mapStateToProps, mapDispatchToProps)(NotificationsMenuComponent);