0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00

Added buttons to show more data on profile in admin-x-activitypub (#21373)

no refs
This commit is contained in:
Michael Barrett 2024-10-22 21:29:46 +01:00 committed by GitHub
parent 26133095ea
commit 1b468f333b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 61 additions and 8 deletions

View file

@ -1,6 +1,6 @@
{
"name": "@tryghost/admin-x-activitypub",
"version": "0.1.7",
"version": "0.1.8",
"license": "MIT",
"repository": {
"type": "git",

View file

@ -35,10 +35,30 @@ const Profile: React.FC<ProfileProps> = ({}) => {
const layout = 'feed';
const [visibleFollowers, setVisibleFollowers] = useState(30);
const INCREMENT_VISIBLE_POSTS = 40;
const INCREMENT_VISIBLE_LIKES = 40;
const INCREMENT_VISIBLE_FOLLOWING = 40;
const INCREMENT_VISIBLE_FOLLOWERS = 40;
const [visiblePosts, setVisiblePosts] = useState(INCREMENT_VISIBLE_POSTS);
const [visibleLikes, setVisibleLikes] = useState(INCREMENT_VISIBLE_LIKES);
const [visibleFollowing, setVisibleFollowing] = useState(INCREMENT_VISIBLE_FOLLOWING);
const [visibleFollowers, setVisibleFollowers] = useState(INCREMENT_VISIBLE_FOLLOWERS);
const loadMorePosts = () => {
setVisiblePosts(prev => prev + INCREMENT_VISIBLE_POSTS);
};
const loadMoreLikes = () => {
setVisibleLikes(prev => prev + INCREMENT_VISIBLE_LIKES);
};
const loadMoreFollowing = () => {
setVisibleFollowing(prev => prev + INCREMENT_VISIBLE_FOLLOWING);
};
const loadMoreFollowers = () => {
setVisibleFollowers(prev => prev + 30);
setVisibleFollowers(prev => prev + INCREMENT_VISIBLE_FOLLOWERS);
};
const tabs = [
@ -53,7 +73,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
</NoValueLabel>
) : (
<ul className='mx-auto flex max-w-[640px] flex-col'>
{posts.map((activity, index) => (
{posts.slice(0, visiblePosts).map((activity, index) => (
<li
key={activity.id}
data-test-view-article
@ -72,6 +92,16 @@ const Profile: React.FC<ProfileProps> = ({}) => {
))}
</ul>
)}
{visiblePosts < posts.length && (
<Button
className={`mt-3 self-start text-grey-900 transition-all hover:opacity-60`}
color='grey'
fullWidth={true}
label='Show more'
size='md'
onClick={loadMorePosts}
/>
)}
</div>
),
counter: posts.length
@ -87,7 +117,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
</NoValueLabel>
) : (
<ul className='mx-auto flex max-w-[640px] flex-col'>
{liked.map((activity, index) => (
{liked.slice(0, visibleLikes).map((activity, index) => (
<li
key={activity.id}
data-test-view-article
@ -106,6 +136,16 @@ const Profile: React.FC<ProfileProps> = ({}) => {
))}
</ul>
)}
{visibleLikes < liked.length && (
<Button
className={`mt-3 self-start text-grey-900 transition-all hover:opacity-60`}
color='grey'
fullWidth={true}
label='Show more'
size='md'
onClick={loadMoreLikes}
/>
)}
</div>
),
counter: liked.length
@ -121,7 +161,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
</NoValueLabel>
) : (
<List>
{following.map((item) => {
{following.slice(0, visibleFollowing).map((item) => {
return (
<ActivityItem key={item.id} url={item.url}>
<APAvatar author={item} />
@ -140,6 +180,16 @@ const Profile: React.FC<ProfileProps> = ({}) => {
})}
</List>
)}
{visibleFollowing < following.length && (
<Button
className={`mt-3 self-start text-grey-900 transition-all hover:opacity-60`}
color='grey'
fullWidth={true}
label='Show more'
size='md'
onClick={loadMoreFollowing}
/>
)}
</div>
),
counter: followingCount
@ -172,8 +222,11 @@ const Profile: React.FC<ProfileProps> = ({}) => {
)}
{visibleFollowers < followers.length && (
<Button
className='mt-4'
label='Load More'
className={`mt-3 self-start text-grey-900 transition-all hover:opacity-60`}
color='grey'
fullWidth={true}
label='Show more'
size='md'
onClick={loadMoreFollowers}
/>
)}