refactor(stories): co-locate stories with components (#2078)

* refactor: move ActionButton component * refactor: move BanUserButton component * refactor: move ChatActionMessage component * refactor: move ChatContainer component * refactor: move AuthModal component * refactor: move BrowserNotifyModal component * refactor: move ChatUserMessage component * refactor: move ChatJoinMessage component * refactor: move ChatTextField component * refactor: move ChatUserBadge component * refactor: move FollowerCollection and SingleFollower components * fix: bad import path * refactor: move FollowModal component * refactor: move Modal component * refactor: move ContentHeader component * refactor: move ChatSystemMessage component * refactor: move Header component * refactor: move Footer component * refactor: move StatusBar component * refactor: move OfflineBanner component * refactor: move OwncastPlayer component * refactor: move IndieAuthModal component * refactor: move SocialLinks component * refactor: move VideoPoster component * refactor: move FollowModal component * refactor: move FediAuthModal.tsx component * refactor: move UserDropdown component * refactor: move ChatSocialMessage component * refactor: move Logo component * refactor: move NotifyReminderPopup component * refactor: move NameChangeModal component * refactor: move FatalErrorStateModal component * refactor: move ChatModeratorNotification component * refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components * refactor: move CustomPageContent component * refactor: move storybook Introduction file * refactor: update storybook story import path * refactor: move storybook preview styles * refactor: move storybook doc pages * refactor: move Color and ImageAsset components * fix: bad import path * fix: bad import path in story file
2022-09-03 20:38:52 +02:00
parent 9f550a87d2
commit 5ebbbb8bf2
82 changed files with 120 additions and 121 deletions
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
@@ -0,0 +1,3 @@
+.followers {
+	width: 100%;
+}
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
@@ -0,0 +1,233 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FollowerCollection from './FollowerCollection';
+
+export default {
+  title: 'owncast/Components/Followers/Followers collection',
+  component: FollowerCollection,
+  parameters: {},
+} as ComponentMeta<typeof FollowerCollection>;
+
+const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
+  <FollowerCollection {...args} />
+);
+
+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',
+      username: 'mardijker@sun.minuscule.space',
+      image:
+        'https://sun.minuscule.space/media/336af7ae5a2bcb508308eddb30b661ee2b2e15004a50795ee3ba0653ab190a93.jpg',
+      timestamp: '2022-04-27T12:12:50Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.online/users/Kallegro',
+      name: '',
+      username: 'Kallegro@mastodon.online',
+      image: '',
+      timestamp: '2022-04-26T15:24:09Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.online/users/kerfuffle',
+      name: 'Kerfuffle',
+      username: 'kerfuffle@mastodon.online',
+      image:
+        'https://files.mastodon.online/accounts/avatars/000/133/698/original/6aa73caa898b2d36.gif',
+      timestamp: '2022-04-25T21:32:41Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.uno/users/informapirata',
+      name: 'informapirata :privacypride:',
+      username: 'informapirata@mastodon.uno',
+      image:
+        'https://cdn.masto.host/mastodonuno/accounts/avatars/000/060/227/original/da4c44c716a339b8.png',
+      timestamp: '2022-04-25T11:38:23Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/Raeanus',
+      name: 'Raeanus',
+      username: 'Raeanus@gamethattune.club',
+      image:
+        'https://gamethattune.club/media/a6e6ccea-34f8-4c2e-b9dc-ad8cca7fafd3/DD14E3BF-1358-4961-A900-42F3495F6BE2.jpeg',
+      timestamp: '2022-04-23T00:46:56Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.ml/users/latte',
+      name: 'Даниил',
+      username: 'latte@mastodon.ml',
+      image:
+        'https://mastodon.ml/system/accounts/avatars/107/837/409/059/601/386/original/c45ec2676489e363.png',
+      timestamp: '2022-04-19T13:06:09Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://wienermobile.rentals/users/jprjr',
+      name: 'Johnny',
+      username: 'jprjr@wienermobile.rentals',
+      image: '',
+      timestamp: '2022-04-14T14:48:11Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/johnny',
+      name: 'John Regan',
+      username: 'johnny@gamethattune.club',
+      image:
+        'https://gamethattune.club/media/3c10cd89-866b-4604-ae40-39387fe17061/profile_large.jpg',
+      timestamp: '2022-04-14T14:42:48Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/MightyOwlbear',
+      name: 'Haunted Owlbear',
+      username: 'MightyOwlbear@mastodon.social',
+      image:
+        'https://files.mastodon.social/accounts/avatars/107/246/961/007/605/352/original/a86fc3db97a6de04.jpg',
+      timestamp: '2022-04-14T13:33:03Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/thelinkfloyd',
+      name: 'thelinkfloyd',
+      username: 'thelinkfloyd@gamethattune.club',
+      image: '',
+      timestamp: '2022-04-05T12:23:32Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/TheBaffler',
+      name: 'TheBaffler',
+      username: 'TheBaffler@gamethattune.club',
+      image: '',
+      timestamp: '2022-04-04T19:50:08Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/Gttjessie',
+      name: 'Gttjessie',
+      username: 'Gttjessie@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T20:18:47Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://cybre.space/users/fractal',
+      name: 'Le fractal',
+      username: 'fractal@cybre.space',
+      image:
+        'https://cybre.ams3.digitaloceanspaces.com/accounts/avatars/000/405/126/original/f1f2832a7bf1a967.png',
+      timestamp: '2022-03-30T19:46:17Z',
+      disabledAt: null,
+    },
+    {
+      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',
+      timestamp: '2022-03-30T18:09:54Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/nvrslep303',
+      name: 'Tay',
+      username: 'nvrslep303@gamethattune.club',
+      image: 'https://gamethattune.club/media/5cf9bc27-8821-445a-86ce-8aa3704acf2d/pfp.jpg',
+      timestamp: '2022-03-30T15:27:49Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/anKerrigan',
+      name: 'anKerrigan',
+      username: 'anKerrigan@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:47:04Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/jgangsta187',
+      name: 'jgangsta187',
+      username: 'jgangsta187@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:42:52Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/aekre',
+      name: 'aekre',
+      username: 'aekre@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:41:32Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/mork',
+      name: 'mork',
+      username: 'mork@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:37:10Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://fosstodon.org/users/owncast',
+      name: 'Owncast',
+      username: 'owncast@fosstodon.org',
+      image:
+        'https://cdn.fosstodon.org/accounts/avatars/107/017/218/425/829/465/original/f98ba4cd61f483ab.png',
+      timestamp: '2022-03-29T21:38:02Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://cybre.space/users/wklew',
+      name: 'wally',
+      username: 'wklew@cybre.space',
+      image:
+        'https://cybre.ams3.digitaloceanspaces.com/accounts/avatars/000/308/727/original/7453e74f3e09b27b.jpg',
+      timestamp: '2022-03-29T18:24:29Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/nvrslep303',
+      name: 'Tay',
+      username: 'nvrslep303@mastodon.social',
+      image:
+        'https://files.mastodon.social/accounts/avatars/108/041/196/166/285/851/original/fc444dd6096381af.jpg',
+      timestamp: '2022-03-29T18:19:31Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/morky',
+      name: '',
+      username: 'morky@mastodon.social',
+      image: '',
+      timestamp: '2022-03-29T18:17:59Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/jgangsta187',
+      name: 'John H.',
+      username: 'jgangsta187@mastodon.social',
+      image: '',
+      timestamp: '2022-03-29T18:15:48Z',
+      disabledAt: null,
+    },
+    {
+      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',
+      timestamp: '2022-03-29T18:12:21Z',
+      disabledAt: null,
+    },
+  ],
+};
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import { Col, Pagination, Row } from 'antd';
+import { Follower } from '../../../../interfaces/follower';
+import SingleFollower from '../SingleFollower/SingleFollower';
+import s from '../SingleFollower/SingleFollower.module.scss';
+
+export default function FollowerCollection() {
+  const ENDPOINT = '/api/followers';
+  const ITEMS_PER_PAGE = 24;
+
+  const [followers, setFollowers] = useState<Follower[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const pages = Math.ceil(total / ITEMS_PER_PAGE);
+
+  const getFollowers = async () => {
+    try {
+      const response = await fetch(`${ENDPOINT}?page=${page}`);
+      const data = await response.json();
+
+      setFollowers(data.response);
+      setTotal(data.total);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    getFollowers();
+  }, []);
+
+  useEffect(() => {
+    getFollowers();
+  }, [page]);
+
+  const noFollowers = (
+    <div>A message explaining how to follow goes here since there are no followers.</div>
+  );
+
+  if (!followers?.length) {
+    return noFollowers;
+  }
+
+  return (
+    <div className={s.followers}>
+      <Row wrap gutter={[10, 10]} justify="space-around">
+        {followers.map(follower => (
+          <Col>
+            <SingleFollower key={follower.link} follower={follower} />
+          </Col>
+        ))}
+      </Row>
+
+      <Pagination
+        current={page}
+        pageSize={ITEMS_PER_PAGE}
+        total={pages || 1}
+        onChange={p => {
+          setPage(p);
+        }}
+        hideOnSinglePage
+      />
+    </div>
+  );
+}