add profile.about to follow suggestions

This commit is contained in:
Martti Malmi 2023-08-02 19:22:26 +03:00
parent 21f6795bd0
commit 12dffbd454
2 changed files with 59 additions and 24 deletions

View 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;
};

View File

@ -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>