Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Made clicking users and posts on your profile bring up drawer view

Browse source 
ref https://linear.app/ghost/issue/AP-510/clicking-on-following-and-followers-users-should-open-the-drawer-on, https://linear.app/ghost/issue/AP-511/clicking-on-items-in-posts-and-liked-tabs-of-your-profile-should-open
This commit is contained in:
Djordje Vlaisavljevic 2024-10-23 19:40:31 +01:00
parent 79439b80c1
commit ba0c0439ab
1 changed files with 33 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
apps/admin-x-activitypub/src/components/Profile.tsx
View file

@ -1,10 +1,14 @@
import APAvatar from './global/APAvatar'; import APAvatar from './global/APAvatar';
import ActivityItem from './activities/ActivityItem'; import ActivityItem, {type Activity} from './activities/ActivityItem';
import FeedItem from './feed/FeedItem'; import FeedItem from './feed/FeedItem';
import MainNavigation from './navigation/MainNavigation'; import MainNavigation from './navigation/MainNavigation';
import NiceModal from '@ebay/nice-modal-react';
import React, {useEffect, useRef, useState} from 'react'; import React, {useEffect, useRef, useState} from 'react';
import getUsername from '../utils/get-username'; import getUsername from '../utils/get-username';
import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub'; import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
import ArticleModal from './feed/ArticleModal';
import ViewProfileModal from './global/ViewProfileModal';
import {Button, Heading, List, NoValueLabel, Tab, TabView} from '@tryghost/admin-x-design-system'; import {Button, Heading, List, NoValueLabel, Tab, TabView} from '@tryghost/admin-x-design-system';
import { import {
useFollowersCountForUser, useFollowersCountForUser,
@ -61,6 +65,22 @@ const Profile: React.FC<ProfileProps> = ({}) => {
setVisibleFollowers(prev => prev + INCREMENT_VISIBLE_FOLLOWERS); setVisibleFollowers(prev => prev + INCREMENT_VISIBLE_FOLLOWERS);
}; };
const handleUserClick = (actor: ActorProperties) => {
NiceModal.show(ViewProfileModal, {
profile: getUsername(actor),
onFollow: () => {},
onUnfollow: () => {}
});
};
const handlePostClick = (activity: Activity) => {
NiceModal.show(ArticleModal, {
object: activity.object,
actor: activity.actor,
comments: activity.object.replies || []
});
};
const tabs = [ const tabs = [
{ {
id: 'posts', id: 'posts',
@ -77,6 +97,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
<li <li
key={activity.id} key={activity.id}
data-test-view-article data-test-view-article
onClick={() => handlePostClick(activity)}
> >
<FeedItem <FeedItem
actor={activity.object?.attributedTo || activity.actor} actor={activity.object?.attributedTo || activity.actor}
@ -121,6 +142,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
<li <li
key={activity.id} key={activity.id}
data-test-view-article data-test-view-article
onClick={() => handlePostClick(activity)}
> >
<FeedItem <FeedItem
actor={activity.object?.attributedTo || activity.actor} actor={activity.object?.attributedTo || activity.actor}
@ -163,7 +185,11 @@ const Profile: React.FC<ProfileProps> = ({}) => {
<List> <List>
{following.slice(0, visibleFollowing).map((item) => { {following.slice(0, visibleFollowing).map((item) => {
return ( return (
<ActivityItem key={item.id} url={item.url}> <ActivityItem
key={item.id}
url={item.url}
onClick={() => handleUserClick(item)}
>
<APAvatar author={item} /> <APAvatar author={item} />
<div> <div>
<div className='text-grey-600'> <div className='text-grey-600'>
@ -207,7 +233,11 @@ const Profile: React.FC<ProfileProps> = ({}) => {
<List> <List>
{followers.slice(0, visibleFollowers).map((item) => { {followers.slice(0, visibleFollowers).map((item) => {
return ( return (
<ActivityItem key={item.id} url={item.url}> <ActivityItem
key={item.id}
url={item.url}
onClick={() => handleUserClick(item)}
>
<APAvatar author={item} /> <APAvatar author={item} />
<div> <div>
<div className='text-grey-600'> <div className='text-grey-600'>