mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 14:13:21 +00:00
add profile.about to follow suggestions
This commit is contained in:
parent
21f6795bd0
commit
12dffbd454
25
src/js/hooks/useProfile.ts
Normal file
25
src/js/hooks/useProfile.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import SocialNetwork from '../nostr/SocialNetwork';
|
||||
import { ID } from '../nostr/UserIds';
|
||||
|
||||
export const useProfile = (pub: string) => {
|
||||
const [nostrAddr] = useState(pub);
|
||||
const [profile, setProfile] = useState(SocialNetwork.profiles.get(ID(nostrAddr)));
|
||||
|
||||
useEffect(() => {
|
||||
if (!nostrAddr) return;
|
||||
|
||||
const unsub = SocialNetwork.getProfile(nostrAddr, (p) => {
|
||||
if (p) {
|
||||
setProfile(p);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsub();
|
||||
};
|
||||
}, [nostrAddr]);
|
||||
|
||||
return profile;
|
||||
};
|
@ -8,30 +8,37 @@ import SearchBox from '../components/SearchBox';
|
||||
import Avatar from '../components/user/Avatar';
|
||||
import Name from '../components/user/Name';
|
||||
import useCachedFetch from '../hooks/useCachedFetch';
|
||||
import { useProfile } from '../hooks/useProfile';
|
||||
import Events from '../nostr/Events';
|
||||
import Key from '../nostr/Key';
|
||||
|
||||
const SuggestionProfile = memo(({ profile }: { profile: any }) => (
|
||||
<Link
|
||||
href={`/${nip19.npubEncode(profile.pubkey)}`}
|
||||
key={profile.pubkey}
|
||||
className="flex flex-row gap-4 w-full break-words"
|
||||
>
|
||||
<span className="flex-shrink-0">
|
||||
<Avatar str={profile.pubkey} width={30} />
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
<b>
|
||||
<Name pub={profile.pubkey} />
|
||||
</b>
|
||||
<br />
|
||||
<span className="text-neutral-400">{profile.bio}</span>
|
||||
</span>
|
||||
<span className="flex-shrink-0">
|
||||
<FollowButton className="btn btn-sm" id={profile.pubkey} />
|
||||
</span>
|
||||
</Link>
|
||||
));
|
||||
const SuggestionProfile = memo(({ pubkey }: { pubkey: string }) => {
|
||||
const profile = useProfile(pubkey);
|
||||
return (
|
||||
<Link
|
||||
href={`/${nip19.npubEncode(pubkey)}`}
|
||||
key={pubkey}
|
||||
className="flex flex-row gap-4 w-full break-words"
|
||||
>
|
||||
<span className="flex-shrink-0">
|
||||
<Avatar str={pubkey} width={30} />
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
<b>
|
||||
<Name pub={pubkey} />
|
||||
</b>
|
||||
<br />
|
||||
<span className="text-neutral-400">
|
||||
{profile?.about?.slice(0, 100)}
|
||||
{profile?.about?.length > 100 ? '...' : ''}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex-shrink-0">
|
||||
<FollowButton className="btn btn-sm" id={pubkey} />
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
|
||||
const FollowSuggestionsAPI = memo(() => {
|
||||
const url = `https://api.nostr.band/v0/suggested/profiles/${Key.getPubKey()}`;
|
||||
@ -39,15 +46,18 @@ const FollowSuggestionsAPI = memo(() => {
|
||||
|
||||
if (!suggestions.length) return null;
|
||||
|
||||
const randomSuggestions = suggestions.sort(() => 0.5 - Math.random()).slice(0, 8);
|
||||
const randomSuggestions = suggestions
|
||||
.sort(() => 0.5 - Math.random())
|
||||
.slice(0, 8)
|
||||
.map((s) => s.pubkey);
|
||||
|
||||
return (
|
||||
<div className="card-body p-2">
|
||||
<h2 className="card-title">Follow suggestions</h2>
|
||||
<hr className="opacity-10" />
|
||||
<div className="flex flex-wrap gap-4 items-center text-xs overflow-x-hidden">
|
||||
{randomSuggestions.map((profile: any) => (
|
||||
<SuggestionProfile key={profile.pubkey} profile={profile} />
|
||||
{randomSuggestions.map((pubkey: any) => (
|
||||
<SuggestionProfile key={pubkey} pubkey={pubkey} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user