- {activities?.map((activity, index) => (
-
- handleActivityClick(activity)}
+
+ {groupedActivities.map((group, index) => (
+
+ handleActivityClick(group, index)}
>
- = ({layout}) => {
+ const {updateRoute} = useRouting();
+
+ // Initialise activities for the inbox or feed
const typeFilter = layout === 'inbox'
? ['Create:Article']
: ['Create:Note', 'Announce:Note'];
@@ -31,23 +39,27 @@ const Inbox: React.FC = ({layout}) => {
const {getActivitiesQuery, updateActivity} = useActivitiesForUser({
handle: 'index',
includeOwn: true,
- excludeNonFollowers: true,
filter: {
type: typeFilter
- }
+ },
+ key: layout === 'inbox' ? GET_ACTIVITIES_QUERY_KEY_INBOX : GET_ACTIVITIES_QUERY_KEY_FEED
});
+
const {data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading} = getActivitiesQuery;
- const {updateRoute} = useRouting();
+ const activities = (data?.pages.flatMap(page => page.data) ?? [])
+ // If there somehow are duplicate activities, filter them out so the list rendering doesn't break
+ .filter((activity, index, self) => index === self.findIndex(a => a.id === activity.id))
+ // Filter out replies
+ .filter((activity) => {
+ return !activity.object.inReplyTo;
+ });
- const {suggested, isLoadingSuggested} = useSuggestedProfiles();
+ // Initialise suggested profiles
+ const {suggestedProfilesQuery} = useSuggestedProfiles('index', 3);
+ const {data: suggestedData, isLoading: isLoadingSuggested} = suggestedProfilesQuery;
+ const suggested = suggestedData || [];
- const activities = (data?.pages.flatMap(page => page.data) ?? []).filter((activity) => {
- return !activity.object.inReplyTo;
- });
-
- // Intersection observer to fetch more activities when the user scrolls
- // to the bottom of the page
const observerRef = useRef(null);
const loadMoreRef = useRef(null);
@@ -86,7 +98,7 @@ const Inbox: React.FC = ({layout}) => {
) : activities.length > 0 ? (
<>
-
-
+
+
+ {index < groupedActivities.length - 1 &&
diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx
index 0bddd17968..4fb7fc7537 100644
--- a/apps/admin-x-activitypub/src/components/Inbox.tsx
+++ b/apps/admin-x-activitypub/src/components/Inbox.tsx
@@ -7,14 +7,19 @@ import NewPostModal from './modals/NewPostModal';
import NiceModal from '@ebay/nice-modal-react';
import React, {useEffect, useRef} from 'react';
import Separator from './global/Separator';
-import ViewProfileModal from './global/ViewProfileModal';
import getName from '../utils/get-name';
import getUsername from '../utils/get-username';
-import useSuggestedProfiles from '../hooks/useSuggestedProfiles';
import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {Button, Heading, LoadingIndicator} from '@tryghost/admin-x-design-system';
+import {
+ GET_ACTIVITIES_QUERY_KEY_FEED,
+ GET_ACTIVITIES_QUERY_KEY_INBOX,
+ useActivitiesForUser,
+ useSuggestedProfiles,
+ useUserDataForUser
+} from '../hooks/useActivityPubQueries';
+import {handleProfileClick} from '../utils/handle-profile-click';
import {handleViewContent} from '../utils/content-handlers';
-import {useActivitiesForUser, useUserDataForUser} from '../hooks/useActivityPubQueries';
import {useRouting} from '@tryghost/admin-x-framework/routing';
type Layout = 'inbox' | 'feed';
@@ -24,6 +29,9 @@ interface InboxProps {
}
const Inbox: React.FC
- {activity.actor.name}
- {getUsername(activity.actor)}
+
+
-
- {index < activities.length - 1 &&
+
-
+ {!openStates[group.id || `${group.type}_${index}`] && group.actors.slice(0, maxAvatars).map(actor => (
+
+
+ {`+${group.actors.length - maxAvatars}`}
+
+ )}
+
+ {group.actors.length > 1 && (
+
+ {openStates[group.id || `${group.type}_${index}`] && group.actors.length > 1 && (
+
+ {group.actors.map(actor => (
+
+ )}
+ handleProfileClick(actor, e)}
+ >
+
+ ))}
+ {getActivityDescription(activity)}
- {getExtendedDescription(activity)}
-
+ {getGroupDescription(group)}
+
+ {getExtendedDescription(group)}
+
+
{layout === 'feed' &&
-
@@ -124,8 +136,7 @@ const Inbox: React.FC = ({layout}) => {
- {/* = ({layout}) => {
This is your {layout === 'inbox' ? 'inbox' : 'feed'}
You'll find {layout === 'inbox' ? 'long-form content' : 'short posts and updates'} from the accounts you follow here.
You might also like
@@ -135,28 +146,17 @@ const Inbox: React.FC-
{suggested.map((profile, index) => {
const actor = profile.actor;
- // const isFollowing = profile.isFollowing;
return (
-
-
NiceModal.show(ViewProfileModal, { - profile: getUsername(actor), - onFollow: () => {}, - onUnfollow: () => {} - })}> + handleProfileClick(actor)} + > {getName(actor)} {getUsername(actor)}- {/*updateSuggestedProfile(actor.id!, {isFollowing: true})} - onUnfollow={() => updateSuggestedProfile(actor.id!, {isFollowing: false})} - /> */}
{index < suggested.length - 1 && -
-
handleViewContent(activity, false)} - onCommentClick={() => handleViewContent(activity, true)} - /> - {index < posts.length - 1 && } -
- ))}
- -
-
handleViewContent(activity, false)} - onCommentClick={() => handleViewContent(activity, true)} - /> - {index < liked.length - 1 && } -
- ))}
- -
+
handleViewContent(activity, false)} + onCommentClick={() => handleViewContent(activity, true)} + /> + {index < posts.length - 1 && } +
+ ))}
+ -
+
handleViewContent(activity, false)} + onCommentClick={() => handleViewContent(activity, true)} + /> + {index < liked.length - 1 && } +
+ ))}
+
-
- {posts.slice(0, visiblePosts).map((activity, index) => (
-
-
- );
- }
+ const EmptyState = () => (
+ hasNextPage === false && items.length === 0 && (
+
+
+ )
+ }
+
+ );
- return (
- <>
- -
- {liked.slice(0, visibleLikes).map((activity, index) => (
-
-
- );
- }
+const PostsTab: React.FC = () => {
+ const {items, EmptyState, LoadingState} = useInfiniteScrollTab-
+ {posts.map((activity, index) => (
+
-
+ {liked.map((activity, index) => (
+
-
- {following.slice(0, visibleFollowing).map((item, index) => (
+ {following.map((item, index) => (
-
- );
- }
+const FollowersTab: React.FC = () => {
+ const {items: followers, EmptyState, LoadingState} = useInfiniteScrollTab-
- {followers.slice(0, visibleFollowers).map((item, index) => (
+ {followers.map((item, index) => (
{renderPostsTab()}
,
- counter: posts.length
+ contents: (
+
+
+ )
},
{
id: 'likes',
title: 'Likes',
- contents: {renderLikesTab()}
,
- counter: liked.length
+ contents: (
+
+
+ ),
+ counter: likedCount
},
{
id: 'following',
title: 'Following',
- contents: {renderFollowingTab()}
,
+ contents: (
+
+
+ ),
counter: followingCount
},
{
id: 'followers',
title: 'Followers',
- contents: {renderFollowersTab()}
,
+ contents: (
+
+
+ ),
counter: followersCount
}
].filter(Boolean) as Tab
-
- );
- }
-
- return (
-
-
- );
- };
-
return (
<>
- {userProfile?.image && (
-
-
- 
-
- )}
-
-
- {userProfile?.name}
-
- {userProfile && getUsername(userProfile)}
-
- {(userProfile?.summary || attachments.length > 0) && (
-
- containerClassName='mt-6'
- selectedTab={selectedTab}
- tabs={tabs}
- onTabChange={setSelectedTab}
- />
-
-
-
-
-
- p]:mb-3 ${isExpanded ? 'max-h-none pb-7' : 'max-h-[160px] overflow-hidden'} relative`}>
-
- {attachments.map(attachment => (
-
- {attachment.name}
-
-
- ))}
- {!isExpanded && isOverflowing && (
-
- )}
- {isOverflowing && }
-
- )}
-
+
+ ) : (
+
+
+ )}
);
};
diff --git a/apps/admin-x-activitypub/src/components/Search.tsx b/apps/admin-x-activitypub/src/components/Search.tsx
index 6cc9b7013a..39451a20ea 100644
--- a/apps/admin-x-activitypub/src/components/Search.tsx
+++ b/apps/admin-x-activitypub/src/components/Search.tsx
@@ -1,6 +1,6 @@
import React, {useEffect, useRef, useState} from 'react';
-import {Activity, ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
+import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {Button, Icon, LoadingIndicator, NoValueLabel, TextField} from '@tryghost/admin-x-design-system';
import {useDebounce} from 'use-debounce';
@@ -10,11 +10,11 @@ import FollowButton from './global/FollowButton';
import MainNavigation from './navigation/MainNavigation';
import NiceModal from '@ebay/nice-modal-react';
-import ViewProfileModal from './global/ViewProfileModal';
+import ViewProfileModal from './modals/ViewProfileModal';
import Separator from './global/Separator';
-import useSuggestedProfiles from '../hooks/useSuggestedProfiles';
-import {useSearchForUser} from '../hooks/useActivityPubQueries';
+
+import {useSearchForUser, useSuggestedProfiles} from '../hooks/useActivityPubQueries';
interface SearchResultItem {
actor: ActorProperties;
@@ -22,7 +22,6 @@ interface SearchResultItem {
followerCount: number;
followingCount: number;
isFollowing: boolean;
- posts: Activity[];
}
interface SearchResultProps {
@@ -30,8 +29,6 @@ interface SearchResultProps {
update: (id: string, updated: Partial
+ {userProfile?.image && (
+
+
+
+
+ )}
+
+
+ {userProfile?.name}
+
+ {userProfile && getUsername(userProfile)}
+
+ {(userProfile?.summary || attachments.length > 0) && (
+
+ containerClassName='mt-6'
+ selectedTab={selectedTab}
+ tabs={tabs}
+ onTabChange={setSelectedTab}
+ />
+
+
+
+
+
+ p]:mb-3 ${isExpanded ? 'max-h-none pb-7' : 'max-h-[160px] overflow-hidden'} relative`}>
+
+ {attachments.map(attachment => (
+
+ {attachment.name}
+
+
+ ))}
+ {!isExpanded && isOverflowing && (
+
+ )}
+ {isOverflowing && }
+
+ )}
+
+
+ );
+};
+
+export default NotificationIcon;
diff --git a/apps/admin-x-activitypub/src/components/activities/NotificationItem.tsx b/apps/admin-x-activitypub/src/components/activities/NotificationItem.tsx
new file mode 100644
index 0000000000..1e293b6ec1
--- /dev/null
+++ b/apps/admin-x-activitypub/src/components/activities/NotificationItem.tsx
@@ -0,0 +1,63 @@
+import NotificationIcon, {NotificationType} from './NotificationIcon';
+import React from 'react';
+
+// Context to share common props between compound components
+interface NotificationContextType {
+ onClick?: () => void;
+ url?: string;
+}
+
+const NotificationContext = React.createContext
+ {children}
+
+
+
+ );
+};
+
+const Avatars = ({children}: {children: React.ReactNode}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const Content = ({children}: {children: React.ReactNode}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+// Attach sub-components to the main component
+NotificationItem.Icon = Icon;
+NotificationItem.Avatars = Avatars;
+NotificationItem.Content = Content;
+
+export default NotificationItem;
diff --git a/apps/admin-x-activitypub/src/components/articleBodyStyles.ts b/apps/admin-x-activitypub/src/components/articleBodyStyles.ts
index 81f24f5181..1081426e7a 100644
--- a/apps/admin-x-activitypub/src/components/articleBodyStyles.ts
+++ b/apps/admin-x-activitypub/src/components/articleBodyStyles.ts
@@ -1,53 +1,5 @@
const articleBodyStyles = (siteUrl: string|undefined) => {
return `
-
-
-
- ${heading}
- ${excerpt ? ` -${excerpt}
- ` : ''} - ${image ? ` -
- ${html}
-
-
-