Populated reply box avatar

ref https://linear.app/tryghost/issue/AP-397

I think we're gonna want to pass this data into the component long
term, but this will do for now, I'm going to look at cleaning up these
components in my next B week
This commit is contained in:
Fabien O'Carroll 2024-09-19 10:50:20 +07:00 committed by Fabien 'egg' O'Carroll
parent e8e44a0312
commit 3e6b3bda8a
3 changed files with 24 additions and 2 deletions

View File

@ -203,4 +203,13 @@ export class ActivityPubAPI {
const response = await this.fetchJSON(url, 'POST', {content});
return response;
}
get userApiUrl() {
return new URL(`.ghost/activitypub/users/${this.handle}`, this.apiUrl);
}
async getUser() {
const json = await this.fetchJSON(this.userApiUrl);
return json;
}
}

View File

@ -6,7 +6,7 @@ import clsx from 'clsx';
import getUsername from '../../utils/get-username';
import {Button, showToast} from '@tryghost/admin-x-design-system';
import {ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {useReplyMutationForUser} from '../../hooks/useActivityPubQueries';
import {useReplyMutationForUser, useUserDataForUser} from '../../hooks/useActivityPubQueries';
// import {useFocusContext} from '@tryghost/admin-x-design-system/types/providers/DesignSystemProvider';
export interface APTextAreaProps extends HTMLProps<HTMLTextAreaElement> {
@ -41,6 +41,8 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
const [textValue, setTextValue] = useState(value); // Manage the textarea value with state
const replyMutation = useReplyMutationForUser('index');
const {data: user} = useUserDataForUser('index');
const styles = clsx(
'ap-textarea order-2 w-full resize-none rounded-lg border py-2 pr-3 text-[1.5rem] transition-all dark:text-white',
error ? 'border-red' : 'border-transparent placeholder:text-grey-500 dark:placeholder:text-grey-800',
@ -67,7 +69,7 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
return (
<div className='flex w-full gap-x-3 py-6'>
<APAvatar/>
<APAvatar author={user} />
<div className='relative w-full'>
<FormPrimitive.Root asChild>
<div className='flex w-full flex-col'>

View File

@ -131,6 +131,17 @@ export function useUnlikeMutationForUser(handle: string) {
});
}
export function useUserDataForUser(handle: string) {
const siteUrl = useSiteUrl();
const api = createActivityPubAPI(handle, siteUrl);
return useQuery({
queryKey: [`user:${handle}`],
async queryFn() {
return api.getUser();
}
});
}
export function useFollowersCountForUser(handle: string) {
const siteUrl = useSiteUrl();
const api = createActivityPubAPI(handle, siteUrl);