From 18d92dbe9df4e9ab4939b3fe7fffc45db7335ec2 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 17 Nov 2022 21:30:57 -0800
Subject: [PATCH] Wire up follower empty state. Closes #1913

---
 web/components/ui/Content/Content.tsx         | 19 ++++++++++++++++---
 .../FollowerCollection.stories.tsx            |  8 +++++++-
 .../FollowerCollection/FollowerCollection.tsx |  5 +++--
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index d427e1ac2..e1fb63f13 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/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>
diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
index bdf1a4a2b..f67cd13b0 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
+++ b/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>
 );
 
diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
index 10ffd6202..dd1e8c485 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
+++ b/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>
   );