Wire up follower empty state. Closes #1913

web/components/ui/Content/Content.tsx

@@ -59,9 +59,19 @@ const ChatContainer = dynamic(() =>
   import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
 );
 
-const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extraPageContent }) => {
+const DesktopContent = ({
+  name,
+  streamTitle,
+  summary,
+  tags,
+  socialHandles,
+  extraPageContent,
+  setShowFollowModal,
+}) => {
   const aboutTabContent = <CustomPageContent content={extraPageContent} />;
-  const followersTabContent = <FollowerCollection name={name} />;
+  const followersTabContent = (
+    <FollowerCollection name={name} onFollowButtonClick={() => setShowFollowModal(true)} />
+  );
 
   const items = [
     { label: 'About', key: '2', children: aboutTabContent },
@@ -154,7 +164,9 @@ const MobileContent = ({
       <CustomPageContent content={extraPageContent} />
     </>
   );
-  const followersTabContent = <FollowerCollection name={name} />;
+  const followersTabContent = (
+    <FollowerCollection name={name} onFollowButtonClick={() => setShowFollowModal(true)} />
+  );
 
   const items = [
     showChat && { label: 'Chat', key: '0', children: chatContent },
@@ -367,6 +379,7 @@ export const Content: FC = () => {
                   tags={tags}
                   socialHandles={socialHandles}
                   extraPageContent={extraPageContent}
+                  setShowFollowModal={setShowFollowModal}
                 />
               )}
             </div>

web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx

@@ -11,7 +11,13 @@ export default {
 
 const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
   <RecoilRoot>
-    <FollowerCollection name="Example stream name" {...args} />
+    <FollowerCollection
+      onFollowButtonClick={function (): void {
+        throw new Error('Function not implemented.');
+      }}
+      name="Example stream name"
+      {...args}
+    />
   </RecoilRoot>
 );
 

web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

@@ -7,9 +7,10 @@ import { FollowButton } from '../../../action-buttons/FollowButton';
 
 export type FollowerCollectionProps = {
   name: string;
+  onFollowButtonClick: () => void;
 };
 
-export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
+export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollowButtonClick }) => {
   const ENDPOINT = '/api/followers';
   const ITEMS_PER_PAGE = 24;
 
@@ -58,7 +59,7 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
         from the stream, share it with others, and and show your appreciation when it goes live, all
         from your own Fediverse account.
       </p>
-      <FollowButton />
+      <FollowButton onClick={onFollowButtonClick} />
     </div>
   );