nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-09-20 10:06:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Slightly improvement of the Name.tsx component (#408)

Browse Source 
* Slightly improved the Name component

* Updated to be compliant eslint and prettier

* Removed prettier configuration from .eslintrc.cjs

* Fixing the line feed

I hope
This commit is contained in:
Keutmann 2023-07-03 18:56:57 +02:00 committed by GitHub
parent 67add402f4
commit 61a404c4cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/js/components/Name.tsx
View File

@ -12,45 +12,57 @@ type Props = {
hideBadge?: boolean;
};
const Name = (props: Props) => {
if (!props.pub) {
console.error('Name component requires a pub', props);
return null;
}
const nostrAddr = Key.toNostrHexAddress(props.pub) || '';
let initialName = '';
let initialDisplayName;
let isGenerated = false;
const profile = SocialNetwork.profiles.get(nostrAddr);
// should we change SocialNetwork.getProfile() and use it here?
if (profile) {
initialName = profile.name?.trim().slice(0, 100) || '';
initialDisplayName = profile.display_name?.trim().slice(0, 100);
}
if (!initialName) {
initialName = AnimalName(Key.toNostrBech32Address(props.pub, 'npub') || props.pub);
isGenerated = true;
}
const [name, setName] = useState(initialName);
const [displayName, setDisplayName] = useState(initialDisplayName);
const [isNameGenerated, setIsNameGenerated] = useState(isGenerated);
useEffect(() => {
if (nostrAddr) {
// return Unsubscribe function so it unsubs on unmount
return SocialNetwork.getProfile(nostrAddr, (profile) => {
if (profile) {
setName(profile.name?.trim().slice(0, 100) || '');
setDisplayName(profile.display_name?.trim().slice(0, 100) || '');
setIsNameGenerated(profile.name || profile.display_name ? false : true);
}
});
const [nostrAddr] = useState(Key.toNostrHexAddress(props.pub) || '');
const [profile, setProfile] = useState(profileInitializer);
function profileInitializer() {
let name;
let displayName;
let isNameGenerated = false;
const profile = SocialNetwork.profiles.get(nostrAddr);
// should we change SocialNetwork.getProfile() and use it here?
if (profile) {
name = profile.name?.trim().slice(0, 100) || '';
displayName = profile.display_name?.trim().slice(0, 100);
}
}, [props.pub]);
if (!name) {
name = AnimalName(Key.toNostrBech32Address(props.pub, 'npub') || props.pub);
isNameGenerated = true;
}
return { name, displayName, isNameGenerated };
}
useEffect(() => {
if (!nostrAddr) return;
const unsub = SocialNetwork.getProfile(nostrAddr, (p) => {
if (p) {
const name = p.name?.trim().slice(0, 100) || '';
const displayName = p.display_name?.trim().slice(0, 100) || '';
const isNameGenerated = p.name || p.display_name ? false : true;
setProfile({ name, displayName, isNameGenerated });
}
});
return () => {
unsub();
};
}, [nostrAddr]);
return (
<>
<span className={isNameGenerated ? 'text-neutral-500' : ''}>
{name || displayName || props.placeholder}
<span className={profile.isNameGenerated ? 'text-neutral-500' : ''}>
{profile.name || profile.displayName || props.placeholder}
</span>
{props.hideBadge ? '' : <Badge pub={props.pub} />}
</>