Wire up notify popup to hide/show at correct times. Closes #1911

web/components/action-buttons/NotifyButton.tsx

@@ -1,30 +1,20 @@
 import { Button } from 'antd';
 import { NotificationFilled } from '@ant-design/icons';
-import { useState } from 'react';
-import Modal from '../ui/Modal/Modal';
 import s from './ActionButton.module.scss';
-import BrowserNotifyModal from '../modals/BrowserNotify/BrowserNotifyModal';
 
-export default function NotifyButton() {
+interface Props {
-  const [showModal, setShowModal] = useState(false);
+  onClick: () => void;
-
+}
-  const buttonClicked = () => {
-    setShowModal(true);
-  };
 
+export default function NotifyButton({ onClick }: Props) {
   return (
-    <>
     <Button
       type="primary"
       className={`${s.button}`}
       icon={<NotificationFilled />}
-        onClick={buttonClicked}
+      onClick={onClick}
     >
       Notify
     </Button>
-      <Modal title="Notify" visible={showModal} handleCancel={() => setShowModal(false)}>
-        <BrowserNotifyModal />
-      </Modal>
-    </>
   );
 }

web/components/ui/Content/Content.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable react/no-danger */
 import { useRecoilValue } from 'recoil';
 import { Layout, Tabs, Spin } from 'antd';
+import { useEffect, useState } from 'react';
+import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
+
 import {
   clientConfigStateAtom,
   chatMessagesAtom,
@@ -34,6 +37,8 @@ import OfflineBanner from '../OfflineBanner/OfflineBanner';
 import { AppStateOptions } from '../../stores/application-state';
 import FollowButton from '../../action-buttons/FollowButton';
 import NotifyButton from '../../action-buttons/NotifyButton';
+import Modal from '../Modal/Modal';
+import BrowserNotifyModal from '../../modals/BrowserNotify/BrowserNotifyModal';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
@@ -50,6 +55,8 @@ export default function ContentComponent() {
 
   const { extraPageContent, version, socialHandles, name, title, tags, summary } = clientConfig;
   const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
+  const [showNotifyReminder, setShowNotifyReminder] = useState(false);
+  const [showNotifyPopup, setShowNotifyPopup] = useState(false);
 
   const followers: Follower[] = [];
 
@@ -71,6 +78,29 @@ export default function ContentComponent() {
     <ActionButton key={action.url} action={action} />
   ));
 
+  const incrementVisitCounter = () => {
+    let visits = parseInt(getLocalStorage(LOCAL_STORAGE_KEYS.userVisitCount), 10);
+    if (Number.isNaN(visits)) {
+      visits = 0;
+    }
+
+    setLocalStorage(LOCAL_STORAGE_KEYS.userVisitCount, visits + 1);
+
+    if (visits > 2 && !getLocalStorage(LOCAL_STORAGE_KEYS.hasDisplayedNotificationModal)) {
+      setShowNotifyReminder(true);
+    }
+  };
+
+  const disableNotifyReminderPopup = () => {
+    setShowNotifyPopup(false);
+    setShowNotifyReminder(false);
+    setLocalStorage(LOCAL_STORAGE_KEYS.hasDisplayedNotificationModal, true);
+  };
+
+  useEffect(() => {
+    incrementVisitCounter();
+  }, []);
+
   return (
     <Content className={`${s.root}`}>
       <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
@@ -95,14 +125,23 @@ export default function ContentComponent() {
             {externalActionButtons}
             <FollowButton />
             <NotifyReminderPopup
-              visible
+              visible={showNotifyReminder}
-              notificationClicked={() => {}}
+              notificationClicked={() => setShowNotifyPopup(true)}
-              notificationClosed={() => {}}
+              notificationClosed={() => disableNotifyReminderPopup()}
             >
-              <NotifyButton />
+              <NotifyButton onClick={() => setShowNotifyPopup(true)} />
             </NotifyReminderPopup>
           </ActionButtonRow>
 
+          <Modal
+            title="Notify"
+            visible={showNotifyPopup}
+            afterClose={() => disableNotifyReminderPopup()}
+            handleCancel={() => disableNotifyReminderPopup()}
+          >
+            <BrowserNotifyModal />
+          </Modal>
+
           <div className={`${s.lowerRow}`}>
             <div className={s.logoTitleSection}>
               <ServerLogo src="/logo" />

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx

@@ -1,7 +1,6 @@
 import { Popover } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import React, { useState, useEffect } from 'react';
-import { LOCAL_STORAGE_KEYS, getLocalStorage } from '../../../utils/localStorage';
 import s from './NotifyReminderPopup.module.scss';
 
 interface Props {
@@ -15,11 +14,13 @@ export default function NotifyReminderPopup(props: Props) {
   const { children, visible, notificationClicked, notificationClosed } = props;
   const [visiblePopup, setVisiblePopup] = useState(visible);
   const [mounted, setMounted] = useState(false);
-  const [shouldShowPopup, setShouldShowPopup] = useState(false);
+
+  useEffect(() => {
+    setVisiblePopup(visible);
+  }, [visible]);
 
   useEffect(() => {
     setMounted(true);
-    setShouldShowPopup(!getLocalStorage(LOCAL_STORAGE_KEYS.hasDisplayedNotificationModal));
   }, []);
 
   const title = <div className={s.title}>Stay updated!</div>;
@@ -43,20 +44,20 @@ export default function NotifyReminderPopup(props: Props) {
   };
 
   const content = (
-    <div>
+    <div onClick={popupClicked} onKeyDown={popupClicked} role="menuitem" tabIndex={0}>
       <button type="button" className={s.closebutton} onClick={popupClosed}>
         <CloseOutlined />
       </button>
-      <button type="button" onClick={popupClicked} className={s.contentbutton}>
+      <div className={s.contentbutton}>
         Click and never miss
         <br />
         future streams!
-      </button>
+      </div>
     </div>
   );
+
   return (
-    mounted &&
+    mounted && (
-    shouldShowPopup && (
       <Popover
         placement="topLeft"
         defaultVisible={visiblePopup}

web/utils/localStorage.ts

@@ -1,6 +1,7 @@
 export const LOCAL_STORAGE_KEYS = {
   username: 'username',
   hasDisplayedNotificationModal: 'HAS_DISPLAYED_NOTIFICATION_MODAL',
+  userVisitCount: 'USER_VISIT_COUNT',
 };
 
 export function getLocalStorage(key) {