From 555fb288d1d6c7d84d16d09d76e2ce489de3101d Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 2 Dec 2023 15:06:47 +0900
Subject: [PATCH] Add followers in profile

---
 renderer/components/detail/Profile.tsx        |  3 +-
 .../components/detail/profile/Followers.tsx   | 30 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 renderer/components/detail/profile/Followers.tsx

diff --git a/renderer/components/detail/Profile.tsx b/renderer/components/detail/Profile.tsx
index 31cf506c..b1892bee 100644
--- a/renderer/components/detail/Profile.tsx
+++ b/renderer/components/detail/Profile.tsx
@@ -6,6 +6,7 @@ import { FaEllipsisVertical } from 'react-icons/fa6'
 import { FormattedMessage, useIntl } from 'react-intl'
 import Timeline from './profile/Timeline'
 import Followings from './profile/Followings'
+import Followers from './profile/Followers'
 
 type Props = {
   client: MegalodonInterface
@@ -116,7 +117,7 @@ export default function Profile(props: Props) {
                   <Followings client={props.client} user_id={props.user_id} />
                 </Tabs.Item>
                 <Tabs.Item title={formatMessage({ id: 'profile.followers' })} className="focus:ring-0">
-                  followers
+                  <Followers client={props.client} user_id={props.user_id} />
                 </Tabs.Item>
               </Tabs.Group>
             </div>
diff --git a/renderer/components/detail/profile/Followers.tsx b/renderer/components/detail/profile/Followers.tsx
new file mode 100644
index 00000000..918ad463
--- /dev/null
+++ b/renderer/components/detail/profile/Followers.tsx
@@ -0,0 +1,30 @@
+import { Entity, MegalodonInterface } from 'megalodon'
+import { useEffect, useState } from 'react'
+import User from './User'
+
+type Props = {
+  client: MegalodonInterface
+  user_id: string
+}
+
+export default function Followers(props: Props) {
+  const [users, setUsers] = useState<Array<Entity.Account>>([])
+
+  useEffect(() => {
+    if (props.user_id) {
+      const f = async () => {
+        const res = await props.client.getAccountFollowers(props.user_id)
+        setUsers(res.data)
+      }
+      f()
+    }
+  }, [props.client, props.user_id])
+
+  return (
+    <>
+      {users.map((user, index) => (
+        <User user={user} key={index} />
+      ))}
+    </>
+  )
+}