102 lines
3.7 KiB
JavaScript
102 lines
3.7 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import axios from 'axios'
|
|
import FollowButton from './FollowButton'
|
|
|
|
export default function SuggestedUsersWidget({
|
|
title = 'Suggested Users',
|
|
limit = 4,
|
|
isLoggedIn = false,
|
|
excludeUsername = null,
|
|
initialUsers = null,
|
|
}) {
|
|
const [users, setUsers] = useState(Array.isArray(initialUsers) ? initialUsers : [])
|
|
const [loading, setLoading] = useState(!Array.isArray(initialUsers) && isLoggedIn)
|
|
|
|
useEffect(() => {
|
|
if (!isLoggedIn || Array.isArray(initialUsers)) {
|
|
setLoading(false)
|
|
return
|
|
}
|
|
|
|
let cancelled = false
|
|
|
|
axios.get('/api/users/suggestions', { params: { limit } })
|
|
.then(({ data }) => {
|
|
if (cancelled) return
|
|
const nextUsers = Array.isArray(data?.data) ? data.data : []
|
|
setUsers(nextUsers)
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setUsers([])
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false)
|
|
})
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [initialUsers, isLoggedIn, limit])
|
|
|
|
const visibleUsers = users
|
|
.filter((user) => user?.username && user.username !== excludeUsername)
|
|
.slice(0, limit)
|
|
|
|
if (!isLoggedIn) return null
|
|
if (!loading && visibleUsers.length === 0) return null
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-white/[0.07] bg-white/[0.03] overflow-hidden">
|
|
<div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.05]">
|
|
<i className="fa-solid fa-compass text-slate-500 fa-fw text-[13px]" />
|
|
<span className="text-[11px] font-semibold uppercase tracking-widest text-slate-500">{title}</span>
|
|
</div>
|
|
|
|
<div className="px-4 py-3 space-y-3">
|
|
{loading ? [1, 2, 3].map((key) => (
|
|
<div key={key} className="animate-pulse flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-full bg-white/10" />
|
|
<div className="min-w-0 flex-1 space-y-2">
|
|
<div className="h-2.5 w-24 rounded bg-white/10" />
|
|
<div className="h-2 w-32 rounded bg-white/6" />
|
|
</div>
|
|
</div>
|
|
)) : visibleUsers.map((user) => (
|
|
<div key={user.id} className="rounded-2xl border border-white/[0.05] bg-white/[0.03] p-3">
|
|
<div className="flex items-start gap-3">
|
|
<a href={user.profile_url || `/@${user.username}`} className="shrink-0">
|
|
<img
|
|
src={user.avatar_url || '/images/avatar_default.webp'}
|
|
alt={user.username}
|
|
className="h-10 w-10 rounded-full object-cover ring-1 ring-white/10"
|
|
loading="lazy"
|
|
/>
|
|
</a>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<a href={user.profile_url || `/@${user.username}`} className="block truncate text-sm font-semibold text-white/90 hover:text-white">
|
|
{user.name || user.username}
|
|
</a>
|
|
<p className="truncate text-xs text-slate-500">@{user.username}</p>
|
|
<p className="mt-1 text-xs text-slate-400">{user.context?.follower_overlap?.label || user.context?.shared_following?.label || user.reason}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center justify-between gap-3">
|
|
<span className="text-[11px] text-slate-500">{Number(user.followers_count || 0).toLocaleString()} followers</span>
|
|
<FollowButton
|
|
username={user.username}
|
|
initialFollowing={false}
|
|
initialCount={Number(user.followers_count || 0)}
|
|
showCount={false}
|
|
sizeClassName="px-3 py-1.5 text-xs"
|
|
className="min-w-[110px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|