diff --git a/packages/app/src/components/FollowersList/index.jsx b/packages/app/src/components/FollowersList/index.jsx
index d8508f3d..18a36fab 100755
--- a/packages/app/src/components/FollowersList/index.jsx
+++ b/packages/app/src/components/FollowersList/index.jsx
@@ -1,101 +1,98 @@
import React from "react"
import * as antd from "antd"
import { Icons } from "@components/Icons"
+import LoadMore from "@components/LoadMore"
+import UserPreview from "@components/UserPreview"
import FollowsModel from "@models/follows"
import "./index.less"
-const FollowerItem = ({
- follower,
- onClick,
- index
-}) => {
- return
-
-
-
-
- {follower.fullName ?? follower.username}
-
-
-
-
- @{follower.username}
-
-
-
-
+const FollowerItem = React.memo(({ data }) => {
+ return
+})
+
+FollowerItem.displayName = "FollowerItem"
+
+const FollowersList = (props) => {
+ const [loading, setLoading] = React.useState(false)
+ const [followers, setFollowers] = React.useState(props.followers ?? [])
+ const [hasMore, setHasMore] = React.useState(true)
+
+ const page = React.useRef(0)
+ const userId = React.useRef(props.user_id)
+
+ const loadFollowers = React.useCallback(async () => {
+ setLoading(true)
+
+ console.log(
+ `Loading Followers for [${userId.current}] page [${page.current}]`,
+ )
+
+ const followers = await FollowsModel.getFollowers(userId.current, {
+ fetchData: true,
+ limit: 10,
+ page: page.current,
+ }).catch((err) => {
+ console.error(err)
+ app.message.error("Failed to fetch followers")
+
+ return null
+ })
+
+ setLoading(false)
+
+ if (followers) {
+ console.log(`Loaded Followers :`, followers)
+ setFollowers((prev) => {
+ return [...prev, ...followers.items]
+ })
+
+ if (followers.has_more) {
+ setHasMore(true)
+ } else {
+ setHasMore(false)
+ }
+ }
+ }, [userId.current])
+
+ const onLoadMore = React.useCallback(() => {
+ page.current += 1
+ loadFollowers()
+ }, [userId.current])
+
+ React.useEffect(() => {
+ if (!props.followers) {
+ if (props.user_id) {
+ userId.current = props.user_id
+ page.current = 0
+ setFollowers([])
+ setHasMore(true)
+ loadFollowers()
+ }
+ }
+ }, [props.user_id])
+
+ if (!loading && followers.length === 0) {
+ return (
+ }>
+ It's seems this user has no followers, yet.
+ Maybe you can help them out?
+
+ )
+ }
+
+ return (
+
+ {followers.map((data) => {
+ return
+ })}
+
+ )
}
-export default (props) => {
- const [loading, setLoading] = React.useState(false)
- const [followers, setFollowers] = React.useState(props.followers ?? [])
-
- const goToProfile = (username) => {
- app.navigation.goToAccount(username)
- }
-
- const loadFollowers = async () => {
- setLoading(true)
-
- console.log(`Loading Followers for [${props.user_id}]...`)
-
- const followers = await FollowsModel.getFollowers(props.user_id, true).catch((err) => {
- console.error(err)
- app.message.error("Failed to fetch followers")
-
- return null
- })
-
- setLoading(false)
-
- if (followers) {
- console.log(`Loaded Followers: [${followers.length}] >`, followers)
- setFollowers(followers)
- }
- }
-
- React.useEffect(() => {
- if (!props.followers) {
- if (props.user_id) {
- loadFollowers()
- }
- }
- }, [])
-
- if (loading) {
- return
- }
-
- if (followers.length === 0) {
- return }
- >
-
- It's seems this user has no followers, yet.
-
-
- Maybe you can help them out?
-
-
- }
-
- return
- {
- followers.map((follower, index) => {
- return goToProfile(follower.username)}
- />
- })
- }
-
-}
\ No newline at end of file
+export default FollowersList
diff --git a/packages/app/src/components/FollowersList/index.less b/packages/app/src/components/FollowersList/index.less
index 1e4c0c7c..48645442 100755
--- a/packages/app/src/components/FollowersList/index.less
+++ b/packages/app/src/components/FollowersList/index.less
@@ -33,37 +33,18 @@
}
.followersList {
- .follower {
- display: inline-flex;
- align-items: center;
+ display: flex;
+ flex-direction: column;
- width: 100%;
+ gap: 10px;
- margin-bottom: 10px;
- padding: 10px;
+ .userPreview {
+ background-color: var(--background-color-primary);
border-radius: 8px;
- border: 1px solid var(--border-color);
- cursor: pointer;
+ padding: 5px 10px;
- h2 {
- margin: 0;
- font-size: 22px;
- line-height: 26px;
- }
-
- >div {
- margin-right: 10px;
- }
-
- .names {
- display: flex;
- flex-direction: column;
- }
+ width: 100%;
}
-
- .follower:last-child {
- margin-bottom: 0;
- }
-}
\ No newline at end of file
+}