Fix followers collection story

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

@@ -4,30 +4,24 @@ import { RecoilRoot } from 'recoil';
 import { action } from '@storybook/addon-actions';
 import { FollowerCollection } from './FollowerCollection';
 
-export default {
+const mocks = {
-  title: 'owncast/Components/Followers/Followers collection',
+  mocks: [
-  component: FollowerCollection,
+    {
-  parameters: {},
+      // The "matcher" determines if this
-} as ComponentMeta<typeof FollowerCollection>;
+      // mock should respond to the current
-
+      // call to fetch().
-const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
+      matcher: {
-  <RecoilRoot>
+        name: 'response',
-    <FollowerCollection
+        url: 'glob:/api/followers*',
-      onFollowButtonClick={() => {
+      },
-        action('Follow button clicked');
+      // If the "matcher" matches the current
-      }}
+      // fetch() call, the fetch response is
-      name="Example stream name"
+      // built using this "response".
-      {...args}
+      response: {
-    />
+        status: 200,
-  </RecoilRoot>
+        body: {
-);
+          total: 10,
-
+          results: [
-export const NoFollowers = Template.bind({});
-NoFollowers.args = { followers: [] };
-
-export const Example = Template.bind({});
-Example.args = {
-  followers: [
             {
               link: 'https://sun.minuscule.space/users/mardijker',
               name: 'mardijker',
@@ -144,7 +138,8 @@ Example.args = {
               link: 'https://fosstodon.org/users/jumboshrimp',
               name: 'alex 👑🦐',
               username: 'jumboshrimp@fosstodon.org',
-      image: 'https://cdn.fosstodon.org/accounts/avatars/000/320/316/original/de43cda8653ade7f.jpg',
+              image:
+                'https://cdn.fosstodon.org/accounts/avatars/000/320/316/original/de43cda8653ade7f.jpg',
               timestamp: '2022-03-30T18:09:54Z',
               disabledAt: null,
             },
@@ -235,9 +230,65 @@ Example.args = {
               link: 'https://fosstodon.org/users/meisam',
               name: 'Meisam 🇪🇺:archlinux:',
               username: 'meisam@fosstodon.org',
-      image: 'https://cdn.fosstodon.org/accounts/avatars/000/264/096/original/54b4e6db97206bda.jpg',
+              image:
+                'https://cdn.fosstodon.org/accounts/avatars/000/264/096/original/54b4e6db97206bda.jpg',
               timestamp: '2022-03-29T18:12:21Z',
               disabledAt: null,
             },
           ],
+        },
+      },
+    },
+  ],
+};
+
+const noFollowersMock = {
+  mocks: [
+    {
+      // The "matcher" determines if this
+      // mock should respond to the current
+      // call to fetch().
+      matcher: {
+        name: 'response',
+        url: 'glob:/api/followers*',
+      },
+      // If the "matcher" matches the current
+      // fetch() call, the fetch response is
+      // built using this "response".
+      response: {
+        status: 200,
+        body: {
+          total: 0,
+          results: [],
+        },
+      },
+    },
+  ],
+};
+
+export default {
+  title: 'owncast/Components/Followers/Followers collection',
+  component: FollowerCollection,
+} as ComponentMeta<typeof FollowerCollection>;
+
+const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
+  <RecoilRoot>
+    <FollowerCollection
+      onFollowButtonClick={() => {
+        action('Follow button clicked');
+      }}
+      name="Example stream name"
+      {...args}
+    />
+  </RecoilRoot>
+);
+
+export const NoFollowers = Template.bind({});
+NoFollowers.parameters = {
+  fetchMock: noFollowersMock,
+};
+
+export const Example = Template.bind({});
+Example.parameters = {
+  fetchMock: mocks,
 };

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

@@ -24,6 +24,7 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
   const getFollowers = async () => {
     try {
       const response = await fetch(`${ENDPOINT}?page=${page}`);
+
       const data = await response.json();
       const { results, total: totalResults } = data;