Show follow counts on profile tabs

This commit is contained in:
Kieran 2023-01-10 14:36:23 +00:00
parent 07fc595f46
commit 6f3107659e
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
4 changed files with 17 additions and 12 deletions

View File

@ -1,7 +1,7 @@
import useEventPublisher from "../feed/EventPublisher";
import ProfilePreview from "./ProfilePreview";
export default function FollowListBase({ pubkeys }) {
export default function FollowListBase({ pubkeys, title}) {
const publisher = useEventPublisher();
async function followAll() {
@ -12,7 +12,7 @@ export default function FollowListBase({ pubkeys }) {
return (
<>
<div className="flex">
<div className="f-grow"></div>
<div className="f-grow">{title}</div>
<div className="btn" onClick={() => followAll()}>Follow All</div>
</div>
{pubkeys?.map(a => <ProfilePreview pubkey={a} key={a} options={{ about: false }} />)}

View File

@ -11,5 +11,5 @@ export default function FollowersList({ pubkey }) {
return [...new Set(contactLists?.map(a => a.pubkey))];
}, [feed]);
return <FollowListBase pubkeys={pubkeys} />
return <FollowListBase pubkeys={pubkeys} title={`${pubkeys?.length} followers`}/>
}

View File

@ -12,5 +12,5 @@ export default function FollowsList({ pubkey }) {
return [...new Set(pTags?.flat())];
}, [feed]);
return <FollowListBase pubkeys={pubkeys} />
return <FollowListBase pubkeys={pubkeys} title={`Following ${pubkeys?.length}`}/>
}

View File

@ -54,24 +54,24 @@ export default function ProfilePage() {
<div>
{isMe ? (
<div className="btn btn-icon" onClick={() => navigate("/settings")}>
<FontAwesomeIcon icon={faGear} size="lg" />
<FontAwesomeIcon icon={faGear} size="lg" />
</div>
) : <FollowButton pubkey={id} />
) : <FollowButton pubkey={id} />
}
</div>
</div>
<p>{extractLinks([user?.about])}</p>
{user?.website && (
<div className="website f-ellipsis">
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
</div>
<div className="website f-ellipsis">
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
</div>
)}
{lnurl ? <div className="lnurl f-ellipsis">
{lnurl}
<div className="btn btn-icon" onClick={(e) => setShowLnQr(true)}>
<FontAwesomeIcon icon={faQrcode} size="lg" />
<FontAwesomeIcon icon={faQrcode} size="lg" />
</div>
</div> : null}
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
@ -84,7 +84,12 @@ export default function ProfilePage() {
case ProfileTab.Notes: return <Timeline pubkeys={id} />;
case ProfileTab.Follows: {
if (isMe) {
return follows.map(a => <ProfilePreview key={a} pubkey={a.toLowerCase()} options={{ about: false }} />)
return (
<>
<h4>Following {follows.length}</h4>
{follows.map(a => <ProfilePreview key={a} pubkey={a.toLowerCase()} options={{ about: false }} />)}
</>
);
} else {
return <FollowsList pubkey={id} />;
}
@ -104,7 +109,7 @@ export default function ProfilePage() {
</div>
</div>
<div className="f-grow details">
{details()}
{details()}
</div>
</div>
<div className="tabs">