Add follow+notify to actions menu and refactor how those modals are displayed. Closes #2247

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.stories.tsx

@@ -41,3 +41,22 @@ export const Example = Template.bind({});
 Example.args = {
   actions,
 };
+
+export const ShowFollowExample = Template.bind({});
+ShowFollowExample.args = {
+  actions,
+  showFollowItem: true,
+};
+
+export const ShowNotifyExample = Template.bind({});
+ShowNotifyExample.args = {
+  actions,
+  showNotifyItem: true,
+};
+
+export const ShowNotifyAndFollowExample = Template.bind({});
+ShowNotifyAndFollowExample.args = {
+  actions,
+  showNotifyItem: true,
+  showFollowItem: true,
+};

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.tsx

@@ -1,19 +1,38 @@
 import { FC } from 'react';
 import { Button, Dropdown, Menu } from 'antd';
-import { EllipsisOutlined } from '@ant-design/icons';
+import { EllipsisOutlined, HeartOutlined, BellOutlined } from '@ant-design/icons';
 import styles from './ActionButtonMenu.module.scss';
 import { ExternalAction } from '../../../interfaces/external-action';
 
+const NOTIFY_KEY = 'notify';
+const FOLLOW_KEY = 'follow';
+
 export type ActionButtonMenuProps = {
   actions: ExternalAction[];
+  showFollowItem?: boolean;
+  showNotifyItem?: boolean;
   externalActionSelected: (action: ExternalAction) => void;
+  notifyItemSelected: () => void;
+  followItemSelected: () => void;
 };
 
 export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
   actions,
   externalActionSelected,
+  notifyItemSelected,
+  followItemSelected,
+  showFollowItem,
+  showNotifyItem,
 }) => {
   const onMenuClick = a => {
+    if (a.key === NOTIFY_KEY) {
+      notifyItemSelected();
+      return;
+    }
+    if (a.key === FOLLOW_KEY) {
+      followItemSelected();
+      return;
+    }
     const action = actions.find(x => x.url === a.key);
     externalActionSelected(action);
   };
@@ -28,6 +47,29 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
     ),
   }));
 
+  if (showFollowItem) {
+    items.unshift({
+      key: FOLLOW_KEY,
+      label: (
+        <span className={styles.item}>
+          <HeartOutlined className={styles.icon} /> Follow this stream
+        </span>
+      ),
+    });
+  }
+
+  if (showNotifyItem) {
+    items.unshift({
+      key: NOTIFY_KEY,
+      label: (
+        <span className={styles.item}>
+          <BellOutlined className={styles.icon} />
+          Notify when live
+        </span>
+      ),
+    });
+  }
+
   const menu = <Menu items={items} onClick={onMenuClick} />;
 
   return (

web/components/action-buttons/FollowButton.tsx

@@ -1,40 +1,22 @@
 import { Button, ButtonProps } from 'antd';
 import { HeartFilled } from '@ant-design/icons';
-import { FC, useState } from 'react';
-import { useRecoilValue } from 'recoil';
-import { Modal } from '../ui/Modal/Modal';
-import { FollowModal } from '../modals/FollowModal/FollowModal';
+
+import { FC } from 'react';
 import styles from './ActionButton/ActionButton.module.scss';
-import { clientConfigStateAtom } from '../stores/ClientConfigStore';
-import { ClientConfig } from '../../interfaces/client-config.model';
 
-export type FollowButtonProps = ButtonProps;
-
-export const FollowButton: FC<FollowButtonProps> = props => {
-  const [showModal, setShowModal] = useState(false);
-  const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const { name, federation } = clientConfig;
-  const { account } = federation;
-
-  return (
-    <>
-      <Button
-        {...props}
-        type="primary"
-        className={styles.button}
-        icon={<HeartFilled />}
-        onClick={() => setShowModal(true)}
-      >
-        Follow
-      </Button>
-      <Modal
-        title={`Follow ${name}`}
-        open={showModal}
-        handleCancel={() => setShowModal(false)}
-        width="550px"
-      >
-        <FollowModal account={account} name={name} handleClose={() => setShowModal(false)} />
-      </Modal>
-    </>
-  );
+export type FollowButtonProps = ButtonProps & {
+  onClick?: () => void;
+  props?: ButtonProps;
 };
+
+export const FollowButton: FC<FollowButtonProps> = ({ onClick, props }) => (
+  <Button
+    {...props}
+    type="primary"
+    className={styles.button}
+    icon={<HeartFilled />}
+    onClick={onClick}
+  >
+    Follow
+  </Button>
+);