Skip to content

Commit

Permalink
extract ProfileStats comp
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalmi committed Jul 27, 2023
1 parent bea7274 commit 5d06201
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 38 deletions.
40 changes: 2 additions & 38 deletions src/js/components/user/ProfileCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import Avatar from './Avatar';
import ProfileDropdown from './Dropdown';
import Name from './Name';
import ProfilePicture from './ProfilePicture';
import Stats from './Stats';

const ProfileCard = (props: { hexPub: string; npub: string }) => {
const { hexPub, npub } = props;
Expand All @@ -26,10 +27,6 @@ const ProfileCard = (props: { hexPub: string; npub: string }) => {
const [rawDataJson, setRawDataJson] = useState<string>('');
const [isMyProfile, setIsMyProfile] = useState<boolean>(false);
const [blocked, setBlocked] = useState<boolean>(false);
const [followedUserCount, setFollowedUserCount] = useState<number>(0);
const [followerCount, setFollowerCount] = useState<number>(0);
const [followerCountFromApi, setFollowerCountFromApi] = useState<number>(0);
const [followedUserCountFromApi, setFollowedUserCountFromApi] = useState<number>(0);

const getNostrProfile = useCallback((address, nostrAddress) => {
const subscriptions = [] as any[];
Expand All @@ -44,26 +41,7 @@ const ProfileCard = (props: { hexPub: string; npub: string }) => {
false,
),
);
fetch(`https://eu.rbr.bio/${address}/info.json`).then((res) => {
if (!res.ok) {
return;
}
res.json().then((json) => {
if (json) {
setFollowedUserCountFromApi(json.following?.length);
setFollowerCountFromApi(json.followerCount);
}
});
});

setTimeout(() => {
subscriptions.push(
SocialNetwork.getFollowersByUser(address, (followers) => setFollowerCount(followers.size)),
);
subscriptions.push(
SocialNetwork.getFollowedByUser(address, (followed) => setFollowedUserCount(followed.size)),
);
}, 1000); // this causes social graph recursive loading, so let some other stuff like feed load first
subscriptions.push(
SocialNetwork.getProfile(
address,
Expand Down Expand Up @@ -218,21 +196,7 @@ const ProfileCard = (props: { hexPub: string; npub: string }) => {
<small className="text-iris-green">{profile.nip05?.replace(/^_@/, '')}</small>
</Show>
</div>
<div>
<div className="text-sm flex gap-4">
<a href={`/follows/${npub}`}>
<b>{Math.max(followedUserCount, followedUserCountFromApi)}</b> {t('following')}
</a>
<a href={`/followers/${npub}`}>
<b>{Math.max(followerCount, followerCountFromApi)}</b> {t('followers')}
</a>
</div>
<Show when={SocialNetwork.isFollowing(hexPub, Key.getPubKey())}>
<div>
<small>{t('follows_you')}</small>
</div>
</Show>
</div>
<Stats address={hexPub} />
<div className="py-2">
<p className="text-sm">{profile.about}</p>
<div className="flex flex-1 flex-row align-center justify-center mt-4">
Expand Down
62 changes: 62 additions & 0 deletions src/js/components/user/Stats.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { memo, useEffect, useState } from 'react';

import Key from '../../nostr/Key';
import SocialNetwork from '../../nostr/SocialNetwork';
import { translate as t } from '../../translations/Translation.mjs';
import Show from '../helpers/Show';

const ProfileStats = ({ address }) => {
const [followedUserCount, setFollowedUserCount] = useState<number>(0);
const [followerCount, setFollowerCount] = useState<number>(0);
const [followerCountFromApi, setFollowerCountFromApi] = useState<number>(0);
const [followedUserCountFromApi, setFollowedUserCountFromApi] = useState<number>(0);

useEffect(() => {
const subscriptions = [] as any[];

fetch(`https://eu.rbr.bio/${address}/info.json`).then((res) => {
if (!res.ok) {
return;
}
res.json().then((json) => {
if (json) {
setFollowedUserCountFromApi(json.following?.length);
setFollowerCountFromApi(json.followerCount);
}
});
});

setTimeout(() => {
subscriptions.push(
SocialNetwork.getFollowersByUser(address, (followers) => setFollowerCount(followers.size)),
);
subscriptions.push(
SocialNetwork.getFollowedByUser(address, (followed) => setFollowedUserCount(followed.size)),
);
}, 1000); // this causes social graph recursive loading, so let some other stuff like feed load first

return () => {
subscriptions.forEach((unsub) => unsub());
};
}, [address]);

return (
<div>
<div className="text-sm flex gap-4">
<a href={`/follows/${address}`}>
<b>{Math.max(followedUserCount, followedUserCountFromApi)}</b> {t('following')}
</a>
<a href={`/followers/${address}`}>
<b>{Math.max(followerCount, followerCountFromApi)}</b> {t('followers')}
</a>
</div>
<Show when={SocialNetwork.isFollowing(address, Key.getPubKey())}>
<div>
<small>{t('follows_you')}</small>
</div>
</Show>
</div>
);
};

export default memo(ProfileStats);

0 comments on commit 5d06201

Please sign in to comment.